iOS 動畫給人一種很流暢的感覺，提升用戶體驗载萌，在APP開發(fā)過程中，我們只要利用好系統(tǒng)的動畫知给，基本可以解決大部分的需求轩勘。
UIView動畫實質(zhì)上是Core Animation的封裝和泌，系統(tǒng)提供簡潔的動畫接口梯皿。
其中UIView動畫可以設(shè)置的屬性有：
- frame 大小
- bounds 拉伸
- center 中心位置
- transform 旋轉(zhuǎn)
- alpha 透明度
- backgroundColor 背景色
- contentStretch 拉伸內(nèi)容
UIView類動畫
API
/// 動畫開始標(biāo)記
/// 第一個參數(shù)：動畫標(biāo)識
/// 附加參數(shù)，在設(shè)置了代理的情況下县恕，此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法东羹。大部分情況下，我們設(shè)置為nil即可忠烛。
[UIView beginAnimations:(nullable NSString *)animationID context:(nullable void *)context]
/// 動畫持續(xù)時間
[UIView setAnimationDuration:(NSTimeInterval)];
/// 動畫代理設(shè)置
[UIView setAnimationDelegate:(nullable id)];
/// 設(shè)置動畫開始執(zhí)行的回調(diào)SEL
[UIView setAnimationWillStartSelector:(nullable SEL)];
/// 設(shè)置動畫執(zhí)行結(jié)束的的回調(diào)SEL
[UIView setAnimationDidStopSelector:(nullable SEL)];
/// 設(shè)置動畫延遲執(zhí)行的時間
[UIView setAnimationDelay:(NSTimeInterval)];
/// 設(shè)置動畫執(zhí)行的重復(fù)次數(shù)
[UIView setAnimationRepeatCount:(float)];
/// 設(shè)置動畫過渡曲線
[UIView setAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve是一個枚舉:
UIViewAnimationCurveEaseInOut, //緩入緩出 中間快
UIViewAnimationCurveEaseIn, // 由慢到快（緩入快出)
UIViewAnimationCurveEaseOut, // 由快到慢(快入緩出)
UIViewAnimationCurveLinear, // 勻速
/// 設(shè)置是否從當(dāng)前狀態(tài)開始播放
/// 假設(shè)上一個動畫正在播放,且未播放完成, 我們將要執(zhí)行新的動畫.
/// 當(dāng)YES時,動畫將從上一個動畫所在的狀態(tài)開始播放
/// 當(dāng)NO時,動畫將從上一個動畫所指定的最終狀態(tài)開始播放(此時上一個動畫馬上結(jié)束)
[UIView setAnimationBeginsFromCurrentState:YES];
/// 動畫是否繼續(xù)執(zhí)行相反的動畫
[UIView setAnimationRepeatAutoreverses:(BOOL)];
/// 是否禁用動畫效果(對象屬性依然會該拜年,只是沒有動畫過渡效果)
[UIView setAnimationsEnabled:(BOOL)];
/// 設(shè)置視圖過渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
/*
第一個參數(shù): UIViewAnimationTransition,是一個枚舉
UIViewAnimationTransitionNone, // 不使用動畫
UIViewAnimationTransitionFlipFromLeft, // 從左向右旋轉(zhuǎn)翻頁
UIViewAnimationTransitionFlipFromRight, // 從右向左旋轉(zhuǎn)翻頁
UIViewAnimationTransitionCurlUp, // 從下往上卷曲翻頁
UIViewAnimationTransitionCurlDown, // 從上往下卷曲翻頁
第二個參數(shù):需要知心過渡動畫的view
第三個參數(shù):是否使用視圖緩存,YES:視圖在開始和結(jié)束時渲染一次,NO:視圖在每一幀都渲染
*/
實例展示
- 改變屬性frame
- (void)animation1{
[UIView beginAnimations:@"FrameAnimation" context:@"232323"];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAnimation:context:)];
[UIView setAnimationDidStopSelector:@selector(stopAnimation:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
self.giftView.frame = self.heartView.frame;
[UIView commitAnimations];
}
//返回context參數(shù)
- (void)startAnimation:(NSString *)aniID context:(NSString *)context{
}
- (void)startAnimation:(NSString *)aniID{
NSLog(@"%@",aniID);
}
- (void)stopAnimation:(NSString *)aniID{
NSLog(@"%@",aniID);
}
效果圖
asda.gif
- 轉(zhuǎn)場效果動畫
//轉(zhuǎn)場動畫
- (void)transitions{
[UIView beginAnimations:@"FlipAni" context:nil];
[UIView setAnimationDuration:1.0];
[UIView setAnimationDelegate:self];
[UIView setAnimationWillStartSelector:@selector(startAnimation:)];
[UIView setAnimationDidStopSelector:@selector(stopAnimation:)];
[UIView setAnimationRepeatCount:1];
[UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.giftView cache:NO];
self.giftView.image = [UIImage imageNamed:@"local_2"];
[UIView commitAnimations];
}
效果圖
asda.gif
UIView Block動畫
- UIView BLock動畫方法,都是比較常用的方法
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
}];
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
delay:(NSTimeInterval) //動畫延遲執(zhí)行的時間
options:(UIViewAnimationOptions) //動畫的過渡效果
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
我們詳細說一下UIViewAnimationOptions這個枚舉值,可以參考iOS動畫中的枚舉UIViewAnimationOptions
UIViewAnimationOptionLayoutSubviews //提交動畫的時候布局子控件属提，表示子控件將和父控件一同動畫。
UIViewAnimationOptionAllowUserInteraction //動畫時允許用戶交流美尸，比如觸摸
UIViewAnimationOptionBeginFromCurrentState //從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //動畫無限重復(fù)
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路,前提是設(shè)置動畫無限重復(fù)
UIViewAnimationOptionOverrideInheritedDuration //忽略外層動畫嵌套的執(zhí)行時間
UIViewAnimationOptionOverrideInheritedCurve //忽略外層動畫嵌套的時間變化曲線
UIViewAnimationOptionAllowAnimatedContent //通過改變屬性和重繪實現(xiàn)動畫效果冤议，如果key沒有提交動畫將使用快照
UIViewAnimationOptionShowHideTransitionViews //用顯隱的方式替代添加移除圖層的動畫效果
UIViewAnimationOptionOverrideInheritedOptions //忽略嵌套繼承的選項
//時間函數(shù)曲線相關(guān)
UIViewAnimationOptionCurveEaseInOut //時間曲線函數(shù)，緩入緩出师坎，中間快
UIViewAnimationOptionCurveEaseIn //時間曲線函數(shù)求类，由慢到特別快（緩入快出）
UIViewAnimationOptionCurveEaseOut //時間曲線函數(shù)，由快到慢(快入緩出)
UIViewAnimationOptionCurveLinear //時間曲線函數(shù)屹耐，勻速
//轉(zhuǎn)場動畫相關(guān)的
UIViewAnimationOptionTransitionNone //無轉(zhuǎn)場動畫
UIViewAnimationOptionTransitionFlipFromLeft //轉(zhuǎn)場從左翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromRight //轉(zhuǎn)場從右翻轉(zhuǎn)
UIViewAnimationOptionTransitionCurlUp //上卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCurlDown //下卷轉(zhuǎn)場
UIViewAnimationOptionTransitionCrossDissolve //轉(zhuǎn)場交叉消失
UIViewAnimationOptionTransitionFlipFromTop //轉(zhuǎn)場從上翻轉(zhuǎn)
UIViewAnimationOptionTransitionFlipFromBottom //轉(zhuǎn)場從下翻轉(zhuǎn)
- Spring Block Animation
適用于所有可被添加動畫效果的屬性
[UIView animateWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
usingSpringWithDamping:(CGFloat)//阻尼系數(shù)，范圍0~1椿猎，數(shù)值越小震動效果越明顯
initialSpringVelocity:(CGFloat)//初始速度惶岭，數(shù)值越大初始速度越快
options:(UIViewAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
- Keyframes動畫
iOS7新增關(guān)鍵幀動畫,支持屬性關(guān)鍵幀,不支持路徑關(guān)鍵幀
[UIView animateKeyframesWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
options:(UIViewKeyframeAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的關(guān)鍵幀動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
UIViewKeyframeAnimationOptions枚舉(可以組合使用):
UIViewAnimationOptionLayoutSubviews //進行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction //進行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState //從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat //無限重復(fù)執(zhí)行動畫
UIViewAnimationOptionAutoreverse //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設(shè)置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設(shè)置
UIViewKeyframeAnimationOptionCalculationModeLinear //運算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced //運算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻
增加關(guān)鍵幀的方法:
[UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間（占總時間的比例）
relativeDuration:(double) //動畫持續(xù)時間（占總時間的比例）
animations:^{
//執(zhí)行的動畫
}];
- 轉(zhuǎn)場動畫
4.1 從舊視圖轉(zhuǎn)到新視圖的動畫效果
[UIView transitionFromView:(nonnull UIView *)
toView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
在該動畫執(zhí)行過程中,fromView會從父視圖移除，并將toView添加到父視圖中犯眠，該轉(zhuǎn)場動畫作用對象是父視圖按灶。（也就是說過渡動畫體現(xiàn)在父視圖上面）
調(diào)用該方法相當(dāng)于調(diào)用下面兩個方法：
[fromView.superview addSubview:toView];
[fromView removeFromSuperview];
4.2 單個視圖的過渡動畫
[UIView transitionWithView:(nonnull UIView *) //動畫作用的對象
duration:(NSTimeInterval) //動畫執(zhí)行時間
options:(UIViewAnimationOptions) //動畫過渡效果
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行完畢后的操作
}];
示例演示
- 改變frame位置
- (void)blockAnimation1{
[UIView animateWithDuration:1 animations:^{
self.giftView.frame = self.heartView.frame;
}completion:^(BOOL finished) {
NSLog(@"執(zhí)行完畢");
}];
}
- (void)blockAnimation2{
[UIView animateWithDuration:0.5 delay:1 options:UIViewAnimationOptionCurveEaseInOut animations:^{
self.giftView.frame = self.heartView.frame;
} completion:^(BOOL finished) {
NSLog(@"執(zhí)行完畢");
}];
}
動畫效果：
asda.gif
- 阻尼動畫
- (void)blockAni1{
[UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:5.0 options:UIViewAnimationOptionCurveLinear animations:^{
self.giftView.frame = self.heartView.frame;
} completion:^(BOOL finished) {
NSLog(@"執(zhí)行結(jié)束");
}];
}
動畫效果：
asda.gif
- Keyframes
這里以顏色變化為例，演示關(guān)鍵幀動畫
- (void)blockAni2{
self.giftView.image = nil;
[UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
[UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
self.giftView.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.giftView.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.giftView.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.giftView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
}];
} completion:^(BOOL finished) {
NSLog(@"動畫結(jié)束");
}];
}
動畫效果
asda.gif
- 轉(zhuǎn)場動畫
4.1 單個視圖的過渡效果
- (void)blockAni3{
[UIView transitionWithView:self.giftView duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
self.giftView.image = [UIImage imageNamed:@"local_2"];
} completion:^(BOOL finished) {
NSLog(@"動畫結(jié)束");
}];
}
執(zhí)行效果
asda.gif
將枚舉值換為UIViewAnimationOptionTransitionFlipFromLeft的執(zhí)行效果為：
asda.gif
4.2 從舊視圖轉(zhuǎn)到新視圖的動畫效果
//轉(zhuǎn)場動畫 從舊視圖轉(zhuǎn)到新視圖的動畫效果
- (void)blockAni4{
UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.giftView.frame];
newCenterShow.image = [UIImage imageNamed:@"local_2"];
[UIView transitionFromView:self.giftView toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
NSLog(@"動畫結(jié)束");
}];
}
該動畫作用的是父視圖筐咧，動畫效果如下：
asda.gif
本文文章以及代碼鸯旁，參考了iOS動畫篇：UIView動畫噪矛，所有代碼和動畫我都驗證過，截圖是我自己做的铺罢。
