UIView動(dòng)畫

UIView動(dòng)畫是對(duì)CoreAnimation的封裝，提供簡(jiǎn)介的動(dòng)畫借口。

UIView動(dòng)畫可以設(shè)置的屬性：

  1. frame 大小變化
  2. bounds 拉伸變化
  3. center 中心位置
  4. transform 旋轉(zhuǎn)
  5. alpha 透明度
  6. backgroundColor 背景顏色
  7. contentStretch 拉伸內(nèi)容
1、 UIView的Block動(dòng)畫

1.1、簡(jiǎn)單的Block動(dòng)畫

[UIView animateWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間
animations:^{
//執(zhí)行的動(dòng)畫
}];

[UIView animateWithDuration:(NSTimeInterval)//動(dòng)畫持續(xù)時(shí)間
animations:^{
//執(zhí)行的動(dòng)畫
}completion:^(BOOLfinished){
//動(dòng)畫執(zhí)行完畢后的操作
}];

1.2 、可設(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)翻頁(yè)
UIViewAnimationOptionTransitionFlipFromRight//轉(zhuǎn)場(chǎng)，從右向左旋轉(zhuǎn)翻頁(yè)
UIViewAnimationOptionTransitionCurlUp//轉(zhuǎn)場(chǎng)，下往上卷曲翻頁(yè)
UIViewAnimationOptionTransitionCurlDown//轉(zhuǎn)場(chǎng)，從上往下卷曲翻頁(yè)
UIViewAnimationOptionTransitionCrossDissolve//轉(zhuǎn)場(chǎng)，交叉消失和出現(xiàn)
UIViewAnimationOptionTransitionFlipFromTop//轉(zhuǎn)場(chǎng)，從上向下旋轉(zhuǎn)翻頁(yè)
UIViewAnimationOptionTransitionFlipFromBottom//轉(zhuǎn)場(chǎng)，從下向上旋轉(zhuǎn)翻頁(yè)

1.3、Spring動(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í)行完畢后的操作
}];

1.4、Keyframes動(dòng)畫

[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)算模式:平滑均勻

1.6 轉(zhuǎn)場(chǎng)動(dòng)畫

1.6.1 從舊視圖轉(zhuǎn)到新視圖的動(dòng)畫效果

//在該動(dòng)畫過程中，fromView會(huì)從父視圖中移除，并講toView添加到父視圖中，注意轉(zhuǎn)場(chǎng)動(dòng)畫的作用對(duì)象是父視圖（過渡效果體現(xiàn)在父視圖上）。
[UIView transitionFromView:(nonnullUIView*)
toView:(nonnullUIView*)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
completion:^(BOOLfinished){
//動(dòng)畫執(zhí)行完畢后的操作
}];

1.6.2單個(gè)視圖的過渡效果

[UIViewtransitionWithView:(nonnullUIView*)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//執(zhí)行的動(dòng)畫
}
completion:^(BOOLfinished){
//動(dòng)畫執(zhí)行完畢后的操作
}];
2. UIView的類方法動(dòng)畫
[UIView beginAnimations:(nullableNSString*)context:(nullablevoid*)];                                         //開始動(dòng)畫

第一個(gè)參數(shù)：動(dòng)畫標(biāo)識(shí)
第二個(gè)參數(shù)：附加參數(shù)，在設(shè)置了代理的情況下，此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情況下，我們?cè)O(shè)置為nil即可。

[UIView commitAnimations];                      //動(dòng)畫結(jié)束

動(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];
//當(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)翻頁(yè)
UIViewAnimationTransitionFlipFromRight,//從右向左旋轉(zhuǎn)翻頁(yè)
UIViewAnimationTransitionCurlUp,//從下往上卷曲翻頁(yè)
UIViewAnimationTransitionCurlDown,//從上往下卷曲翻頁(yè)
第二個(gè)參數(shù)：需要過渡效果的View
第三個(gè)參數(shù)：是否使用視圖緩存，YES：視圖在開始和結(jié)束時(shí)渲染一次；NO：視圖在每一幀都渲染

屬性變化動(dòng)畫（以frame變化為例）實(shí)例

[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];

轉(zhuǎn)場(chǎng)效果動(dòng)畫（以Flip效果為例）

[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:UIViewAnimationTransitionFlipFromLeftforView:self.centerShowcache:YES];
self.centerShow.image=[UIImageimageNamed:@"service"];
[UIView commitAnimations];
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • UIView動(dòng)畫簡(jiǎn)介 UIView動(dòng)畫實(shí)質(zhì)上是對(duì)Core Animation的封裝，提供簡(jiǎn)潔的動(dòng)畫接口。 UIVi...
    zhaihongxia閱讀 873評(píng)論 0贊 0
  • iOS的動(dòng)畫效果一直都很棒很，給人的感覺就是很炫酷很流暢，起到增強(qiáng)用戶體驗(yàn)的作用。在APP開發(fā)中實(shí)現(xiàn)動(dòng)畫效果有很多...
    白水灬煮一切閱讀 341評(píng)論 0贊 1
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫全貌。在這里你...
    被吹落的風(fēng)閱讀 1,705評(píng)論 1贊 2
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種：UIView動(dòng)畫，核心動(dòng)畫，幀動(dòng)畫，自定義轉(zhuǎn)場(chǎng)動(dòng)畫。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,323評(píng)論 1贊 23
  • 在開發(fā)工作中，我們會(huì)碰到大量的需要表現(xiàn)力的地方，那么動(dòng)畫便成為了我們開發(fā)過程中必不可少的知識(shí)點(diǎn)。 那么，首先我們從...
    穿山甲救蛇精閱讀 2,632評(píng)論 2贊 15

友情鏈接更多精彩內(nèi)容