iOS 基本動畫、關(guān)鍵幀動畫、利用緩動函數(shù)實(shí)現(xiàn)物理動畫效果

更新時間：2016年10月30日 10:25:22 投稿：lqh

這篇文章主要介紹了iOS 基本動畫、關(guān)鍵幀動畫、利用緩動函數(shù)實(shí)現(xiàn)物理動畫效果的相關(guān)資料,需要的朋友可以參考下

iOS基本動畫/關(guān)鍵幀動畫/利用緩動函數(shù)實(shí)現(xiàn)物理動畫效果

先說下基本動畫部分

基本動畫部分比較簡單, 但能實(shí)現(xiàn)的動畫效果也很局限

使用方法大致為:

#1. 創(chuàng)建原始UI或者畫面

#2. 創(chuàng)建CABasicAnimation實(shí)例, 并設(shè)置keypart/duration/fromValue/toValue

#3. 設(shè)置動畫最終停留的位置

#4. 將配置好的動畫添加到layer層中

舉個例子, 比如實(shí)現(xiàn)一個圓形從上往下移動, 上代碼:

//設(shè)置原始畫面
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  [self.view addSubview:showView];
  
  //創(chuàng)建基本動畫
  CABasicAnimation *basicAnimation = [CABasicAnimation animation];
  
  //設(shè)置屬性
  basicAnimation.keyPath      = @"position";
  basicAnimation.duration     = 4.0f;
  basicAnimation.fromValue     = [NSValue valueWithCGPoint:showView.center];
  basicAnimation.toValue      = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
  
  //設(shè)置動畫結(jié)束位置
  showView.center = CGPointMake(50, 300);
  
  //添加動畫到layer層
  [showView.layer addAnimation:basicAnimation forKey:nil];

接下來說下關(guān)鍵幀動畫

其實(shí)跟基本動畫差不多, 只是能設(shè)置多個動畫路徑使用方法也類似, 大致為

#1. 創(chuàng)建原始UI或者畫面

#2. 創(chuàng)建CAKeyframeAnimation實(shí)例, 并設(shè)置keypart/duration/values 相比基本動畫只能設(shè)置開始和結(jié)束點(diǎn), 關(guān)鍵幀動畫能添加多個動畫路徑點(diǎn)

#3. 設(shè)置動畫最終停留的位置

#4. 將配置好的動畫添加到layer層中

舉個例子, 紅色圓形左右晃動往下墜落上代碼:

//設(shè)置原始畫面
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  
  [self.view addSubview:showView];
  
  //創(chuàng)建關(guān)鍵幀動畫
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  
  //設(shè)置動畫屬性
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  
  keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
                 [NSValue valueWithCGPoint:CGPointMake(100, 100)],
                 [NSValue valueWithCGPoint:CGPointMake(50, 150)],
                 [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
  
  //設(shè)置動畫結(jié)束位置
  showView.center = CGPointMake(200, 200);
  
  //添加動畫到layer層
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

最后是利用緩動函數(shù)配合關(guān)鍵幀動畫實(shí)現(xiàn)比較復(fù)雜的物理性動畫

先說說什么是緩動函數(shù), 就是有高人寫了一個庫可以計算出模擬物理性動畫(比如彈簧效果)所要的路徑

Github地址: https://github.com/YouXianMing/EasingAnimation

具體有哪些動畫效果可看庫中的緩動函數(shù)查詢表, 簡單舉個小球落地的效果

上代碼:

//設(shè)置原始畫面
  UIView *showView        = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
  showView.layer.masksToBounds  = YES;
  showView.layer.cornerRadius  = 50.f;
  showView.layer.backgroundColor = [UIColor redColor].CGColor;
  
  [self.view addSubview:showView];
  
  //創(chuàng)建關(guān)鍵幀動畫
  CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
  
  //設(shè)置動畫屬性
  keyFrameAnimation.keyPath       = @"position";
  keyFrameAnimation.duration       = 4.0f;
  
　　　　//關(guān)鍵處, 在這里使用的緩動函數(shù)計算點(diǎn)路徑
  keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
                             toPoint:CGPointMake(50, 300)
                              func:BounceEaseOut
                           frameCount:4.0f * 30];
  
  //設(shè)置動畫結(jié)束位置
  showView.center = CGPointMake(50, 300);
  
  //添加動畫到layer層
  [showView.layer addAnimation:keyFrameAnimation forKey:nil];

感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: