iOS基本動畫/關鍵幀動畫/利用緩動函數實現物理動畫效果

先說下基本動畫部分

基本動畫部分比較簡單, 但能實現的動畫效果也很局限

使用方法大致為:

#1. 創建原始UI或者畫面

#2. 創建CABasicAnimation實例, 並設置keypart/duration/fromValue/toValue

#3. 設置動畫最終停留的位置

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

舉個例子, 比如實現一個圓形從上往下移動, 上代碼:

 1 //設置原始畫面
 2     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
 3     showView.layer.masksToBounds   = YES;
 4     showView.layer.cornerRadius    = 50.f;
 5     showView.layer.backgroundColor = [UIColor redColor].CGColor;

 6     [self.view addSubview:showView];
 7     
 8     //創建基本動畫
 9     CABasicAnimation *basicAnimation = [CABasicAnimation animation];
10     
11     //設置屬性
12     basicAnimation.keyPath           = @"position";
13     basicAnimation.duration          = 4.0f;
14     basicAnimation.fromValue         = [NSValue valueWithCGPoint:showView.center];
15     basicAnimation.toValue           = [NSValue valueWithCGPoint:CGPointMake(50, 300)];
16     
17     //設置動畫結束位置
18     showView.center = CGPointMake(50, 300);
19     
20     //添加動畫到layer層
21     [showView.layer addAnimation:basicAnimation forKey:nil];

接下來說下關鍵幀動畫

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

#1. 創建原始UI或者畫面

#2. 創建CAKeyframeAnimation實例, 並設置keypart/duration/values 相比基本動畫只能設置開始和結束點, 關鍵幀動畫能添加多個動畫路徑點

#3. 設置動畫最終停留的位置

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

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

 1 //設置原始畫面
 2     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
 3     showView.layer.masksToBounds   = YES;
 4     showView.layer.cornerRadius    = 50.f;
 5     showView.layer.backgroundColor = [UIColor redColor].CGColor;
 6     
 7     [self.view addSubview:showView];
 8     
 9     //創建關鍵幀動畫
10     CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
11     
12     //設置動畫屬性
13     keyFrameAnimation.keyPath              = @"position";
14     keyFrameAnimation.duration             = 4.0f;
15     
16     keyFrameAnimation.values = @[[NSValue valueWithCGPoint:showView.center],
17                                  [NSValue valueWithCGPoint:CGPointMake(100, 100)],
18                                  [NSValue valueWithCGPoint:CGPointMake(50, 150)],
19                                  [NSValue valueWithCGPoint:CGPointMake(200, 200)]];
20     
21     //設置動畫結束位置
22     showView.center = CGPointMake(200, 200);
23     
24     //添加動畫到layer層
25     [showView.layer addAnimation:keyFrameAnimation forKey:nil];

最後是利用緩動函數配合關鍵幀動畫實現比較複雜的物理性動畫

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

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

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

上代碼:

 1 //設置原始畫面
 2     UIView *showView               = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
 3     showView.layer.masksToBounds   = YES;
 4     showView.layer.cornerRadius    = 50.f;
 5     showView.layer.backgroundColor = [UIColor redColor].CGColor;
 6     
 7     [self.view addSubview:showView];
 8     
 9     //創建關鍵幀動畫
10     CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animation];
11     
12     //設置動畫屬性
13     keyFrameAnimation.keyPath              = @"position";
14     keyFrameAnimation.duration             = 4.0f;
15     
　　　　//關鍵處, 在這裡使用的緩動函數計算點路徑
16     keyFrameAnimation.values = [YXEasing calculateFrameFromPoint:showView.center
17                                                          toPoint:CGPointMake(50, 300)
18                                                             func:BounceEaseOut
19                                                       frameCount:4.0f * 30];
20     
21     //設置動畫結束位置
22     showView.center = CGPointMake(50, 300);
23     
24     //添加動畫到layer層
25     [showView.layer addAnimation:keyFrameAnimation forKey:nil];