版本記錄

前言

app中好的炫的動(dòng)畫可以讓用戶耳目一新，為產(chǎn)品增色不少，關(guān)于動(dòng)畫的實(shí)現(xiàn)我們可以用基本動(dòng)畫、關(guān)鍵幀動(dòng)畫、序列幀動(dòng)畫以及基于CoreGraphic的動(dòng)畫等等，接下來這幾篇我就介紹下我可以想到的幾種動(dòng)畫繪制方法。具體Demo示例已開源到Github —— 刀客傳奇，感興趣的可以看我寫的另外幾篇。
1. 實(shí)現(xiàn)動(dòng)畫方式深度解析（一） —— 播放GIF動(dòng)畫（一）
2. 實(shí)現(xiàn)動(dòng)畫方式深度解析（二） —— 播放GIF動(dòng)畫之框架FLAnimatedImage的使用（二）
3. 實(shí)現(xiàn)動(dòng)畫方式深度解析（三） —— 播放序列幀動(dòng)畫（一）
4. 實(shí)現(xiàn)動(dòng)畫方式深度解析（四） —— QuartzCore框架（一）
5. 實(shí)現(xiàn)動(dòng)畫方式深度解析（五） —— QuartzCore框架之CoreAnimation（二）
6. 實(shí)現(xiàn)動(dòng)畫方式深度解析（六） —— Core Animation Basics（三）
7. 實(shí)現(xiàn)動(dòng)畫方式深度解析（七） —— Core Animation之Setting Up Layer Objects（四）
8. 實(shí)現(xiàn)動(dòng)畫方式深度解析（八） —— Core Animation之動(dòng)畫層內(nèi)容 （五）
9. 實(shí)現(xiàn)動(dòng)畫方式深度解析（九） —— Core Animation之構(gòu)建圖層層級(jí) （六）
10. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十） —— Core Animation之高級(jí)動(dòng)畫技巧 （七）
11. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十一） —— Core Animation之更改圖層的默認(rèn)行為（八）
12. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十二） —— Core Animation之提高動(dòng)畫的性能（九）
13. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十三） —— Core Animation之圖層樣式屬性動(dòng)畫（十）
14. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十四） —— Core Animation之 KVC 擴(kuò)展（十一）
15. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十五） —— Core Animation之可動(dòng)畫屬性 （十二）
16. 實(shí)現(xiàn)動(dòng)畫方式深度解析（十六） —— Core Animation之CABasicAnimation動(dòng)畫示例 （十三）

CAKeyframeAnimation關(guān)鍵幀動(dòng)畫基本

下面我們就先看一下API文檔。

/** General keyframe animation class. **/

CA_CLASS_AVAILABLE (10.5, 2.0, 9.0, 2.0)
@interface CAKeyframeAnimation : CAPropertyAnimation

/* An array of objects providing the value of the animation function for
 * each keyframe. */

@property(nullable, copy) NSArray *values;

/* An optional path object defining the behavior of the animation
 * function. When non-nil overrides the `values' property. Each point
 * in the path except for `moveto' points defines a single keyframe for
 * the purpose of timing and interpolation. Defaults to nil. For
 * constant velocity animation along the path, `calculationMode' should
 * be set to `paced'. Upon assignment the path is copied. */

@property(nullable) CGPathRef path;

/* An optional array of `NSNumber' objects defining the pacing of the
 * animation. Each time corresponds to one value in the `values' array,
 * and defines when the value should be used in the animation function.
 * Each value in the array is a floating point number in the range
 * [0,1]. */

@property(nullable, copy) NSArray<NSNumber *> *keyTimes;

/* An optional array of CAMediaTimingFunction objects. If the `values' array
 * defines n keyframes, there should be n-1 objects in the
 * `timingFunctions' array. Each function describes the pacing of one
 * keyframe to keyframe segment. */

@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;

/* The "calculation mode". Possible values are `discrete', `linear',
 * `paced', `cubic' and `cubicPaced'. Defaults to `linear'. When set to
 * `paced' or `cubicPaced' the `keyTimes' and `timingFunctions'
 * properties of the animation are ignored and calculated implicitly. */

@property(copy) NSString *calculationMode;

/* For animations with the cubic calculation modes, these properties
 * provide control over the interpolation scheme. Each keyframe may
 * have a tension, continuity and bias value associated with it, each
 * in the range [-1, 1] (this defines a Kochanek-Bartels spline, see
 * http://en.wikipedia.org/wiki/Kochanek-Bartels_spline).
 *
 * The tension value controls the "tightness" of the curve (positive
 * values are tighter, negative values are rounder). The continuity
 * value controls how segments are joined (positive values give sharp
 * corners, negative values give inverted corners). The bias value
 * defines where the curve occurs (positive values move the curve before
 * the control point, negative values move it after the control point).
 *
 * The first value in each array defines the behavior of the tangent to
 * the first control point, the second value controls the second
 * point's tangents, and so on. Any unspecified values default to zero
 * (giving a Catmull-Rom spline if all are unspecified). */

@property(nullable, copy) NSArray<NSNumber *> *tensionValues;
@property(nullable, copy) NSArray<NSNumber *> *continuityValues;
@property(nullable, copy) NSArray<NSNumber *> *biasValues;

/* Defines whether or objects animating along paths rotate to match the
 * path tangent. Possible values are `auto' and `autoReverse'. Defaults
 * to nil. The effect of setting this property to a non-nil value when
 * no path object is supplied is undefined. `autoReverse' rotates to
 * match the tangent plus 180 degrees. */

@property(nullable, copy) NSString *rotationMode;

@end

/* `calculationMode' strings. */

CA_EXTERN NSString * const kCAAnimationLinear
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationDiscrete
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationPaced
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationCubic
    CA_AVAILABLE_STARTING (10.7, 4.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationCubicPaced
    CA_AVAILABLE_STARTING (10.7, 4.0, 9.0, 2.0);

/* `rotationMode' strings. */

CA_EXTERN NSString * const kCAAnimationRotateAuto
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAAnimationRotateAutoReverse
    CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);

CAKeyframeAnimation幾個(gè)重要屬性

關(guān)鍵幀動(dòng)畫有幾個(gè)重要的屬性，下面我們就看一下。

• values屬性
  values屬性指明整個(gè)動(dòng)畫過程中的關(guān)鍵幀點(diǎn)。

• path屬性
  作 用與values屬性一樣，同樣是用于指定整個(gè)動(dòng)畫所經(jīng)過的路徑的。需要注意的是，values與path是互斥的，當(dāng)values與path同時(shí)指定 時(shí)，path會(huì)覆蓋values，即values屬性將被忽略

• keyTimes屬性
  該 屬性是一個(gè)數(shù)組，用以指定每個(gè)子路徑(AB,BC,CD)的時(shí)間。如果你沒有顯式地對(duì)keyTimes進(jìn)行設(shè)置，則系統(tǒng)會(huì)默認(rèn)每條子路徑的時(shí)間是均分的。

• timeFunctions屬性
  用過UIKit層動(dòng)畫的同學(xué)應(yīng)該對(duì)這個(gè)屬性不陌生，這個(gè)屬性用以指定時(shí)間函數(shù)，類似于運(yùn)動(dòng)的加速度，有以下幾種類型

kCAMediaTimingFunctionLinear                  //線性
kCAMediaTimingFunctionEaseIn                 //淡入
kCAMediaTimingFunctionEaseOut              //淡出
kCAMediaTimingFunctionEaseInEaseOut  //淡入淡出 
kCAMediaTimingFunctionDefault                //默認(rèn)

• calculationMode屬性
  該屬性決定了物體在每個(gè)子路徑下是跳著走還是勻速走，跟timeFunctions屬性有點(diǎn)類似。

1 const kCAAnimationLinear//線性，默認(rèn)
2 const kCAAnimationDiscrete//離散，無中間過程，但keyTimes設(shè)置的時(shí)間依舊生效，物體跳躍地出現(xiàn)在各個(gè)關(guān)鍵幀上
3 const kCAAnimationPaced//平均，keyTimes跟timeFunctions失效
4 const kCAAnimationCubic//平均，同上
5 const kCAAnimationCubicPaced//平均，同上

CAKeyframeAnimation相關(guān)動(dòng)畫

CAKeyframeAnimation關(guān)鍵幀動(dòng)畫有兩種方式，分別是values數(shù)組樣式，還有就是路徑方式，下面我們就看一下。

@property(nullable, copy) NSArray *values;
@property(nullable) CGPathRef path;

1. values數(shù)組屬性方式

下面我們看一下代碼

#import "ViewController.h"

@interface ViewController ()

@property (nonatomic, strong) UIView *animateView;


@end

@implementation ViewController

#pragma mark - Override Base Function

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //UI
    [self setupUI];
    
    //值的方式關(guān)鍵幀動(dòng)畫
    [self demoValuesKeyFrameAnimation];
}

#pragma mark - Object Private Function

- (void)demoValuesKeyFrameAnimation
{
    //值的方式
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //設(shè)置值數(shù)組
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(50.0, 300.0)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(350.0, 300.0)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(350.0, 500.0)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(50.0, 500.0)];
    
    keyFrameAnimation.values = @[value1, value2, value3, value4];
    
    keyFrameAnimation.repeatCount = 10.0;
    keyFrameAnimation.autoreverses = YES;
    keyFrameAnimation.duration = 4.0;
    keyFrameAnimation.removedOnCompletion = NO;
    keyFrameAnimation.fillMode = kCAFillModeForwards;
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.animateView.layer addAnimation:keyFrameAnimation forKey:nil];
}

- (void)setupUI
{
    self.view.backgroundColor = [UIColor lightGrayColor];
    
    self.animateView = [[UIView alloc] initWithFrame:CGRectMake(50.0, 200.0, 150.0, 150.0)];
    self.animateView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.animateView];
}

@end

下面我們看一下效果驗(yàn)證

2. path路徑方式

下面我們就看一下設(shè)置路徑方式的關(guān)鍵幀動(dòng)畫。

還是直接看代碼

- (void)demoPathKeyFrameAnimation
{
    self.animateView.frame = CGRectMake(0.0, 0.0, 100.0, 100.0);
    
    //路徑的方式
    CAKeyframeAnimation *keyFrameAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    
    //設(shè)置路徑
    CGMutablePathRef pathRef = CGPathCreateMutable();
    
    //沿著弧線運(yùn)動(dòng)
    CGPathAddEllipseInRect(pathRef, NULL, CGRectMake(100.0, 100.0, 100.0, 100.0));
    
    //起始位置
    CGPathMoveToPoint(pathRef, NULL, 0.0, 400.0);
    
    //直線運(yùn)動(dòng)
    CGPathAddLineToPoint(pathRef, NULL, 200.0, 300.0);
    CGPathAddLineToPoint(pathRef, NULL, 400.0, 300.0);
    CGPathAddLineToPoint(pathRef, NULL, 400.0, 500.0);
    CGPathAddLineToPoint(pathRef, NULL, 0.0, 500.0);
 
    //曲線運(yùn)動(dòng)
    CGPathAddCurveToPoint(pathRef, NULL, 50.0, 50.0, 50.0, 50.0, 50.0, 50.0);
    
    //其他配置
    keyFrameAnimation.path = pathRef;
    CGPathRelease(pathRef);
    keyFrameAnimation.autoreverses = YES;
    keyFrameAnimation.repeatCount = 10;
    keyFrameAnimation.removedOnCompletion = NO;
    keyFrameAnimation.fillMode = kCAFillModeForwards;
    keyFrameAnimation.duration = 5.0;
    keyFrameAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    
    [self.animateView.layer addAnimation:keyFrameAnimation forKey:nil];
    
}

下面看一下效果圖

后記

未完，待續(xù)~~~