動畫（一）UIView Animation

UIView Animation 是UIKit 框架中已日，針對UIView 動畫做的封裝。

一、 首先看 UIView(UIViewAnimation) 類別

1茵休、主要方法:

+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void*)context;? // 事務(wù)開始嘁捷，標(biāo)記開始添加動畫內(nèi)容造成，可以填寫id 與上下文，與commitAnimations成對出現(xiàn)雄嚣，中間可以嵌套beginAnimations/commitAnimations組合晒屎。

+ (void)commitAnimations;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //事務(wù)提交，標(biāo)示動畫啟動缓升，頂層動畫是提交

2鼓鲁、常見方法:

需要設(shè)置在beginAnimations/commitAnimations之間或者動畫的block里，

+ (void)setAnimationDelegate:(nullableid)delegate;? ? ? ? ? ? ? ? ? ? ? ? ? // 設(shè)置動畫的代理

+ (void)setAnimationWillStartSelector:(nullable SEL)selector;? ? ? ? ? ? ? ? // 設(shè)置動畫即將開始的監(jiān)聽方法

+ (void)setAnimationDidStopSelector:(nullable SEL)selector;? ? ? ? ? ? ? ? ? // 設(shè)置動畫結(jié)束的監(jiān)聽方法

+ (void)setAnimationDuration:(NSTimeInterval)duration;? ? ? ? ? ? ? // 設(shè)置動畫時間港谊，默認(rèn)0.2秒

+ (void)setAnimationDelay:(NSTimeInterval)delay;? ? ? ? ? ? ? ? ? ? // 設(shè)置動畫延時時間 默認(rèn)0秒

+ (void)setAnimationStartDate:(NSDate*)startDate;? ? ? ? ? ? ? ? ? // 設(shè)置動畫開始時間骇吭，默認(rèn)是當(dāng)前時間

+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;? ? ? ? ? ? ? // 動畫的節(jié)奏控制?默認(rèn)淡入淡出

動畫的節(jié)奏效果：

typedef NS_ENUM(NSInteger, UIViewAnimationCurve) {

UIViewAnimationCurveEaseInOut, //淡入淡出

UIViewAnimationCurveEaseIn,? ? //開始慢

UIViewAnimationCurveEaseOut,? //結(jié)束慢

UIViewAnimationCurveLinear? ? //線性的

};

+ (void)setAnimationRepeatCount:(float)repeatCount;? ? ? ? ? ? ? ? //動畫的重復(fù)次數(shù)

+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;? ? //如果設(shè)置為YES,代表動畫每次重復(fù)執(zhí)行的效果會跟上一次相反

+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState;? //?如果設(shè)置為YES那么當(dāng)動畫在運(yùn)行過程中，當(dāng)前視圖的位置將會作為新的動畫的開始狀態(tài)歧寺。如果設(shè)置為NO燥狰，當(dāng)前動畫結(jié)束前新動畫將使用視圖最后狀態(tài)的位置作為開始狀態(tài)。

+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView*)view cache:(BOOL)cache;? // 設(shè)置視圖view的過渡效果; transition指定過渡類型;參數(shù)cache斜筐，如果是YES龙致，那么在開始和結(jié)束圖片視圖渲染一次并在動畫中創(chuàng)建幀，否則視圖將會在每一幀都渲染顷链。例如緩存目代，你不需要在視圖轉(zhuǎn)變中不停的更新，你只需要等到轉(zhuǎn)換完成再去更新視圖。

動畫效果：

typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {

UIViewAnimationTransitionNone,? ? ? ? ? 沒有動畫效果

UIViewAnimationTransitionFlipFromLeft,? 從左向右旋轉(zhuǎn)翻頁

UIViewAnimationTransitionFlipFromRight, 從右向左旋轉(zhuǎn)翻頁

UIViewAnimationTransitionCurlUp,? ? ? ? 卷曲翻頁像啼，從下往上

UIViewAnimationTransitionCurlDown,? ? ? 卷曲翻頁俘闯，從上往下

};

+ (void)setAnimationsEnabled:(BOOL)enabled;? ? ?//設(shè)置是否激活動畫，如果是YES那就激活動畫忽冻，否則NO真朗。默認(rèn)是YES

+ (BOOL)areAnimationsEnabled; ? //返回一個布爾值表示動畫是否結(jié)束。如果動畫結(jié)束返回YES僧诚，否則NO遮婶。

