當(dāng)你的才華撐不起你的野心時(shí)荸百,你就應(yīng)該靜下來(lái)學(xué)習(xí)。 —— CJJ
- 這一篇講解的是CoreAnimation這個(gè)類中的屬性和方法桥帆,了解了每一個(gè)屬性和方法之后,使用起來(lái)就很輕松了慎皱。
- 文尾有demo鏈接老虫,想要學(xué)習(xí)一下的小伙伴可以下載看看,幫到你的話點(diǎn)個(gè)star吧??
- 話不多說(shuō)茫多,直接上圖上代碼
我們用下圖來(lái)表達(dá)CoreAnimation的完整結(jié)構(gòu)
-
此外還有CASpringAnimation 彈性動(dòng)畫 (iOS9.0之后祈匙,它實(shí)現(xiàn)彈簧效果的動(dòng)畫,是CABasicAnimation的子類。)
在Core Animation中可以使用創(chuàng)建實(shí)例對(duì)象的動(dòng)畫類:
1.基礎(chǔ)動(dòng)畫: CABasicAnimation
2.關(guān)鍵幀動(dòng)畫: CAKeyframeAnimation
3.轉(zhuǎn)場(chǎng)動(dòng)畫: CATransition
4.彈性動(dòng)畫: CASpringAnimation
5.動(dòng)畫組合: CAAnimationGroup
-
Core Animation是在后臺(tái)執(zhí)行的夺欲,不會(huì)阻塞主線程跪帝。
-
Core Animation直接作用于CALayer,而不是UIView
總體來(lái)說(shuō)核心動(dòng)畫的優(yōu)點(diǎn)有:
1些阅、性能強(qiáng)大伞剑,使用硬件加速,可以同時(shí)向多個(gè)圖層添加不同的動(dòng)畫效果
2市埋、接口易用黎泣,只需要少量的代碼就可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。
3缤谎、運(yùn)行在后臺(tái)線程中抒倚,在動(dòng)畫過(guò)程中可以響應(yīng)交互事件(UIView動(dòng)畫默認(rèn)動(dòng)畫過(guò)程中不響應(yīng)交互事件)
4、只有在發(fā)生改變的時(shí)候才重繪內(nèi)容坷澡,消除了動(dòng)畫的幀速率上的運(yùn)行代碼托呕,提高應(yīng)用性能
動(dòng)畫操作過(guò)程:
1、創(chuàng)建一個(gè)CAAnimation對(duì)象
2频敛、設(shè)置一些動(dòng)畫的相關(guān)屬性
3项郊、給CALayer添加動(dòng)畫(addAnimation:forKey: 方法)
4、移除CALayer中的動(dòng)畫(removeAnimationForKey: 方法)
各項(xiàng)類的用法與相關(guān)屬性
-
CAAnimation(動(dòng)畫基類)
@interface CAAnimation : NSObject
<NSSecureCoding, NSCopying, CAMediaTiming, CAAction>
{
@private
void *_attr;
uint32_t _flags;
}
/* 初始化類方法,創(chuàng)建實(shí)例對(duì)象 */
+ (instancetype)animation;
/* 動(dòng)畫實(shí)現(xiàn)與CALayer定義的相同的屬性模型.有關(guān)更多詳細(xì)信息斟赚,請(qǐng)參見(jiàn)CALayer.h */
/* 設(shè)置動(dòng)畫key值(在CALayer添加動(dòng)畫時(shí)呆抑,添加動(dòng)畫并設(shè)置key:CALayer方法中設(shè)置- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key */
+ (nullable id)defaultValueForKey:(NSString *)key;
- (BOOL)shouldArchiveValueForKey:(NSString *)key;
(
屬性類別:
設(shè)置 動(dòng)畫一段時(shí)的快慢
設(shè)置了其動(dòng)畫的時(shí)間函數(shù)為CAMediaTimingFunction(name:kCAMediaTimingFunctionLinear)。時(shí)間函數(shù)通過(guò)修改持續(xù)時(shí)間的分?jǐn)?shù)來(lái)控制動(dòng)畫的速度汁展。(猜想:通過(guò)這個(gè)方法設(shè)置CAMediaTiming協(xié)議下的speed)
kCAMediaTimingFunctionLinear //線型移動(dòng)
kCAMediaTimingFunctionEaseIn //淡入
kCAMediaTimingFunctionEaseOut //淡出
kCAMediaTimingFunctionEaseInEaseOut //淡入淡出
kCAMediaTimingFunctionDefault // 默認(rèn)
同時(shí)可以通過(guò)自定義CAMediaTimingFunction時(shí)間功能定義動(dòng)畫的時(shí)間
)
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
/* 動(dòng)畫的執(zhí)行的兩個(gè)階段的代理 */
@property(nullable, strong) id <CAAnimationDelegate> delegate;
/* 默認(rèn)為YES,代表動(dòng)畫執(zhí)行完畢后就從圖層上移除厌殉,圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)食绿。如果想讓圖層保持顯示動(dòng)畫執(zhí)行后的狀態(tài),那就設(shè)置為NO公罕,不過(guò)還要設(shè)置fillMode屬性為kCAFillModeForwards器紧。比如進(jìn)入后臺(tái)回來(lái)動(dòng)畫依然執(zhí)行,可以使用這個(gè)屬性楼眷。*/
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
@end
/* 以下屬性繼承CAMediaTiming協(xié)議 */
@protocol CAMediaTiming
/* 設(shè)置當(dāng)前動(dòng)畫開(kāi)始的時(shí)間铲汪,如果沒(méi)有設(shè)置默認(rèn)為0,動(dòng)畫當(dāng)前生成的時(shí)間 */
@property CFTimeInterval beginTime;
/* 設(shè)置 動(dòng)畫執(zhí)行的時(shí)長(zhǎng) 默認(rèn):0 */
@property CFTimeInterval duration;
/*
可以通過(guò)speed和timeOffset這兩個(gè)參數(shù)設(shè)置更復(fù)雜的動(dòng)畫效果罐柳,可以實(shí)現(xiàn)動(dòng)畫的暫停掌腰、快進(jìn)等效果
動(dòng)畫執(zhí)行時(shí)間: t = (tp - begin) * speed + offset
動(dòng)畫執(zhí)行時(shí)間為:t 系統(tǒng)時(shí)間:tp 動(dòng)畫開(kāi)始時(shí)間:begin
默認(rèn)情況下,speed:1 offset:0
speed:?jiǎn)挝粫r(shí)間執(zhí)行的rate 例子:如果rate是2 本地時(shí)間是當(dāng)前時(shí)間快兩倍
*/
@property float speed;
@property CFTimeInterval timeOffset;
/* 動(dòng)畫執(zhí)行的重復(fù)次數(shù) */
@property float repeatCount;
/* 動(dòng)畫每次執(zhí)行的時(shí)長(zhǎng) 默認(rèn)時(shí)間為0 */
@property CFTimeInterval repeatDuration;
/* 是否 動(dòng)畫反方向執(zhí)行)张吉;自定義為NO */
@property BOOL autoreverses;
(
//默認(rèn)是kCAFillModeRemoved齿梁,當(dāng)動(dòng)畫不再播放的時(shí)候就顯示圖層模型指定的值剩下的三種類型向前,向后或者即向前又向后去填充動(dòng)畫狀態(tài),使得動(dòng)畫在開(kāi)始前或者結(jié)束后仍然保持開(kāi)始和結(jié)束那一刻的值
kCAFillModeForwards//對(duì)應(yīng)toValue:動(dòng)畫結(jié)束后勺择,圖層保持toValue狀態(tài)
kCAFillModeBackwards//對(duì)應(yīng)fromValue:動(dòng)畫前创南,圖層一直保持fromValue狀態(tài)
kCAFillModeBoth//對(duì)應(yīng)fromValue和toValue:以上兩者的結(jié)合
kCAFillModeRemoved//對(duì)圖層沒(méi)有什么影響,動(dòng)畫結(jié)束后圖層恢復(fù)原來(lái)的狀態(tài)
)
@property(copy) CAMediaTimingFillMode fillMode;
@end
/* 動(dòng)畫的執(zhí)行的兩個(gè)階段的協(xié)議 */
@protocol CAAnimationDelegate <NSObject>
@optional
/* 核心動(dòng)畫開(kāi)始時(shí)執(zhí)行 */
- (void)animationDidStart:(CAAnimation *)anim;
/* 核心動(dòng)畫執(zhí)行結(jié)束后調(diào)用 */
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end
-
CAPropertyAnimation(屬性動(dòng)畫省核,繼承CAAnimation)
CAPropertyAnimation基于property,他的keyPath就是描述需要?jiǎng)赢嫷膶傩?br> keyPath:通過(guò)指定CALayer的一個(gè)屬性名做為keyPath里的參數(shù)(NSString類型)稿辙,并且對(duì)CALayer的這個(gè)屬性的值進(jìn)行修改,達(dá)到相應(yīng)的動(dòng)畫效果气忠。比如邻储,指定@”position”為keyPath,就修改CALayer的position屬性的值笔刹,以達(dá)到平移的動(dòng)畫效果芥备。
CAPropertyAnimation *animation = [CAPropertyAnimation animationWithKeyPath:@"position.y"];
[self.view.layer addAnimation:animation forKey:@"position_y"];
一些常用的animationWithKeyPath值的總結(jié)
@interface CAPropertyAnimation : CAAnimation
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
/* 要改變的屬性名稱(傳字符串)*/
@property(nullable, copy) NSString *keyPath;
/*
這個(gè)屬性確定動(dòng)畫執(zhí)行的狀態(tài)是否疊加在控件的原狀態(tài)上
默認(rèn)設(shè)置為NO,如果我們執(zhí)行兩次位置移動(dòng)的動(dòng)畫舌菜,會(huì)從同一位置執(zhí)行兩次
如果設(shè)置為YES萌壳,則會(huì)在第一次執(zhí)行的基礎(chǔ)上執(zhí)行第二次動(dòng)畫
*/
@property(getter=isAdditive) BOOL additive;
/*
cumulative這個(gè)屬性,有重復(fù)次數(shù)時(shí)才有用日月,
當(dāng)設(shè)為true時(shí)這個(gè)動(dòng)畫的當(dāng)前value就是上次動(dòng)畫的結(jié)尾的value加上當(dāng)前重復(fù)中的value袱瓮,
當(dāng)設(shè)為false,value就一直是這個(gè)值
*/
@property(getter=isCumulative) BOOL cumulative;
/*
valueFunction這個(gè)是用來(lái)轉(zhuǎn)化你設(shè)置的動(dòng)畫值為動(dòng)畫需要的矩陣值爱咬,
不賦值他就有默認(rèn)的轉(zhuǎn)化方式
*/
@property(nullable, strong) CAValueFunction *valueFunction;
@end
-
CABasicAnimation(基本動(dòng)畫尺借,繼承CAPropertyAnimation)
@interface CABasicAnimation : CAPropertyAnimation
/* keyPath相應(yīng)屬性的初始值 */
@property(nullable, strong) id fromValue;
/* keyPath相應(yīng)屬性的結(jié)束值 */
@property(nullable, strong) id toValue;
/* byValue和toValue的區(qū)別,前者是在當(dāng)前的位置上增加多少精拟,后者是到指定的位置 */
@property(nullable, strong) id byValue;
@end
-
CAKeyframeAnimation(關(guān)鍵幀動(dòng)畫燎斩,繼承CAPropertyAnimation)
類似畫圖,畫多個(gè)點(diǎn)蜂绎,各個(gè)點(diǎn)連起來(lái)的線就是動(dòng)畫軌跡栅表,每個(gè)點(diǎn)有對(duì)應(yīng)的位置,對(duì)應(yīng)的時(shí)間點(diǎn)
@interface CAKeyframeAnimation : CAPropertyAnimation
/*
NSArray對(duì)象师枣,里面的元素稱為”關(guān)鍵幀”(NSValue類型)怪瓶,
動(dòng)畫對(duì)象會(huì)在指定的時(shí)間(duration)內(nèi),
依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀( NSValue)
*/
@property(nullable, copy) NSArray *values;
/*
可以設(shè)置一個(gè)CGPathRef践美、CGMutablePathRef洗贰,
讓層跟著路徑移動(dòng),path只對(duì)CALayer的anchorPoint和position起作用陨倡,
如果設(shè)置了path敛滋,那么values、keyTimes將被忽略兴革。
*/
@property(nullable) CGPathRef path;
/*
keyTimes的值與values中的值一一對(duì)應(yīng)指定關(guān)鍵幀在動(dòng)畫中的時(shí)間點(diǎn)矛缨,取值范圍為[0,1]。當(dāng)keyTimes沒(méi)有設(shè)置的時(shí)候,
各個(gè)關(guān)鍵幀的時(shí)間是平分的
*/
@property(nullable, copy) NSArray<NSNumber *> *keyTimes;
/* 指定每個(gè)關(guān)鍵幀之間的動(dòng)畫緩沖效果,timingFunctions.count = keyTimes.count-1 */
@property(nullable, copy) NSArray<CAMediaTimingFunction *> *timingFunctions;
/* 關(guān)鍵幀間插值計(jì)算模式 */
@property(copy) CAAnimationCalculationMode calculationMode;
/*針對(duì)cubic 計(jì)算模式的動(dòng)畫箕昭,這些屬性提供對(duì)插值方案的控制灵妨。每個(gè)*關(guān)鍵幀都可以具有與之相關(guān)的
張力、連續(xù)性和偏差值落竹,這些值的范圍在[-1,1]內(nèi)(這定義了Kochanek-*Bartels樣條泌霍,見(jiàn)http://en.wikipedia.org/wiki/Kochanek-Bartels_spline)。
*tensionValues控制曲線的“緊密度”(正值更緊述召,負(fù)值更圓)朱转。
*continuityValues控制段的連接方式(正值表示銳角,負(fù)值表示倒角)积暖。
*biasValues定義曲線發(fā)生的位置(正值在控制點(diǎn)之前移動(dòng)曲線藤为,負(fù)值在控制點(diǎn)之后移動(dòng)它)。
*每個(gè)數(shù)組中的第一個(gè)值定義第一個(gè)控制點(diǎn)的切線的行為夺刑,第二個(gè)值控*制第二個(gè)點(diǎn)的切線缅疟,依此類推。任何未指定的值都默認(rèn)為零
*(如果未指定遍愿,則給出Catmull-Rom樣條曲線)存淫。
*/
@property(nullable, copy) NSArray<NSNumber *> *tensionValues;
@property(nullable, copy) NSArray<NSNumber *> *continuityValues;
@property(nullable, copy) NSArray<NSNumber *> *biasValues;
/*
定義沿路徑動(dòng)畫的對(duì)象是否旋轉(zhuǎn)以匹配路徑切線
kCAAnimationRotateAuto //根據(jù)路徑自動(dòng)旋轉(zhuǎn)
kCAAnimationRotateAutoReverse //根據(jù)路徑自動(dòng)翻轉(zhuǎn)
*/
@property(nullable, copy) CAAnimationRotationMode rotationMode;
@end
-
CASpringAnimation(彈簧動(dòng)畫,繼承CAAnimation)
@interface CASpringAnimation : CABasicAnimation
/* 質(zhì)量沼填,影響圖層運(yùn)動(dòng)時(shí)的彈簧慣性桅咆,質(zhì)量越大,彈簧拉伸和壓縮的幅度越大 */
@property CGFloat mass;
/* 剛度系數(shù)(勁度系數(shù)/彈性系數(shù))坞笙,剛度系數(shù)越大岩饼,形變產(chǎn)生的力就越大,運(yùn)動(dòng)越快 */
@property CGFloat stiffness;
/* 阻尼系數(shù)薛夜,阻止彈簧伸縮的系數(shù)忌愚,阻尼系數(shù)越大,停止越快 */
@property CGFloat damping;
/*
初始速率却邓,動(dòng)畫視圖的初始速度大小 Defaults to zero
速率為正數(shù)時(shí),速度方向與運(yùn)動(dòng)方向一致院水,速率為負(fù)數(shù)時(shí)腊徙,速度方向與運(yùn)動(dòng)方向相反
*/
@property CGFloat initialVelocity;
/* 估算時(shí)間 返回彈簧動(dòng)畫到停止時(shí)的估算時(shí)間,根據(jù)當(dāng)前的動(dòng)畫參數(shù)估算 */
@property(readonly) CFTimeInterval settlingDuration;
@end
-
CATransition(轉(zhuǎn)場(chǎng)動(dòng)畫檬某,繼承CAAnimation)
CATransitionType
以下是基本的四種效果
kCATransitionPush 推入效果
kCATransitionMoveIn 移入效果
kCATransitionReveal 截開(kāi)效果
kCATransitionFade 漸入漸出效果
以下API效果可以安全使用
cube 方塊
suckEffect 三角
rippleEffect 水波抖動(dòng)
pageCurl 上翻頁(yè)
pageUnCurl 下翻頁(yè)
oglFlip 上下翻轉(zhuǎn)
cameraIrisHollowOpen 鏡頭快門開(kāi)
cameraIrisHollowClose 鏡頭快門開(kāi)
以下API效果請(qǐng)慎用
spewEffect 新版面在屏幕下方中間位置被釋放出來(lái)覆蓋舊版面.
genieEffect 舊版面在屏幕左下方或右下方被吸走, 顯示出下面的新版面
unGenieEffect 新版面在屏幕左下方或右下方被釋放出來(lái)覆蓋舊版面.
twist 版面以水平方向像龍卷風(fēng)式轉(zhuǎn)出來(lái).
tubey 版面垂直附有彈性的轉(zhuǎn)出來(lái).
swirl 舊版面360度旋轉(zhuǎn)并淡出, 顯示出新版面.
charminUltra 舊版面淡出并顯示新版面.
zoomyIn 新版面由小放大走到前面, 舊版面放大由前面消失.
zoomyOut 新版面屏幕外面縮放出現(xiàn), 舊版面縮小消失.
oglApplicationSuspend 像按”home” 按鈕的效果
CATransitionSubtype
kCATransitionFromRight 從右邊開(kāi)始
kCATransitionFromLeft 從左邊開(kāi)始
kCATransitionFromTop 從上面開(kāi)始
kCATransitionFromBottom 從下面開(kāi)始
@interface CATransition : CAAnimation
/* 可選效果如上撬腾,動(dòng)畫的效果,傳字符串 */
@property(copy) CATransitionType type;
/* 可選效果如上 動(dòng)畫開(kāi)始的方向*/
@property(nullable, copy) CATransitionSubtype subtype;
/* 開(kāi)始和結(jié)束的位置進(jìn)度恢恼,數(shù)值介于[0,1]之間民傻,結(jié)束值一定是大于開(kāi)始值的 */
@property float startProgress;
@property float endProgress;
@end
-
CAAnimationGroup(動(dòng)畫組,繼承CAAnimation)
@interface CAAnimationGroup : CAAnimation
/* 組動(dòng)畫中的動(dòng)畫數(shù)組 */
@property(nullable, copy) NSArray<CAAnimation *> *animations;
@end
文尾獻(xiàn)上Demo CJJCoreAnimationDemo