iOS如何實現(xiàn)仿微博導(dǎo)航欄動畫

小編給大家分享一下iOS如何實現(xiàn)仿微博導(dǎo)航欄動畫，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

效果

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

思路

先介紹CA的兩個方法:

基于原始狀態(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);

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

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

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

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

先看形變

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

再看位移

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

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

具體到數(shù)值:

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

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

依舊先看形變

和之前的形變相同

形變-0.5到1

然后來看位移

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

具體到數(shù)值:

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

具體函數(shù)

以我項目里兩個按鈕(self.titleBtn1/self.titleBtn2)為例

if (0 <= offsetRate && offsetRate <= 0.5) {
  /*
   * 左側(cè)與中間相互移動
   */
  
  //x軸位移 :: 中間時位移 * 偏移比例系數(shù)
  CGFloat translationOfX = _translationofX_center * offsetRate * 2;
  self.line.transform = CGAffineTransformMakeTranslation(translationOfX, 0);
  
  //x軸形變 :: 1 + (最大時相對形變) * 偏移比例系數(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ù)
  CGFloat translationOfX = _translationofX_center + _translationofX_right * (offsetRate - 0.5) * 2;
  self.line.transform = CGAffineTransformMakeTranslation(translationOfX, 0);
  
  //x軸形變 :: 最大時形變 - (最大形變 - 最終形變) * 偏移比例系數(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è)時寬度
 CGFloat _btn1Width;
 //位于右側(cè)時寬度
 CGFloat _btn2Width;
 //從左側(cè)移到中心時x軸位移
 CGFloat _translationofX_center;
 //從中心移到右側(cè)時x軸位移
 //所以總位移就是_translationofX_center+_translationofX_right
 CGFloat _translationofX_right;
 //位于中心時形變
 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

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

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

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

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

@interface KTNavScrollTool : NSObject


/**
 初始化

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


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

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

看完了這篇文章，相信你對“iOS如何實現(xiàn)仿微博導(dǎo)航欄動畫”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！