+ (void)performWithoutAnimation:(void (^)(void))actionsWithoutAnimation NS_AVAILABLE_IOS(7_0); //可以強(qiáng)制一些動作不使用動畫,它是一個簡單的封裝，先檢查動畫當(dāng)前是否啟用湖笨，然后禁止動畫旗扑，執(zhí)行塊語句，最后重新啟用動畫慈省。一個需要說明的地方是臀防，它并不會阻塞基于CoreAnimation的動畫。iOS7的新方法

二边败、UIView(UIViewAnimationWithBlocks)主要是UIView基于block形式的基本動畫

1袱衷、基本動畫

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

+ (void)animateWithDuration:(NSTimeInterval)duration animations:(void(^)(void))animations;

上述三個方法類似，課根據(jù)需要選用合適的方法笑窜，

參數(shù)解析：

duration：動畫時長

delay：動畫延時時長

options：動畫類型參數(shù)

animations：動畫內(nèi)容block

completion：動畫完成后block

代碼示例：

? [UIView animateWithDuration:2 //動畫時長 單位為秒

? ? ? ? ? ? ? ? ? ? ? ? ? delay:0//動畫延時致燥， 不需要延時，設(shè)0

? ? ? ? ? ? ? ? ? ? ? ? options:UIViewAnimationOptionCurveEaseInOut //執(zhí)行的動畫選項(xiàng)

?? ? ? ? ? ? ? ? ? ? animations:^{//動畫的內(nèi)容

?? ? ? ? ? ? ? ? ? ? ? ? self.customView.transform=CGAffineTransformMakeScale(0.1,0.1);

?? ? ? ? ? ? ? ? ? ? }completion:^(BOOLfinished) {

?? ? ? ? ? ? ? ? ? ? ? ? //嵌套動畫（恢復(fù)原來視圖大信沤亍）

?? ? ? ? ? ? ? ? ? ? ? ? [UIViewanimateWithDuration:1animations:^{

?? ? ? ? ? ? ? ? ? ? ? ? ? ? self.customView.transform=CGAffineTransformMakeScale(1,1);

?? ? ? ? ? ? ? ? ? ? ? ? }];

?? ? ? ? ? ? ? ? ? ? }];

下邊是options參數(shù)解析：

/*

1.常規(guī)動畫屬性設(shè)置（可以同時選擇多個進(jìn)行設(shè)置）

UIViewAnimationOptionLayoutSubviews：動畫過程中保證子視圖跟隨運(yùn)動嫌蚤。**提交動畫的時候布局子控件，表示子控件將和父控件一同動畫断傲。**

UIViewAnimationOptionAllowUserInteraction：動畫過程中允許用戶交互脱吱。

UIViewAnimationOptionBeginFromCurrentState：所有視圖從當(dāng)前狀態(tài)開始運(yùn)行。

UIViewAnimationOptionRepeat：重復(fù)運(yùn)行動畫艳悔。

UIViewAnimationOptionAutoreverse ：動畫運(yùn)行到結(jié)束點(diǎn)后仍然以動畫方式回到初始點(diǎn)急凰。**執(zhí)行動畫回路,前提是設(shè)置動畫無限重復(fù)**

UIViewAnimationOptionOverrideInheritedDuration：忽略嵌套動畫時間設(shè)置。**忽略外層動畫嵌套的時間變化曲線**

UIViewAnimationOptionOverrideInheritedCurve：忽略嵌套動畫速度設(shè)置猜年。**通過改變屬性和重繪實(shí)現(xiàn)動畫效果，如果key沒有提交動畫將使用快照**

UIViewAnimationOptionAllowAnimatedContent：動畫過程中重繪視圖（注意僅僅適用于轉(zhuǎn)場動畫）疾忍。

UIViewAnimationOptionShowHideTransitionViews：視圖切換時直接隱藏舊視圖乔外、顯示新視圖，而不是將舊視圖從父視圖移除（僅僅適用于轉(zhuǎn)場動畫）**用顯隱的方式替代添加移除圖層的動畫效果**

UIViewAnimationOptionOverrideInheritedOptions ：不繼承父動畫設(shè)置或動畫類型一罩。**忽略嵌套繼承的選項(xiàng)**

----------------------------------------------------------------------------

2.動畫速度控制（可從其中選擇一個設(shè)置）時間函數(shù)曲線相關(guān)**時間曲線函數(shù)**

UIViewAnimationOptionCurveEaseInOut：動畫先緩慢杨幼，然后逐漸加速。

UIViewAnimationOptionCurveEaseIn ：動畫逐漸變慢。

UIViewAnimationOptionCurveEaseOut：動畫逐漸加速差购。

UIViewAnimationOptionCurveLinear ：動畫勻速執(zhí)行四瘫，默認(rèn)值。

-----------------------------------------------------------------------------

3.轉(zhuǎn)場類型（僅適用于轉(zhuǎn)場動畫設(shè)置欲逃，可以從中選擇一個進(jìn)行設(shè)置找蜜，基本動畫、關(guān)鍵幀動畫不需要設(shè)置）**轉(zhuǎn)場動畫相關(guān)的**

UIViewAnimationOptionTransitionNone：沒有轉(zhuǎn)場動畫效果稳析。

UIViewAnimationOptionTransitionFlipFromLeft ：從左側(cè)翻轉(zhuǎn)效果洗做。

UIViewAnimationOptionTransitionFlipFromRight：從右側(cè)翻轉(zhuǎn)效果。

UIViewAnimationOptionTransitionCurlUp：向后翻頁的動畫過渡效果彰居。

UIViewAnimationOptionTransitionCurlDown ：向前翻頁的動畫過渡效果诚纸。

UIViewAnimationOptionTransitionCrossDissolve：舊視圖溶解消失顯示下一個新視圖的效果。

UIViewAnimationOptionTransitionFlipFromTop ：從上方翻轉(zhuǎn)效果陈惰。

UIViewAnimationOptionTransitionFlipFromBottom：從底部翻轉(zhuǎn)效果畦徘。

*/

2、帶彈簧效果動畫

+ (void)animateWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay usingSpringWithDamping:(CGFloat)dampingRatio initialSpringVelocity:(CGFloat)velocity options:(UIViewAnimationOptions)options animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

參數(shù):

dampingRatio: 阻尼系數(shù) 值越小彈簧效果越明顯 取值0到1

velocity: 初始的速度抬闯，數(shù)值越大一開始移動越快

代碼示例：

[UIView animateWithDuration:2

? ? ? ? ? ? ? ? ? ? ? ? ? delay:0

?? ? ? ? usingSpringWithDamping:0.1

? ? ? ? ? initialSpringVelocity:1

? ? ? ? ? ? ? ? ? ? ? ? options:UIViewAnimationOptionCurveEaseIn

?? ? ? ? ? ? ? ? ? ? animations:^{

? ? ? ? self.customView.transform = CGAffineTransformMakeTranslation(0, 200);

?? ? ? ? ? ? ? ? ? ? }completion:^(BOOLfinished) {

? ? ? ? [UIView animateWithDuration:2 animations:^{

? ? ? ? ? ? self.customView.transform = CGAffineTransformMakeTranslation(0, 0);

? ? ? ? }];

? ? }];

3井辆、轉(zhuǎn)場動畫

+ (void)transitionWithView:(UIView *)view?duration:(NSTimeInterval)duration?options:(UIViewAnimationOptions)options?animations:(void (^)(void))animations?completion:(void (^)(BOOL finished))completion

參數(shù)解析:

duration：動畫的持續(xù)時間

view：需要進(jìn)行轉(zhuǎn)場動畫的視圖

options：轉(zhuǎn)場動畫的類型

animations：將改變視圖屬性的代碼放在這個block中

completion：動畫結(jié)束后，會自動調(diào)用這個block

+ (void)transitionFromView:(UIView *)fromView?toView:(UIView *)toView?duration:(NSTimeInterval)duration?options:(UIViewAnimationOptions)options?completion:(void (^)(BOOL finished))completion

方法調(diào)用完畢后画髓，相當(dāng)于執(zhí)行了下面兩句代碼：

// 添加toView到父視圖

[fromView.superview addSubview:toView];?

// 把fromView從父視圖中移除

[fromView removeFromSuperview];

參數(shù)解析:

duration：動畫的持續(xù)時間

options：轉(zhuǎn)場動畫的類型

animations：將改變視圖屬性的代碼放在這個block中

completion：動畫結(jié)束后掘剪，會自動調(diào)用這個block


?[UIView transitionWithView:self.customView duration:2 options:(UIViewAnimationOptionTransitionCurlUp) animations:^{

? ? ? ?[self.customView exchangeSubviewAtIndex:0 withSubviewAtIndex:1]; ? ?}completion:^(BOOLfinished) { ?

?}];

三 、UIView (UIViewKeyframeAnimations) 是基于UIView形式的關(guān)鍵幀動畫

1奈虾、方法

關(guān)鍵幀動畫核心方法有兩個夺谁，要同時使用：

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration delay:(NSTimeInterval)delay options:(UIViewKeyframeAnimationOptions)options animations:(void(^)(void))animations completion:(void(^__nullable)(BOOLfinished))completion;

參數(shù)解析:

duration：動畫總時長

delay：動畫延時時長

options：動畫類型參數(shù)

animations：動畫內(nèi)容block

completion：動畫完成后block

+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void(^)(void))animations;

參數(shù)解析:

frameStartTime：相對于Duration所開始的時間（第0秒開始動畫）

frameDuration：相對于Duration所持續(xù)的時間

animations：動畫內(nèi)容block

代碼示例：

[UIView animateKeyframesWithDuration:6 delay:0 options:(UIViewKeyframeAnimationOptionRepeat) animations:^{

? ? ? ? [UIView addKeyframeWithRelativeStartTime:0.0? // 相對于6秒所開始的時間（第0秒開始動畫）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? relativeDuration:1/3.0// 相對于6秒動畫的持續(xù)時間（動畫持續(xù)2秒）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? animations:^{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? self.customView.backgroundColor= [UIColorcolorWithRed:RandomColorgreen:RandomColorblue:RandomColoralpha:1];

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }];

? ? ? ? [UIView addKeyframeWithRelativeStartTime:1/3.0 // 相對于6秒所開始的時間（第2秒開始動畫）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? relativeDuration:1/3.0// 相對于6秒動畫的持續(xù)時間（動畫持續(xù)2秒）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?animations:^{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?self.customView.backgroundColor= [UIColorcolorWithRed:RandomColorgreen:RandomColorblue:RandomColoralpha:1];

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }];

? ? ? ?[UIView addKeyframeWithRelativeStartTime:2/3.0 // 相對于6秒所開始的時間（第4秒開始動畫）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? relativeDuration:1/3.0// 相對于6秒動畫的持續(xù)時間（動畫持續(xù)2秒）

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?animations:^{

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?self.customView.backgroundColor= [UIColorcolorWithRed:RandomColorgreen:RandomColorblue:RandomColoralpha:1];? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? }];

? ?}completion:nil];


關(guān)于UIView Animation ，就寫到這里了肉微，附demo一份GitHub - Tony-iOS-Personal/AnimationDemo: 關(guān)于動畫的總結(jié)demo

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末匾鸥，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子碉纳，更是在濱河造成了極大的恐慌勿负，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,470評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件劳曹，死亡現(xiàn)場離奇詭異奴愉，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)铁孵，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,393評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門锭硼，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人蜕劝，你說我怎么就攤上這事檀头『湟欤” “怎么了？”我有些...
    開封第一講書人閱讀 162,577評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵暑始，是天一觀的道長搭独。 經(jīng)常有香客問我，道長廊镜，這世上最難降的妖魔是什么牙肝？ 我笑而不...
    開封第一講書人閱讀 58,176評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮期升，結(jié)果婚禮上惊奇，老公的妹妹穿的比我還像新娘。我一直安慰自己播赁，他們只是感情好颂郎，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,189評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著容为，像睡著了一般乓序。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上坎背，一...
    開封第一講書人閱讀 51,155評論 1贊 299
  • 城市分裂傳說
    那天替劈，我揣著相機(jī)與錄音，去河邊找鬼得滤。 笑死陨献，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的懂更。 我是一名探鬼主播眨业，決...
    沈念sama閱讀 40,041評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼沮协！你這毒婦竟也來了龄捡？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 38,903評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤慷暂，失蹤者是張志新（化名）和其女友劉穎聘殖，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體行瑞，經(jīng)...
    沈念sama閱讀 45,319評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡奸腺，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,539評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了血久。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片洋机。...
    茶點(diǎn)故事閱讀 39,703評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖洋魂，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤副砍，帶...
    沈念sama閱讀 35,417評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布衔肢，位于F島的核電站，受9級特大地震影響豁翎，放射性物質(zhì)發(fā)生泄漏角骤。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,013評論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一心剥、第九天 我趴在偏房一處隱蔽的房頂上張望邦尊。 院中可真熱鬧，春花似錦优烧、人聲如沸蝉揍。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,664評論 0贊 22
  • 一樁弒父案畦娄，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽又沾。三九已至，卻和暖如春熙卡，著一層夾襖步出監(jiān)牢的瞬間杖刷，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,818評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工驳癌， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留滑燃，地道東北人。 一個月前我還...
    沈念sama閱讀 47,711評論 2贊 368
  • 代替公主和親
    正文 我出身青樓颓鲜，卻偏偏與公主長得像表窘，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子灾杰，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,601評論 2贊 353