??? 原先也沒寫過這種文章的,也算是處女作了吧,估計(jì)寫的也不怎么樣,就當(dāng)做筆記吧,慢慢就好了(要是有什么錯的希望可以指出,共同進(jìn)步)
? ? 一.動畫的分類(這篇文章只討論基于核心動畫,其他的動畫暫不討論)
? ? 1.CAAnimation ,核心類的動畫,他是一個抽象類,不能直接拿來使用,遵循CAMediaTiming協(xié)議和CAAction協(xié)議,先看看他都有那些property(CAMediaTiming,CAAction)吧.
? ? @property CFTimeInterval beginTime:開始時間
? ? @property CFTimeInterval duration:動畫執(zhí)行的時間
? ? @property float speed:默認(rèn)的值為1.0,代表著動畫會按照默認(rèn)的速度播放(給定的時間),假如設(shè)置為2.0,則設(shè)定的時間會減半(假如Duration:6,Speed:2,則動畫就會播放6/2的時間)
? ? @property CFTimeInterval timeOffset:對時間進(jìn)行偏移,從而計(jì)算出動畫的狀態(tài),動畫在執(zhí)行的時候(timeOffset = Duration > timeOffset?timeOffset:(Duration % timeOffset)),會先跳過timeOffset這個時間段,先執(zhí)行后面的部分,然后在執(zhí)行
???? timeOffset.例如:Duration = 3,timeOffset = 2,則先執(zhí)行后兩秒的動畫,然后才執(zhí)行timeOffset的動畫,如圖1.1:
? ? timeOffset使用的不多,他可以和speed共同使用來控制當(dāng)前動畫的時間.當(dāng)speed == 0時,這動畫會在這個時間點(diǎn)(timeOffset)停止(通常用于動畫的暫停),如圖1.2:
??? ,代碼如圖1.3:
?? ? speed == 0,則意味著會在timeOffset這個時間點(diǎn)停止.
? ? @property float repeatCount:動畫重復(fù)多少次,不應(yīng)該和repeatDuration一起使用,可以設(shè)置為無限執(zhí)行:MAXFLOAT.
? ? @property BOOL repeatDuration:動畫重復(fù)多久,不應(yīng)該和RepeatCount一起使用.
??? @property BOOL autoreverses:是否逆行動畫
? ? @property(copy) NSString *fillMode:決定著當(dāng)前對象過了非active時間段的行為.比如:動畫執(zhí)行完畢或者動畫開始之前.(removedOnCompletion設(shè)置為fause,否則不會生效),fillModel有四個值:
*? ? kCAFillModeRemoved:默認(rèn)值,就是說動畫開始前和結(jié)束后對當(dāng)前l(fā)ayer都沒有影響,layer會恢復(fù)到原始狀態(tài).
*? ? kCAFillModeForwards:動畫結(jié)束后會一直保持結(jié)束后的狀態(tài).
*? ? kCAFillModeBackwards:和kCAFillModeForwards相對,也就是說當(dāng)你將動畫加入layer的時候,layer便會處于動畫初始的狀態(tài)(及時延遲執(zhí)行也一樣會處于初始的狀態(tài))
*? ? kCAFillModeBoth:動畫開始前l(fā)ayer處于動畫開始狀態(tài),結(jié)束后layer處于動畫結(jié)束狀態(tài)
???? RemovedOnCompletion:這個值為true時,動畫會在執(zhí)行完畢后自動的從層上面移除,一般設(shè)置為NO(再次使用)
???? @property(nullable, strong) CAMediaTimingFunction *timingFunction:設(shè)置動畫的節(jié)奏,比如:先快后慢,先慢后快等.
? ? @property(retain) id delegate:為CAAnimation設(shè)置代理。默認(rèn)為nil。注意：一個CAAnimation實(shí)例，不能設(shè)置delegate為self。會引起循環(huán)引用。
??? 另外:她還有一些自身的方法:
? ? + (instancetype)animation;
? ? + (nullable id)defaultValueForKey:(NSString *)key;根據(jù)屬性key，返回相應(yīng)的屬性值
??? - (BOOL)shouldArchiveValueForKey:(NSString *)key;返回指定的屬性是否可以歸檔
? ? - (void)animationDidStart:(CAAnimation *)anim;動畫開始時,執(zhí)行的方法
??? - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;動畫執(zhí)行完成執(zhí)行的方法
? ? 我們一般都使用CAAnimation的派生類:如圖2.1所示:
? ? 2.1 CATransition 提供漸變效果,(例如:推,拉,翻頁,等等)
? ? 2.2 CABasicAnimation? 提供了對單一動畫的實(shí)現(xiàn)
? ? 2.3 CAKeyframeAnimation 關(guān)鍵幀動畫
? ? 2.4 CAAnimationGroup 允許多個動畫同時播放
??? 然后一一來介紹他們:
? ? 2.1.1 CATransition:首先還是屬性介紹:
? ? @property float startProgress;設(shè)置過渡開始點(diǎn),必須<=endProgress,
? ? @property float endProgress;設(shè)置過度的結(jié)束點(diǎn),必須>=startProgress;
? ? @property(nullable, strong) id filter; (還沒有搞懂他的用法);
? ? @property(nullable, copy) NSString *subtype;設(shè)置預(yù)定義的過度方向如果設(shè)置了filter,則該屬性無效
? ? 預(yù)定義的過度方向:
*? CA_EXTERN NSString * const kCATransitionFromRight? 從右邊? ? ? ? ?
*? CA_EXTERN NSString * const kCATransitionFromLeft? ? ? 從左邊
*? CA_EXTERN NSString * const kCATransitionFromTop? ? ? 從頂部
*? CA_EXTERN NSString * const kCATransitionFromBottom 從底部
? ? @property(copy) NSString *type;設(shè)置預(yù)定義的效果,默認(rèn)為kCATransitionFade,如果設(shè)置了filter,則該屬性無效??
? ? 下面是type各種動畫效果? 'fade', `moveIn', `push' , `reveal' 可以分別使用'kCATransitionFade', 'kCATransitionMoveIn', 'kCATransitionPush', 'kCATransitionReveal'來調(diào)用.
*? ? @"cube"? ? ? ? ? ? ? ? ? ? 立方體翻滾效果
*? ? @"moveIn"? ? ? ? ? ? ? ? 新視圖移到舊視圖上面
*? ? @"reveal"? ? ? ? ? ? ? ? ? 顯露效果(將舊視圖移開,顯示下面的新視圖)
*? @"fade"? ? ? ? ? ? ? ? ? ? ?? 交叉淡化過渡(不支持過渡方向)? ? ? ? ? ? (默認(rèn)為此效果)
*? @"pageCurl"? ? ? ? ? ? ? ? 向上翻一頁
*? @"pageUnCurl"? ? ? ? ? ? 向下翻一頁
*? @"suckEffect"? ? ? ? ? ? ? 收縮效果，類似系統(tǒng)最小化窗口時的神奇效果(不支持過渡方向)
*? @"rippleEffect"? ? ? ? ? ? 滴水效果,(不支持過渡方向)
*? @"oglFlip"? ? ? ? ? ? ? ? ?? 上下左右翻轉(zhuǎn)效果
*? @"rotate"? ? ? ? ? ? ? ? ? ?? 旋轉(zhuǎn)效果
*? @"push"
*? @"cameraIrisHollowOpen"? ? 相機(jī)鏡頭打開效果(不支持過渡方向)
*? @"cameraIrisHollowClose"? ? 相機(jī)鏡頭關(guān)上效果(不支持過渡方向)
??? 此時subType為上面的那些,
? ? 當(dāng)type為@"rotate"(旋轉(zhuǎn))的時候,它也有幾個對應(yīng)的subtype,分別為:
*? 90cw? ? 逆時針旋轉(zhuǎn)90°
*? 90ccw? 順時針旋轉(zhuǎn)90°
*? 180cw? 逆時針旋轉(zhuǎn)180°
*? 180ccw? 順時針旋轉(zhuǎn)180°
??? type和subType的對應(yīng)關(guān)系?(匹配錯誤則無法顯示動畫)
??? 圖2.1.1是所列出的效果
這是demo詳情??
