快捷導(dǎo)航

iOS仿微博導(dǎo)航欄動畫(CoreGraphics)的實(shí)現(xiàn)方法

更新時(shí)間：2018年07月06日 10:42:42 作者：kirito_song

這篇文章主要給大家介紹了關(guān)于iOS仿微博導(dǎo)航欄動畫(CoreGraphics)的實(shí)現(xiàn)方法，文章最后給出了完整的示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

昨天剛做完項(xiàng)目的新版本、除了嘗試一些新的架構(gòu)之外、功能方面并沒什么特別的地方。

但是順手搞了一些還算好玩的東西、其一就是這個(gè)導(dǎo)航欄的動畫。

感覺還算簡單易懂、分享一下（其實(shí)更多是最近攢了好多封面、不貼出來憋得人難受）。

導(dǎo)航欄動畫.gif

思路

先介紹CA的兩個(gè)方法:

基于原始狀態(tài)的位移

CG_EXTERN CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx,
 CGFloat ty) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

基于原始狀態(tài)的形變

CG_EXTERN CGAffineTransform CGAffineTransformScale(CGAffineTransform t,
 CGFloat sx, CGFloat sy) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

知道了這兩個(gè)方法、剩下就是如何使用形變和位移以達(dá)到想要的效果了。

這里、需要分兩部分來看、一部分是位移、一部分是形變
而且、如果將一整個(gè)動畫以及翻頁動作看成1。那么位移和形變又需要分成兩部分來看：0到0.5以及0.5到1。

其實(shí)一點(diǎn)都不難、畫個(gè)圖看一眼。連一元方程都不算、完全是小學(xué)算術(shù)題~甚至連奧數(shù)都算不上。

0到0.5區(qū)間內(nèi)

先看形變

在0.5時(shí)、我們需要將線條長度從left_width形變成max_width

再看位移

與此同時(shí)如果想讓線條在左側(cè)看起來并沒有移動、就需要將線條的x軸一點(diǎn)點(diǎn)向右移動。這個(gè)移動的值呢?

由于形變是雙向的、右側(cè)和左側(cè)都會變長。那么對于左側(cè)最終將是中間時(shí)最終形變差值的一半。

具體到數(shù)值:

最左側(cè)到中心點(diǎn)時(shí)x軸的位移 = 最左側(cè)到中心點(diǎn)時(shí)形變的差值/2 = (max_width - left_width)/2

0.5到1區(qū)間內(nèi)

依舊先看形變

和之前的形變相同

形變-0.5到1

然后來看位移

同理、如果我的長度減少了X、那么我如果想保證看起來右側(cè)位置不會改變、考慮到形變是左右同時(shí)發(fā)生、就需要向右移動X/2。

具體到數(shù)值:

中心點(diǎn)到最右側(cè)時(shí)x軸的位移 = 中心點(diǎn)到最右時(shí)形變的差值/2 = (max_width - right_width)/2

具體函數(shù)

以我項(xiàng)目里兩個(gè)按鈕(self.titleBtn1/self.titleBtn2)為例

if (0 <= offsetRate && offsetRate <= 0.5) {
  /*
   * 左側(cè)與中間相互移動
   */
  
  //x軸位移 :: 中間時(shí)位移 * 偏移比例系數(shù)
  CGFloat translationOfX = _translationofX_center * offsetRate * 2;
  self.line.transform = CGAffineTransformMakeTranslation(translationOfX, 0);
  
  //x軸形變 :: 1 + (最大時(shí)相對形變) * 偏移比例系數(shù)
  CGFloat flagScale = 1 + (_flagScale_center - 1) * (offsetRate * 2);
  self.line.transform = CGAffineTransformScale(self.line.transform, flagScale, 1);
  
 }else if (0.5 < offsetRate && offsetRate <= 1) {
  /*
   * 中間與右側(cè)相互移動
   */
  
  //x軸位移 :: 中間時(shí)位移 + 最終位移 * 偏移比例系數(shù)
  CGFloat translationOfX = _translationofX_center + _translationofX_right * (offsetRate - 0.5) * 2;
  self.line.transform = CGAffineTransformMakeTranslation(translationOfX, 0);
  
  //x軸形變 :: 最大時(shí)形變 - (最大形變 - 最終形變) * 偏移比例系數(shù)
  CGFloat flagScale = _flagScale_center - (_flagScale_center - _btn2Width/_btn1Width) * (offsetRate - 0.5) * 2;

  self.line.transform = CGAffineTransformScale(self.line.transform, flagScale, 1);
 }

其中的某些參數(shù)的意義以及取值:

{
 //整體最大寬度
 CGFloat _maxWidth;
 //位于左側(cè)時(shí)寬度
 CGFloat _btn1Width;
 //位于右側(cè)時(shí)寬度
 CGFloat _btn2Width;
 //從左側(cè)移到中心時(shí)x軸位移
 CGFloat _translationofX_center;
 //從中心移到右側(cè)時(shí)x軸位移
 //所以總位移就是_translationofX_center+_translationofX_right
 CGFloat _translationofX_right;
 //位于中心時(shí)形變
 CGFloat _flagScale_center;
}

{
 _btn1Width = self.titleBtn1.width;
 _btn2Width = self.titleBtn2.width;
 _maxWidth = self.titleBtn2.right - self.titleBtn1.left;
 _translationofX_center = (_maxWidth - _btn1Width)/2;
 _translationofX_right = (_maxWidth - _btn2Width)/2;
 _flagScale_center = _maxWidth/_btn1Width;
 self.line.frame = CGRectMake(self.titleBtn1.left, self.height, self.titleBtn1.width, 1);
}

將屏幕滑動的偏移量傳遞進(jìn)來

#pragma mark UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
 
 CGFloat offsetX = scrollView.contentOffset.x;
 CGFloat offsetRate = offsetX/BSScreen_Width;
 

 //將偏移率傳遞給navView
 
 [self.navView configLingWithOffsetRate:offsetRate];
}

Demo

上面的例子的代碼其實(shí)都已經(jīng)列出來了、沒什么再單獨(dú)傳Demo的必要。

但是畢竟開了個(gè)帖子、連個(gè)Demo都沒有不好看。于是上午干脆封裝了一個(gè)小工具出來。

但是只封裝了移動的動畫、并沒封裝按鈕變色等等一系列功能。

用起來也挺簡單的、只要將按鈕的數(shù)組、下方橫線交付、在屏幕滑動的時(shí)候把偏移量傳遞進(jìn)去、就能自動工作了。寬度啊什么都會自己算:

@interface KTNavScrollTool : NSObject


/**
 初始化

 @param titleArr 按鈕數(shù)組
 @param line 需要移動的橫線
 @return 實(shí)例對象
 */
- (instancetype)initWithTitleArr:(NSArray<UIView *> *)titleArr line:(UIView *)line;


/**
 移動的函數(shù)

 @param offsetRate scrollview滾動式的偏移量的比例
 */
- (void)configLingWithOffsetRate:(CGFloat)offsetRate;
@end

GitHub有興趣可以自取（本地下載）

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: