快捷導(dǎo)航

iOS的CoreAnimation開發(fā)框架中的Layer層動畫制作解析

更新時間：2016年07月06日 09:38:16 作者：琿少

在iOS中UIView層的屬性會映射到CoreAnimation框架的CALayer，這里我們來看一下iOS的CoreAnimation開發(fā)框架中的Layer層動畫制作解析,需要的朋友可以參考下

CAAnimation動畫體系的介紹
CAAnimation是CoreAnimation框架中執(zhí)行動畫對象的基類，下面有一張圖，是我手畫的，不太美觀，但是可以將與CAAnimation相關(guān)的幾個動畫類的關(guān)系表達清楚：

20167693334528.png (719×475)

從上圖中可以看到，從CAAnimation中繼承出三個子類，分別是用于創(chuàng)建屬性動畫的CAPropertyAnimation，創(chuàng)建轉(zhuǎn)場動畫的CATransition和創(chuàng)建組合動畫的CAAnimationGroup。

我們就先從根類開始探討。

1.CAAnimation屬性和方法

CAAnimation作為動畫對象的基類，其中封裝了動畫的基礎(chǔ)屬性，如下：

//通過類方法創(chuàng)建一個CAAnimation對象 + (instancetype)animation; //動畫執(zhí)行的時序模式 @property(nullable, strong) CAMediaTimingFunction *timingFunction; //代理 @property(nullable, strong) id delegate; //是否動畫完成時將動畫對象移除掉 @property(getter=isRemovedOnCompletion) BOOL removedOnCompletion; timingFunction定義了動畫執(zhí)行的時序效果，CAMediaTimingFunction的創(chuàng)建方式如下：

/* name參數(shù)決定的執(zhí)行的效果，可選參數(shù)如下 //線性執(zhí)行 NSString * const kCAMediaTimingFunctionLinear; //淡入在動畫開始時淡入效果 NSString * const kCAMediaTimingFunctionEaseIn; //淡出在動畫結(jié)束時淡出效果 NSString * const kCAMediaTimingFunctionEaseOut; //淡入淡出 NSString * const kCAMediaTimingFunctionEaseInEaseOut; //默認效果 NSString * const kCAMediaTimingFunctionDefault; */ + (instancetype)functionWithName:(NSString *)name;CAAnimation的代理方法入如下幾個：

//動畫開始時執(zhí)行的回調(diào) - (void)animationDidStart:(CAAnimation *)anim; //動畫結(jié)束后執(zhí)行的回調(diào) - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;2.CAPropertyAnimation屬性與方法

CAPropertyAnimation是繼承于CAAnimation專門用來創(chuàng)建與屬性相關(guān)的動畫的類：

//創(chuàng)建對象參數(shù)中的path就是我們要執(zhí)行動畫的屬性 //例如，如果傳入@"backgroundColor" 當layer的背景顏色改變時，就會執(zhí)行我們設(shè)置的動畫 + (instancetype)animationWithKeyPath:(nullable NSString *)path; //這個屬性確定動畫執(zhí)行的狀態(tài)是否疊加在控件的原狀態(tài)上 //默認設(shè)置為NO，如果我們執(zhí)行兩次位置移動的動畫，會從同一位置執(zhí)行兩次 //如果設(shè)置為YES，則會在第一次執(zhí)行的基礎(chǔ)上執(zhí)行第二次動畫 @property(getter=isAdditive) BOOL additive; //這個屬性對重復(fù)執(zhí)行的動畫有效果 //默認為NO，重復(fù)執(zhí)行的動畫每次都是從起始狀態(tài)開始 //如果設(shè)置為yes，則為此執(zhí)行都會在上一次執(zhí)行的基礎(chǔ)上執(zhí)行 @property(getter=isCumulative) BOOL cumulative; //這個屬性和transfron屬性的動畫執(zhí)行相關(guān) @property(nullable, strong) CAValueFunction *valueFunction;上面這些屬性中，只有一個需要我們注意，valueFunction是專門為了transform動畫而設(shè)置的，因為我們沒有辦法直接改變transform3D中的屬性，通過這個參數(shù)，可以幫助我們直接操作transfrom3D屬性變化產(chǎn)生動畫效果，舉例如下，一個繞Z軸旋轉(zhuǎn)的動畫：

