iOS的動(dòng)畫效果一直都很棒很，給人的感覺就是很炫酷很流暢，起到增強(qiáng)用戶體驗(yàn)的作用址儒。在APP開發(fā)中實(shí)現(xiàn)動(dòng)畫效果有很多種方式，對(duì)于簡單的應(yīng)用場景衅疙，我們可以使用UIKit提供的動(dòng)畫來實(shí)現(xiàn)莲趣。
UIView動(dòng)畫實(shí)質(zhì)上是對(duì)Core Animation的封裝，提供簡潔的動(dòng)畫接口饱溢。
UIView動(dòng)畫可以設(shè)置的動(dòng)畫屬性有:
1喧伞、大小變化(frame)
2、拉伸變化(bounds)
3绩郎、中心位置(center)
4潘鲫、旋轉(zhuǎn)(transform)
5、透明度(alpha)
6肋杖、背景顏色(backgroundColor)
7溉仑、拉伸內(nèi)容(contentStretch)
1.1 動(dòng)畫開始標(biāo)記
[UIViewbeginAnimations:(nullableNSString *)context:(nullablevoid *)];
第一個(gè)參數(shù)：動(dòng)畫標(biāo)識(shí)
第二個(gè)參數(shù)：附加參數(shù)，在設(shè)置了代理的情況下兽愤，此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法彼念。大部分情況下挪圾，我們?cè)O(shè)置為nil即可。
1.2 結(jié)束動(dòng)畫標(biāo)記
[UIViewcommitAnimations];
//動(dòng)畫持續(xù)時(shí)間[UIViewsetAnimationDuration:(NSTimeInterval)];
//動(dòng)畫的代理對(duì)象[UIViewsetAnimationDelegate:(nullableid)];
//設(shè)置動(dòng)畫將開始時(shí)代理對(duì)象執(zhí)行的SEL[UIViewsetAnimationWillStartSelector:(nullable SEL)];
//設(shè)置動(dòng)畫結(jié)束時(shí)代理對(duì)象執(zhí)行的SEL[UIViewsetAnimationDidStopSelector:(nullable SEL)];
//設(shè)置動(dòng)畫延遲執(zhí)行的時(shí)間[UIViewsetAnimationDelay:(NSTimeInterval)];
//設(shè)置動(dòng)畫的重復(fù)次數(shù)[UIViewsetAnimationRepeatCount:(float)];
//設(shè)置動(dòng)畫的曲線[UIViewsetAnimationCurve:(UIViewAnimationCurve)];UIViewAnimationCurve的枚舉值如下：UIViewAnimationCurveEaseInOut,// 慢進(jìn)慢出（默認(rèn)值）UIViewAnimationCurveEaseIn,// 慢進(jìn)UIViewAnimationCurveEaseOut,// 慢出UIViewAnimationCurveLinear// 勻速
//設(shè)置是否從當(dāng)前狀態(tài)開始播放動(dòng)畫[UIViewsetAnimationBeginsFromCurrentState:YES];? ? 假設(shè)上一個(gè)動(dòng)畫正在播放逐沙，且尚未播放完畢哲思，我們將要進(jìn)行一個(gè)新的動(dòng)畫：? ? 當(dāng)為YES時(shí)：動(dòng)畫將從上一個(gè)動(dòng)畫所在的狀態(tài)開始播放? ? 當(dāng)為NO時(shí)：動(dòng)畫將從上一個(gè)動(dòng)畫所指定的最終狀態(tài)開始播放（此時(shí)上一個(gè)動(dòng)畫馬上結(jié)束）
//設(shè)置動(dòng)畫是否繼續(xù)執(zhí)行相反的動(dòng)畫[UIViewsetAnimationRepeatAutoreverses:(BOOL)];
//是否禁用動(dòng)畫效果（對(duì)象屬性依然會(huì)被改變，只是沒有動(dòng)畫效果）[UIViewsetAnimationsEnabled:(BOOL)];
//設(shè)置視圖的過渡效果[UIViewsetAnimationTransition:(UIViewAnimationTransition) forView:(nonnullUIView*) cache:(BOOL)];? ? 第一個(gè)參數(shù)：UIViewAnimationTransition的枚舉值如下UIViewAnimationTransitionNone,//不使用動(dòng)畫UIViewAnimationTransitionFlipFromLeft,//從左向右旋轉(zhuǎn)翻頁UIViewAnimationTransitionFlipFromRight,//從右向左旋轉(zhuǎn)翻頁UIViewAnimationTransitionCurlUp,//從下往上卷曲翻頁UIViewAnimationTransitionCurlDown,//從上往下卷曲翻頁第二個(gè)參數(shù)：需要過渡效果的View? ? 第三個(gè)參數(shù)：是否使用視圖緩存吩案，YES：視圖在開始和結(jié)束時(shí)渲染一次棚赔；NO：視圖在每一幀都渲染
1、屬性變化動(dòng)畫（以frame變化為例）
- (void)changeFrame {? ? [UIViewbeginAnimations:@"FrameAni"context:nil];? ? [UIViewsetAnimationDuration:1.0];? ? [UIViewsetAnimationDelegate:self];? ? [UIViewsetAnimationWillStartSelector:@selector(startAni:)];? ? [UIViewsetAnimationDidStopSelector:@selector(stopAni:)];? ? [UIViewsetAnimationRepeatCount:1];? ? [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];self.cartCenter.frame=self.centerShow.frame;? ? [UIViewcommitAnimations];}- (void)startAni:(NSString*)aniID {NSLog(@"%@ start",aniID);}- (void)stopAni:(NSString*)aniID {NSLog(@"%@ stop",aniID);}
動(dòng)畫效果：
NormalAni.gif
2徘郭、轉(zhuǎn)場效果動(dòng)畫（以Flip效果為例）
- (void)flipAni {? ? [UIViewbeginAnimations:@"FlipAni"context:nil];? ? [UIViewsetAnimationDuration:1.0];? ? [UIViewsetAnimationDelegate:self];? ? [UIViewsetAnimationWillStartSelector:@selector(startAni:)];? ? [UIViewsetAnimationDidStopSelector:@selector(stopAni:)];? ? [UIViewsetAnimationRepeatCount:1];? ? [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut];? ? [UIViewsetAnimationTransition:UIViewAnimationTransitionFlipFromLeftforView:self.centerShowcache:YES];self.centerShow.image= [UIImageimageNamed:@"service"];? ? [UIViewcommitAnimations];}
動(dòng)畫效果：
ScreenTransitionAni.gif
iOS4.0以后靠益，增加了Block動(dòng)畫塊，提供更簡潔的方式來實(shí)現(xiàn)動(dòng)畫残揉。
1胧后、最簡潔的Block動(dòng)畫：包含時(shí)間和動(dòng)畫
[UIViewanimateWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間animations:^{//執(zhí)行的動(dòng)畫}];
2、帶有動(dòng)畫完成回調(diào)的Block動(dòng)畫
[UIViewanimateWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間animations:^{//執(zhí)行的動(dòng)畫}? ? ? ? ? ? ? ? completion:^(BOOLfinished) {//動(dòng)畫執(zhí)行完畢后的操作}];
3抱环、可設(shè)置延遲時(shí)間和過渡效果的Block動(dòng)畫
[UIViewanimateWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間delay:(NSTimeInterval)//動(dòng)畫延遲執(zhí)行的時(shí)間options:(UIViewAnimationOptions)//動(dòng)畫的過渡效果animations:^{//執(zhí)行的動(dòng)畫}? ? ? ? ? ? ? ? completion:^(BOOLfinished) {//動(dòng)畫執(zhí)行完畢后的操作}];
UIViewAnimationOptions的枚舉值如下壳快，可組合使用：
UIViewAnimationOptionLayoutSubviews//進(jìn)行動(dòng)畫時(shí)布局子控件UIViewAnimationOptionAllowUserInteraction//進(jìn)行動(dòng)畫時(shí)允許用戶交互UIViewAnimationOptionBeginFromCurrentState//從當(dāng)前狀態(tài)開始動(dòng)畫UIViewAnimationOptionRepeat//無限重復(fù)執(zhí)行動(dòng)畫UIViewAnimationOptionAutoreverse//執(zhí)行動(dòng)畫回路UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套動(dòng)畫的執(zhí)行時(shí)間設(shè)置UIViewAnimationOptionOverrideInheritedCurve//忽略嵌套動(dòng)畫的曲線設(shè)置UIViewAnimationOptionAllowAnimatedContent//轉(zhuǎn)場：進(jìn)行動(dòng)畫時(shí)重繪視圖UIViewAnimationOptionShowHideTransitionViews//轉(zhuǎn)場：移除（添加和移除圖層的）動(dòng)畫效果UIViewAnimationOptionOverrideInheritedOptions//不繼承父動(dòng)畫設(shè)置UIViewAnimationOptionCurveEaseInOut//時(shí)間曲線，慢進(jìn)慢出（默認(rèn)值）UIViewAnimationOptionCurveEaseIn//時(shí)間曲線镇草，慢進(jìn)UIViewAnimationOptionCurveEaseOut//時(shí)間曲線眶痰，慢出UIViewAnimationOptionCurveLinear//時(shí)間曲線，勻速UIViewAnimationOptionTransitionNone//轉(zhuǎn)場梯啤，不使用動(dòng)畫UIViewAnimationOptionTransitionFlipFromLeft//轉(zhuǎn)場竖伯，從左向右旋轉(zhuǎn)翻頁UIViewAnimationOptionTransitionFlipFromRight//轉(zhuǎn)場，從右向左旋轉(zhuǎn)翻頁UIViewAnimationOptionTransitionCurlUp//轉(zhuǎn)場因宇，下往上卷曲翻頁UIViewAnimationOptionTransitionCurlDown//轉(zhuǎn)場七婴，從上往下卷曲翻頁UIViewAnimationOptionTransitionCrossDissolve//轉(zhuǎn)場，交叉消失和出現(xiàn)UIViewAnimationOptionTransitionFlipFromTop//轉(zhuǎn)場羽嫡，從上向下旋轉(zhuǎn)翻頁UIViewAnimationOptionTransitionFlipFromBottom//轉(zhuǎn)場本姥，從下向上旋轉(zhuǎn)翻頁
4、spring動(dòng)畫
iOS7.0后新增Spring動(dòng)畫（ios系統(tǒng)動(dòng)畫大部分采用Spring Animation杭棵，適用于所有可被添加動(dòng)畫效果的屬性）
[UIViewanimateWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間delay:(NSTimeInterval)//動(dòng)畫延遲執(zhí)行的時(shí)間usingSpringWithDamping:(CGFloat)//震動(dòng)效果婚惫，范圍0~1，數(shù)值越小震動(dòng)效果越明顯initialSpringVelocity:(CGFloat)//初始速度魂爪，數(shù)值越大初始速度越快options:(UIViewAnimationOptions)//動(dòng)畫的過渡效果animations:^{//執(zhí)行的動(dòng)畫}? ? ? ? ? ? ? ? ? completion:^(BOOLfinished) {//動(dòng)畫執(zhí)行完畢后的操作}];
5先舷、Keyframes動(dòng)畫
iOS7.0后新增關(guān)鍵幀動(dòng)畫，支持屬性關(guān)鍵幀滓侍，不支持路徑關(guān)鍵幀
[UIViewanimateKeyframesWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間delay:(NSTimeInterval)//動(dòng)畫延遲執(zhí)行的時(shí)間options:(UIViewKeyframeAnimationOptions)//動(dòng)畫的過渡效果animations:^{//執(zhí)行的關(guān)鍵幀動(dòng)畫}? ? ? ? ? ? ? ? ? ? ? ? ? completion:^(BOOLfinished) {//動(dòng)畫執(zhí)行完畢后的操作}];
UIViewKeyframeAnimationOptions的枚舉值如下蒋川，可組合使用：
UIViewAnimationOptionLayoutSubviews//進(jìn)行動(dòng)畫時(shí)布局子控件UIViewAnimationOptionAllowUserInteraction//進(jìn)行動(dòng)畫時(shí)允許用戶交互UIViewAnimationOptionBeginFromCurrentState//從當(dāng)前狀態(tài)開始動(dòng)畫UIViewAnimationOptionRepeat//無限重復(fù)執(zhí)行動(dòng)畫UIViewAnimationOptionAutoreverse//執(zhí)行動(dòng)畫回路UIViewAnimationOptionOverrideInheritedDuration//忽略嵌套動(dòng)畫的執(zhí)行時(shí)間設(shè)置UIViewAnimationOptionOverrideInheritedOptions//不繼承父動(dòng)畫設(shè)置UIViewKeyframeAnimationOptionCalculationModeLinear//運(yùn)算模式 :連續(xù)UIViewKeyframeAnimationOptionCalculationModeDiscrete//運(yùn)算模式 :離散UIViewKeyframeAnimationOptionCalculationModePaced//運(yùn)算模式 :均勻執(zhí)行UIViewKeyframeAnimationOptionCalculationModeCubic//運(yùn)算模式 :平滑UIViewKeyframeAnimationOptionCalculationModeCubicPaced//運(yùn)算模式 :平滑均勻
各種運(yùn)算模式的直觀比較如下圖：
圖片來源網(wǎng)絡(luò).png
增加關(guān)鍵幀的方法：
[UIViewaddKeyframeWithRelativeStartTime:(double)//動(dòng)畫開始的時(shí)間（占總時(shí)間的比例）relativeDuration:(double)//動(dòng)畫持續(xù)時(shí)間（占總時(shí)間的比例）animations:^{//執(zhí)行的動(dòng)畫}];
6、轉(zhuǎn)場動(dòng)畫
6.1 從舊視圖轉(zhuǎn)到新視圖的動(dòng)畫效果
[UIViewtransitionFromView:(nonnullUIView *)toView:(nonnullUIView *)duration:(NSTimeInterval)options:(UIViewAnimationOptions)completion:^(BOOLfinished){? ? ? ? ? ? ? ? ? ? //動(dòng)畫執(zhí)行完畢后的操作 }];
在該動(dòng)畫過程中撩笆，fromView 會(huì)從父視圖中移除捺球，并講 toView 添加到父視圖中缸浦，注意轉(zhuǎn)場動(dòng)畫的作用對(duì)象是父視圖（過渡效果體現(xiàn)在父視圖上）。
調(diào)用該方法相當(dāng)于執(zhí)行下面兩句代碼：
[fromView.superviewaddSubview:toView];[fromViewremoveFromSuperview];
6.2 單個(gè)視圖的過渡效果
[UIViewtransitionWithView:(nonnullUIView *)duration:(NSTimeInterval)options:(UIViewAnimationOptions)animations:^{? ? ? ? ? ? ? ? //執(zhí)行的動(dòng)畫 }? ? ? ? ? ? ? ? completion:^(BOOLfinished){? ? ? ? ? ? ? ? //動(dòng)畫執(zhí)行完畢后的操作 }];
1氮兵、普通動(dòng)畫
下面三段代碼都實(shí)現(xiàn)了相同的視圖frame的變化裂逐，不同之處只在于其延遲時(shí)間、過渡效果和結(jié)束回調(diào)泣栈。
- (void)blockAni1 {? ? [UIViewanimateWithDuration:1.0animations:^{self.cartCenter.frame=self.centerShow.frame;? ? }];}
- (void)blockAni2 {? ? [UIViewanimateWithDuration:1.0animations:^{self.cartCenter.frame=self.centerShow.frame;? ? } completion:^(BOOLfinished) {NSLog(@"動(dòng)畫結(jié)束");? ? }];}
- (void)blockAni3 {? ? [UIViewanimateWithDuration:1.0delay:1.0options:UIViewAnimationOptionCurveEaseInOutanimations:^{self.cartCenter.frame=self.centerShow.frame;? ? } completion:^(BOOLfinished) {NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果：
NormalAni.gif
2卜高、Spring動(dòng)畫
- (void)blockAni4 {? ? [UIViewanimateWithDuration:1.0delay:0.f usingSpringWithDamping:0.5initialSpringVelocity:5.0options:UIViewAnimationOptionCurveLinearanimations:^{self.cartCenter.frame=self.centerShow.frame;? ? } completion:^(BOOLfinished) {NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果：
SpringAni.gif
3、Keyframes動(dòng)畫
這里以實(shí)現(xiàn)視圖背景顏色變化（紅-綠-藍(lán)-紫）的過程來演示關(guān)鍵幀動(dòng)畫南片。
- (void)blockAni5 {? ? self.centerShow.image = nil;? ? [UIView animateKeyframesWithDuration:9.0delay:0.foptions:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{? ? ? ? [UIView addKeyframeWithRelativeStartTime:0.frelativeDuration:1.0/4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColor colorWithRed:0.9475green:0.1921blue:0.1746alpha:1.0];? ? ? ? }];? ? ? ? [UIView addKeyframeWithRelativeStartTime:1.0/4relativeDuration:1.0/4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColor colorWithRed:0.1064green:0.6052blue:0.0334alpha:1.0];? ? ? ? }];? ? ? ? [UIView addKeyframeWithRelativeStartTime:2.0/4relativeDuration:1.0/4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColor colorWithRed:0.1366green:0.3017blue:0.8411alpha:1.0];? ? ? ? }];? ? ? ? [UIView addKeyframeWithRelativeStartTime:3.0/4relativeDuration:1.0/4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColor colorWithRed:0.619green:0.037blue:0.6719alpha:1.0];? ? ? ? }];? ? } completion:^(BOOL finished) {? ? ? ? NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果：
KeyFramesAni.gif
4掺涛、轉(zhuǎn)場動(dòng)畫
4.1 單個(gè)視圖的過渡效果
- (void)blockAni6 {? ? [UIViewtransitionWithView:self.centerShowduration:1.0options:UIViewAnimationOptionTransitionCrossDissolveanimations:^{self.centerShow.image= [UIImageimageNamed:@"Service"];? ? } completion:^(BOOLfinished) {NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果：
TransitionAni.gif
4.2 從舊視圖轉(zhuǎn)到新視圖的動(dòng)畫效果
- (void)blockAni7 {UIImageView* newCenterShow = [[UIImageViewalloc]initWithFrame:self.centerShow.frame];? ? newCenterShow.image= [UIImageimageNamed:@"Service"];? ? [UIViewtransitionFromView:self.centerShowtoView:newCenterShow duration:1.0options:UIViewAnimationOptionTransitionFlipFromLeftcompletion:^(BOOLfinished) {NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果：
ScreenTransitionAni.gif
