UIView動(dòng)畫簡介
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)
UIview 類方法動(dòng)畫
1)動(dòng)畫的開始和結(jié)束方法
1.1 動(dòng)畫開始標(biāo)記
[UIView beginAnimations:(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)記
[UIView commitAnimations];
2)動(dòng)畫參數(shù)的設(shè)置方法
//動(dòng)畫持續(xù)時(shí)間[UIViewsetAnimationDuration:(NSTimeInterval)];
//動(dòng)畫的代理對(duì)象[UIViewsetAnimationDelegate:(nullableid)];
//設(shè)置動(dòng)畫將開始時(shí)代理對(duì)象執(zhí)行的SEL[UIViewsetAnimationWillStartSelector:(nullableSEL)];
//設(shè)置動(dòng)畫結(jié)束時(shí)代理對(duì)象執(zhí)行的SEL[UIViewsetAnimationDidStopSelector:(nullableSEL)];
//設(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:視圖在每一幀都渲染
3)實(shí)例代碼:
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)畫效果:
2乳乌、轉(zhuǎn)場(chǎng)效果動(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.centerShow cache:YES];self.centerShow.image = [UIImageimageNamed:@"service"];? ? [UIViewcommitAnimations];}
動(dòng)畫效果:
UIview Block動(dòng)畫
iOS4.0以后王浴,增加了Block動(dòng)畫塊蹲嚣,提供更簡潔的方式來實(shí)現(xiàn)動(dòng)畫。
1)Block動(dòng)畫方法
1、最簡潔的Block動(dòng)畫:包含時(shí)間和動(dòng)畫
[UIView animateWithDuration:(NSTimeInterval)? //動(dòng)畫持續(xù)時(shí)間? ? ? ? ? ? ? ? ? animations:^{
//執(zhí)行的動(dòng)畫
}];
2胶征、帶有動(dòng)畫完成回調(diào)的Block動(dòng)畫
[UIView animateWithDuration:(NSTimeInterval)? //動(dòng)畫持續(xù)時(shí)間? ? ? ? ? ? ? ? ? animations:^{
//執(zhí)行的動(dòng)畫
}completion:^(BOOLfinished) {? ? ? ? ? ? ? ? //動(dòng)畫執(zhí)行完畢后的操作 }];
3凉唐、可設(shè)置延遲時(shí)間和過渡效果的Block動(dòng)畫
[UIView animateWithDuration:(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)場(chǎng):進(jìn)行動(dòng)畫時(shí)重繪視圖UIViewAnimationOptionShowHideTransitionViews//轉(zhuǎn)場(chǎng):移除(添加和移除圖層的)動(dòng)畫效果UIViewAnimationOptionOverrideInheritedOptions//不繼承父動(dòng)畫設(shè)置UIViewAnimationOptionCurveEaseInOut//時(shí)間曲線,慢進(jìn)慢出(默認(rèn)值)UIViewAnimationOptionCurveEaseIn//時(shí)間曲線癞己,慢進(jìn)UIViewAnimationOptionCurveEaseOut//時(shí)間曲線,慢出UIViewAnimationOptionCurveLinear//時(shí)間曲線梭伐,勻速UIViewAnimationOptionTransitionNone//轉(zhuǎn)場(chǎng)痹雅,不使用動(dòng)畫UIViewAnimationOptionTransitionFlipFromLeft//轉(zhuǎn)場(chǎng),從左向右旋轉(zhuǎn)翻頁UIViewAnimationOptionTransitionFlipFromRight//轉(zhuǎn)場(chǎng)糊识,從右向左旋轉(zhuǎn)翻頁UIViewAnimationOptionTransitionCurlUp//轉(zhuǎn)場(chǎng)绩社,下往上卷曲翻頁UIViewAnimationOptionTransitionCurlDown//轉(zhuǎn)場(chǎng),從上往下卷曲翻頁UIViewAnimationOptionTransitionCrossDissolve//轉(zhuǎn)場(chǎng)赂苗,交叉消失和出現(xiàn)UIViewAnimationOptionTransitionFlipFromTop//轉(zhuǎn)場(chǎng)愉耙,從上向下旋轉(zhuǎn)翻頁UIViewAnimationOptionTransitionFlipFromBottom//轉(zhuǎn)場(chǎng),從下向上旋轉(zhuǎn)翻頁
4拌滋、Spring動(dòng)畫
iOS7.0后新增Spring動(dòng)畫(iOS系統(tǒng)動(dòng)畫大部分采用Spring Animation朴沿,適用于所有可被添加動(dòng)畫效果的屬性)
[UIView animateWithDuration:(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)鍵幀
[UIView animateKeyframesWithDuration:(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)鍵幀的方法:
[UIView addKeyframeWithRelativeStartTime:(double)//動(dòng)畫開始的時(shí)間(占總時(shí)間的比例)? ? ? ? ? ? ? ? ? ? ? ? relativeDuration:(double) //動(dòng)畫持續(xù)時(shí)間(占總時(shí)間的比例)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? animations:^{
//執(zhí)行的動(dòng)畫
}];
6斜姥、轉(zhuǎn)場(chǎng)動(dòng)畫
6.1 從舊視圖轉(zhuǎn)到新視圖的動(dòng)畫效果
[UIView transitionFromView:(nonnullUIView *)? ? ? ? ? ? ? ? ? ? toView:(nonnullUIView *)? ? ? ? ? ? ? ? ? duration:(NSTimeInterval)? ? ? ? ? ? ? ? ? ? options:(UIViewAnimationOptions)? ? ? ? ? ? ? ? completion:^(BOOLfinished) {? ? ? ? ? ? ? ? ? ? //動(dòng)畫執(zhí)行完畢后的操作 }];
在該動(dòng)畫過程中鸿竖,fromView 會(huì)從父視圖中移除,并講 toView 添加到父視圖中铸敏,注意轉(zhuǎn)場(chǎng)動(dòng)畫的作用對(duì)象是父視圖(過渡效果體現(xiàn)在父視圖上)缚忧。
調(diào)用該方法相當(dāng)于執(zhí)行下面兩句代碼:
[fromView.superview addSubview:toView];[fromView removeFromSuperview];
6.2 單個(gè)視圖的過渡效果
[UIView transitionWithView:(nonnullUIView *)? ? ? ? ? ? ? ? ? duration:(NSTimeInterval)? ? ? ? ? ? ? ? ? ? options:(UIViewAnimationOptions)? ? ? ? ? ? ? ? animations:^{
//執(zhí)行的動(dòng)畫
}completion:^(BOOLfinished) {? ? ? ? ? ? ? ? //動(dòng)畫執(zhí)行完畢后的操作 }];
2)實(shí)例代碼:
1、普通動(dòng)畫
下面三段代碼都實(shí)現(xiàn)了相同的視圖frame的變化搞坝,不同之處只在于其延遲時(shí)間、過渡效果和結(jié)束回調(diào)魁袜。
- (void)blockAni1 {? ? [UIView animateWithDuration:1.0 animations:^{? ? ? ? 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.fusingSpringWithDamping:0.5initialSpringVelocity:5.0options:UIViewAnimationOptionCurveLinearanimations:^{? ? ? ? self.cartCenter.frame = self.centerShow.frame;? ? }completion:^(BOOL finished) {? ? ? ? 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;? ? [UIViewanimateKeyframesWithDuration:9.0delay:0.foptions:UIViewKeyframeAnimationOptionCalculationModeLinearanimations:^{? ? ? ? [UIViewaddKeyframeWithRelativeStartTime:0.frelativeDuration:1.0/4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColorcolorWithRed:0.9475green:0.1921blue:0.1746alpha:1.0];? ? ? ? }];? ? ? ? [UIViewaddKeyframeWithRelativeStartTime:1.0/ 4 relativeDuration:1.0 /4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColorcolorWithRed:0.1064green:0.6052blue:0.0334alpha:1.0];? ? ? ? }];? ? ? ? [UIViewaddKeyframeWithRelativeStartTime:2.0/ 4 relativeDuration:1.0 /4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColorcolorWithRed:0.1366green:0.3017blue:0.8411alpha:1.0];? ? ? ? }];? ? ? ? [UIViewaddKeyframeWithRelativeStartTime:3.0/ 4 relativeDuration:1.0 /4animations:^{? ? ? ? ? ? self.centerShow.backgroundColor = [UIColorcolorWithRed:0.619green:0.037blue:0.6719alpha:1.0];? ? ? ? }];? ? }completion:^(BOOL finished) {? ? ? ? NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果:
KeyFramesAni.gif
4店量、轉(zhuǎn)場(chǎng)動(dòng)畫
4.1 單個(gè)視圖的過渡效果
- (void)blockAni6 {? ? [UIViewtransitionWithView:self.centerShow duration: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.centerShow toView:newCenterShow duration:1.0options:UIViewAnimationOptionTransitionFlipFromLeftcompletion:^(BOOLfinished) {NSLog(@"動(dòng)畫結(jié)束");? ? }];}
動(dòng)畫效果:
ScreenTransitionAni.gif
原作者:明仔Su(簡書)