iOS的動畫效果一直都很棒很科贬，給人的感覺就是很炫酷很流暢，起到增強用戶體驗的作用羔飞。在APP開發(fā)中實現(xiàn)動畫效果有很多種方式佣盒，對于簡單的應用場景关带，我們可以使用UIKit提供的動畫來實現(xiàn)。
UIView動畫簡介
UIView動畫實質上是對Core Animation的封裝沼撕，提供簡潔的動畫接口。
UIView動畫可以設置的動畫屬性有:
1芜飘、大小變化(frame)
2务豺、拉伸變化(bounds)
3、中心位置(center)
4嗦明、旋轉(transform)
5笼沥、透明度(alpha)
6、背景顏色(backgroundColor)
7娶牌、拉伸內容(contentStretch)
UIview 類方法動畫
1）動畫的開始和結束方法
1.1 動畫開始標記
[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];
第一個參數(shù)：動畫標識
第二個參數(shù)：附加參數(shù)奔浅，在設置了代理的情況下，此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法诗良。大部分情況下汹桦，我們設置為nil即可。
1.2 結束動畫標記
[UIView commitAnimations];
2）動畫參數(shù)的設置方法
//動畫持續(xù)時間
[UIView setAnimationDuration:(NSTimeInterval)];
//動畫的代理對象
[UIView setAnimationDelegate:(nullable id)];
//設置動畫將開始時代理對象執(zhí)行的SEL
[UIView setAnimationWillStartSelector:(nullable SEL)];
//設置動畫結束時代理對象執(zhí)行的SEL
[UIView setAnimationDidStopSelector:(nullable SEL)];
//設置動畫延遲執(zhí)行的時間
[UIView setAnimationDelay:(NSTimeInterval)];
//設置動畫的重復次數(shù)
[UIView setAnimationRepeatCount:(float)];
//設置動畫的曲線
[UIView setAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve的枚舉值如下：
UIViewAnimationCurveEaseInOut, // 慢進慢出（默認值）
UIViewAnimationCurveEaseIn, // 慢進
UIViewAnimationCurveEaseOut, // 慢出
UIViewAnimationCurveLinear // 勻速
//設置是否從當前狀態(tài)開始播放動畫
[UIView setAnimationBeginsFromCurrentState:YES];
假設上一個動畫正在播放鉴裹，且尚未播放完畢舞骆，我們將要進行一個新的動畫：
當為YES時：動畫將從上一個動畫所在的狀態(tài)開始播放
當為NO時：動畫將從上一個動畫所指定的最終狀態(tài)開始播放（此時上一個動畫馬上結束）
//設置動畫是否繼續(xù)執(zhí)行相反的動畫
[UIView setAnimationRepeatAutoreverses:(BOOL)];
//是否禁用動畫效果（對象屬性依然會被改變钥弯，只是沒有動畫效果）
[UIView setAnimationsEnabled:(BOOL)];
//設置視圖的過渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
第一個參數(shù)：UIViewAnimationTransition的枚舉值如下
UIViewAnimationTransitionNone, //不使用動畫
UIViewAnimationTransitionFlipFromLeft, //從左向右旋轉翻頁
UIViewAnimationTransitionFlipFromRight, //從右向左旋轉翻頁
UIViewAnimationTransitionCurlUp, //從下往上卷曲翻頁
UIViewAnimationTransitionCurlDown, //從上往下卷曲翻頁
第二個參數(shù)：需要過渡效果的View
第三個參數(shù)：是否使用視圖緩存，YES：視圖在開始和結束時渲染一次督禽；NO：視圖在每一幀都渲染
3）實例代碼：
1脆霎、屬性變化動畫（以frame變化為例）
- (void)changeFrame {
[UIView beginAnimations:@"FrameAni" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
self.cartCenter.frame = self.centerShow.frame;
[UIView commitAnimations];
}
- (void)startAni:(NSString *)aniID {
NSLog(@"%@ start",aniID);
}
- (void)stopAni:(NSString *)aniID {
NSLog(@"%@ stop",aniID);
}
動畫效果：
NormalAni.gif
2、轉場效果動畫（以Flip效果為例）
- (void)flipAni {
[UIView beginAnimations:@"FlipAni" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAni:)];
[UIView setAnimationDidStopSelector:@selector(stopAni:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.centerShow cache:YES];
self.centerShow.image = [UIImage imageNamed:@"service"];
[UIView commitAnimations];
}
動畫效果：
ScreenTransitionAni.gif
UIview Block動畫
iOS4.0以后狈惫，增加了Block動畫塊睛蛛，提供更簡潔的方式來實現(xiàn)動畫。
1）Block動畫方法
1胧谈、最簡潔的Block動畫：包含時間和動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
}];
2忆肾、帶有動畫完成回調的Block動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
3、可設置延遲時間和過渡效果的Block動畫
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
delay:(NSTimeInterval) //動畫延遲執(zhí)行的時間
options:(UIViewAnimationOptions) //動畫的過渡效果
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
UIViewAnimationOptions的枚舉值如下第岖，可組合使用：
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套動畫的曲線設置
UIViewAnimationOptionAllowAnimatedContent //轉場：進行動畫時重繪視圖
UIViewAnimationOptionShowHideTransitionViews //轉場：移除（添加和移除圖層的）動畫效果
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
UIViewAnimationOptionCurveEaseInOut //時間曲線难菌，慢進慢出（默認值）
UIViewAnimationOptionCurveEaseIn //時間曲線，慢進
UIViewAnimationOptionCurveEaseOut //時間曲線蔑滓，慢出
UIViewAnimationOptionCurveLinear //時間曲線郊酒，勻速
UIViewAnimationOptionTransitionNone //轉場，不使用動畫
UIViewAnimationOptionTransitionFlipFromLeft //轉場键袱，從左向右旋轉翻頁
UIViewAnimationOptionTransitionFlipFromRight //轉場燎窘，從右向左旋轉翻頁
UIViewAnimationOptionTransitionCurlUp //轉場，下往上卷曲翻頁
UIViewAnimationOptionTransitionCurlDown //轉場蹄咖，從上往下卷曲翻頁
UIViewAnimationOptionTransitionCrossDissolve //轉場褐健，交叉消失和出現(xiàn)
UIViewAnimationOptionTransitionFlipFromTop //轉場，從上向下旋轉翻頁
UIViewAnimationOptionTransitionFlipFromBottom //轉場澜汤，從下向上旋轉翻頁
4蚜迅、Spring動畫
iOS7.0后新增Spring動畫（iOS系統(tǒng)動畫大部分采用Spring Animation，適用于所有可被添加動畫效果的屬性）
[UIView animateWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
usingSpringWithDamping:(CGFloat)//震動效果俊抵，范圍0~1谁不，數(shù)值越小震動效果越明顯
initialSpringVelocity:(CGFloat)//初始速度，數(shù)值越大初始速度越快
options:(UIViewAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
5徽诲、Keyframes動畫
iOS7.0后新增關鍵幀動畫刹帕，支持屬性關鍵幀，不支持路徑關鍵幀
[UIView animateKeyframesWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
options:(UIViewKeyframeAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的關鍵幀動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
UIViewKeyframeAnimationOptions的枚舉值如下谎替，可組合使用：
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
UIViewKeyframeAnimationOptionCalculationModeLinear //運算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced //運算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻
各種運算模式的直觀比較如下圖：
圖片來源網絡.png
增加關鍵幀的方法：
[UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間（占總時間的比例）
relativeDuration:(double) //動畫持續(xù)時間（占總時間的比例）
animations:^{
//執(zhí)行的動畫
}];
6偷溺、轉場動畫
6.1 從舊視圖轉到新視圖的動畫效果
[UIView transitionFromView:(nonnull UIView *)
toView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
在該動畫過程中，fromView 會從父視圖中移除钱贯，并講 toView 添加到父視圖中挫掏，注意轉場動畫的作用對象是父視圖（過渡效果體現(xiàn)在父視圖上）。
調用該方法相當于執(zhí)行下面兩句代碼：
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
6.2 單個視圖的過渡效果
[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
2）實例代碼：
1喷舀、普通動畫
下面三段代碼都實現(xiàn)了相同的視圖frame的變化砍濒，不同之處只在于其延遲時間淋肾、過渡效果和結束回調。
- (void)blockAni1 {
[UIView animateWithDuration:1.0 animations:^{
self.cartCenter.frame = self.centerShow.frame;
}];
}
- (void)blockAni2 {
[UIView animateWithDuration:1.0 animations:^{
self.cartCenter.frame = self.centerShow.frame;
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
- (void)blockAni3 {
[UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.cartCenter.frame = self.centerShow.frame;
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
動畫效果：
NormalAni.gif
2爸邢、Spring動畫
- (void)blockAni4 {
[UIView animateWithDuration:1.0 delay:0.f usingSpringWithDamping:0.5 initialSpringVelocity:5.0 options:UIViewAnimationOptionCurveLinear animations:^{
self.cartCenter.frame = self.centerShow.frame;
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
動畫效果：
SpringAni.gif
3樊卓、Keyframes動畫
這里以實現(xiàn)視圖背景顏色變化（紅-綠-藍-紫）的過程來演示關鍵幀動畫。
- (void)blockAni5 {
self.centerShow.image = nil;
[UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
}];
[UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
}];
[UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
}];
[UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
self.centerShow.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
}];
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
動畫效果：
KeyFramesAni.gif
4杠河、轉場動畫
4.1 單個視圖的過渡效果
- (void)blockAni6 {
[UIView transitionWithView:self.centerShow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.centerShow.image = [UIImage imageNamed:@"Service"];
} completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
動畫效果：
TransitionAni.gif
4.2 從舊視圖轉到新視圖的動畫效果
- (void)blockAni7 {
UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.centerShow.frame];
newCenterShow.image = [UIImage imageNamed:@"Service"];
[UIView transitionFromView:self.centerShow toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
NSLog(@"動畫結束");
}];
}
動畫效果：
ScreenTransitionAni.gif
Next
接下來將更新核心動畫Core Animation