//繞z軸旋轉(zhuǎn)的動畫 CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"transform"]; //從0度開始 ani.fromValue = @0; //旋轉(zhuǎn)到180度 ani.toValue = [NSNumber numberWithFloat:M_PI]; //時間2S ani.duration = 2; //設(shè)置為z軸旋轉(zhuǎn) ani.valueFunction = [CAValueFunction functionWithName:kCAValueFunctionRotateZ]; //執(zhí)行動畫 [layer addAnimation:ani forKey:@""];實際上，使用點的方式也是可以訪問到相應(yīng)屬性的，如果不設(shè)置valueFunction，使用如下方法也是可以進行繞Z軸旋轉(zhuǎn)的：

//繞z軸旋轉(zhuǎn)的動畫 CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"]; //從0度開始 ani.fromValue = @0; //旋轉(zhuǎn)到180度 ani.toValue = [NSNumber numberWithFloat:M_PI]; //時間2S ani.duration = 2; //執(zhí)行動畫 [layer addAnimation:ani forKey:@""];

3.CABasicAnimation屬性

CABasicAnimaton是CAPropertyAnimation分出來的一個子類，創(chuàng)建基礎(chǔ)的屬性變化動畫，例如我們上面的示例代碼，其中屬性如下：

@property(nullable, strong) id fromValue; @property(nullable, strong) id toValue; @property(nullable, strong) id byValue;上面三個屬性都是來確定動畫的起始與結(jié)束位置，有如下的含義：

（1）fromValue和toValue不為空：動畫的值由fromValue變化到toValue

（2）fromValue和byValue不為空：動畫的值由fromValue變化到fromValue+byValue

（3）byValue和toValue不為空：動畫的值由toValue-byValue變化到toValue

（4）只有fromValue不為空：動畫的值由fromValue變化到layer的當前狀態(tài)值

（5）只有toValue不為空：動畫的值由layer當前的值變化到toValue

（6）只有byValue不為空：動畫的值由layer當前的值變化到layer當前的值+byValue

4.CAKeyframeAnimation關(guān)鍵幀動畫

CAKeyframeAnimation也是繼承與CAPropertyAnimation的一個子類，其與CABasicAnimation的不同之處在于雖然其都是改變layer層屬性的動畫，但是CABasicAnimation只能設(shè)置初始與結(jié)束狀態(tài)，這之間我們沒辦法控制，而CAKeyframeAnimation可以讓我們設(shè)置一些關(guān)鍵幀再整個動畫的過程中。屬性方法如下：

//關(guān)鍵幀的值數(shù)組例如我們想讓控件沿某個路徑移動，這里面存放每個移動的點 @property(nullable, copy) NSArray *values; //直接設(shè)置路徑，作用域values類似 @property(nullable) CGPathRef path; //設(shè)置每一幀執(zhí)行的時間長短這個的取值為0-1，代表占用時間的比例 @property(nullable, copy) NSArray<NSNumber *> *keyTimes; //每一幀執(zhí)行過程中的時序效果上面有提過 @property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions; /* 設(shè)置幀的中間值如何計算 NSString * const kCAAnimationLinear; NSString * const kCAAnimationDiscrete; NSString * const kCAAnimationPaced; NSString * const kCAAnimationCubic; NSString * const kCAAnimationCubicPaced; */ @property(copy) NSString *calculationMode;示例如下：

CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"]; ani.values = @[[NSValue valueWithCGPoint:CGPointMake(100, 100)],[NSValue valueWithCGPoint:CGPointMake(120, 100)],[NSValue valueWithCGPoint:CGPointMake(120, 200)],[NSValue valueWithCGPoint:CGPointMake(200, 200)]]; ani.duration = 3; [layer addAnimation:ani forKey:@""];5.CASpringAnimation阻尼動畫

通過CASpringAnimation，可以幫助開發(fā)者很輕松的創(chuàng)建出有彈簧效果的動畫，主要屬性如下：

//這個屬性設(shè)置彈簧重物的質(zhì)量會影響慣性必須大于0 默認為1 @property CGFloat mass; //設(shè)置彈簧的剛度系數(shù)，必須大于0 默認為100 這個越大則回彈越快 @property CGFloat stiffness; //阻尼系數(shù) 默認為10 必須大于0 這個值越大回彈的幅度越小 @property CGFloat damping; //初始速度 @property CGFloat initialVelocity; //獲取動畫停下來需要的時間 @property(readonly) CFTimeInterval settlingDuration;6.CATransition轉(zhuǎn)場動畫

CATransition和CAPropertyAnimation的不同之處在于當layer層出現(xiàn)時，會產(chǎn)生動畫效果，而并不是屬性改變時，屬性如下：

/* 設(shè)置動畫類型 //淡入 NSString * const kCATransitionFade; //移入 NSString * const kCATransitionMoveIn; //壓入 NSString * const kCATransitionPush; //溶解 NSString * const kCATransitionReveal; */ @property(copy) NSString *type; /* 設(shè)置動畫的方向 //從右側(cè)進 NSString * const kCATransitionFromRight; //從左側(cè)進 NSString * const kCATransitionFromLeft; //從上側(cè)進 NSString * const kCATransitionFromTop; //從下側(cè)進 NSString * const kCATransitionFromBottom; */ @property(nullable, copy) NSString *subtype;其實，關(guān)于type定義的動畫效果，出來官方定義的，我們還可以使用一些私有的參數(shù)，如下：

（1）pageCurl 翻頁
（2）rippleEffect 滴水效果
（3）suckEffect 收縮效果，如一塊布被抽走
（4）cube 立方體效果
（5）oglFlip 上下翻轉(zhuǎn)效果
例如：

CATransition * ani = [CATransition animation]; ani.type = @"pageCurl"; ani.subtype = kCATransitionFromRight; [layer addAnimation:ani forKey:@""];7.CAAnimationGroup動畫組

CAAnimationGroup本身并沒有定義動畫，他可以將我們上面提到的相關(guān)動畫進行組合：

@property(nullable, copy) NSArray<CAAnimation *> *animations;

高級動畫技巧
1.事務(wù)類

CoreAnimation中還有一個非常重要的類：CATransaction事物類，這個可以同時設(shè)置多個layer層的動畫效果?？梢酝ㄟ^隱式和顯式兩種方式來進行動畫操作。

2.CATransaction屬性

對layer層的屬性操作，都會形成隱式動畫，要使用隱式動畫，需要關(guān)閉layer層的animation動畫屬性，使用下面的方法：

//關(guān)閉animation動畫效果，開啟隱式動畫 + (BOOL)disableActions; + (void)setDisableActions:(BOOL)flag; CATransaction用類方式通過設(shè)置key-value來進行動畫的屬性設(shè)置：

+ (nullable id)valueForKey:(NSString *)key; + (void)setValue:(nullable id)anObject forKey:(NSString *)key;支持的key值如下：

//設(shè)置動畫持續(xù)時間 NSString * const kCATransactionAnimationDuration; //設(shè)置停用animation類動畫 NSString * const kCATransactionDisableActions; //設(shè)置動畫時序效果 NSString * const kCATransactionAnimationTimingFunction; //設(shè)置動畫完成后的回調(diào) NSString * const kCATransactionCompletionBlock;除了隱式的展示動畫外，也可以顯式的通過調(diào)用CATransaction的相關(guān)方法進行顯示的提交動畫：

//動畫開始 + (void)begin; //提交動畫 + (void)commit; //立即進行動畫渲染一般不需調(diào)用 + (void)flush; //下面這兩個方法用于動畫事物的加鎖與解鎖在多線程動畫中，保證修改屬性的安全 + (void)lock; + (void)unlock;示例如下：

[CATransaction begin]; [CATransaction setValue:@1 forKey:kCATransactionAnimationDuration]; layer.backgroundColor = [UIColor blueColor].CGColor; [CATransaction commit];

您可能感興趣的文章: