動畫-UIView動畫

iOS實際開發(fā)中常用動畫:UIView動畫,核心動畫,幀動畫,自定義轉場動畫

1.UIView動畫

UIView動畫能夠設置的動畫屬性有:

frame
bounds
center
transform
alpha
BackgroundColor
contentStretch

UIView動畫實現(xiàn)方式有普通方式和Block

1.1普通方式

開始動畫語句

[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];

// 第一個參數(shù): 動畫標識
// 第二個參數(shù): 附加參數(shù),在設置代理情況下宣渗,此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法,大部分情況梨州,設置為nil.

結束動畫語句:

[UIView commitAnimations];

動畫持續(xù)時間

[UIView setAnimationDuration:(NSTimeInterval)];

動畫的代理對象

[UIView setAnimationDelegate:(nullable id)];

設置動畫將開始時代理對象執(zhí)行的SEL

[UIView setAnimationWillStartSelector:(nullable SEL)];

設置動畫延遲執(zhí)行的時間

[UIView setAnimationDelay:(NSTimeInterval)];

設置動畫的重復次數(shù)

[UIView setAnimationRepeatCount:(float)];

設置動畫的曲線

[UIView setAnimationCurve:(UIViewAnimationCurve)];

typedef enum {
   UIViewAnimationCurveEaseInOut,         // 慢進慢出(默認值)
   UIViewAnimationCurveEaseIn,            // 慢進
   UIViewAnimationCurveEaseOut,           // 慢出
   UIViewAnimationCurveLinear             // 勻速
} UIViewAnimationCurve;

設置是否從當前狀態(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ù)
typedef enum {
    UIViewAnimationTransitionNone,              //不使用動畫
    UIViewAnimationTransitionFlipFromLeft,      //從左向右旋轉翻頁
    UIViewAnimationTransitionFlipFromRight,     //從右向左旋轉翻頁
    UIViewAnimationTransitionCurlUp,            //從下往上卷曲翻頁
    UIViewAnimationTransitionCurlDown,          //從上往下卷曲翻頁
} UIViewAnimationTransition;

//第二個參數(shù),需要過渡效果的View

//第三個參數(shù),是否使用視圖緩存鞍恢,YES:視圖在開始和結束時渲染一次;NO:視圖在每一幀都渲染

代碼例子

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
   //觸摸點
   UITouch *tuch = touches.anyObject;
   CGPoint point = [tuch locationInView:self.view];
   //開始動畫
   [UIView beginAnimations:@"testAnimation" context:nil];
   [UIView setAnimationDuration:3.0];
   [UIView setAnimationDelegate:self];
   //設置動畫將開始時代理對象執(zhí)行的SEL
   [UIView setAnimationWillStartSelector:@selector(animationDoing)];
   //設置動畫延遲執(zhí)行的時間
   [UIView setAnimationDelay:0];
   [UIView setAnimationRepeatCount:MAXFLOAT];
   [UIView setAnimationCurve:UIViewAnimationCurveLinear];
   //設置動畫是否繼續(xù)執(zhí)行相反的動畫
   [UIView setAnimationRepeatAutoreverses:YES];
   self.redView.center = point;
   self.redView.transform = CGAffineTransformMakeScale(1.5, 1.5);
   self.redView.transform = CGAffineTransformMakeRotation(M_PI);
   //結束動畫
   [UIView commitAnimations];
}
運行結果

1.2Block

ios4.0以后增加了Block動畫塊每窖,提供了更簡潔的方式來實現(xiàn)動畫.日常開發(fā)中一般也是使用Block形式創(chuàng)建動畫帮掉。最簡潔的Block動畫:包含時間和動畫:

[UIView animateWithDuration:(NSTimeInterval)  //動畫持續(xù)時間

animations:^{

//執(zhí)行的動畫

}];

** 帶有動畫提交回調的Block動畫**

[UIView animateWithDuration:(NSTimeInterval)  //動畫持續(xù)時間
animations:^{
//執(zhí)行的動畫
} completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];

可以設置延時時間和過渡效果的Block動畫

[UIView animateWithDuration:(NSTimeInterval) //動畫持續(xù)時間
delay:(NSTimeInterval) //動畫延遲執(zhí)行的時間
options:(UIViewAnimationOptions) //動畫的過渡效果
animations:^{
//執(zhí)行的動畫
}                completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];

//可以組合使用
typedef enum {
   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  //轉場充边,從下向上旋轉翻頁
} UIViewAnimationOptions;

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í)行提交后的操作
}];

Keyframes動畫:iOS7.0后新增了關鍵幀動畫聋亡,支持屬性關鍵幀湖饱,不支持路徑關鍵幀

[UIView animateKeyframesWithDuration:(NSTimeInterval)//動畫持續(xù)時間
delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
options:(UIViewKeyframeAnimationOptions)//動畫的過渡效果
animations:^{
//執(zhí)行的關鍵幀動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];

//可組合使用:
typedef enum {
   UIViewAnimationOptionLayoutSubviews           //進行動畫時布局子控件
   UIViewAnimationOptionAllowUserInteraction     //進行動畫時允許用戶交互
   UIViewAnimationOptionBeginFromCurrentState    //從當前狀態(tài)開始動畫
   UIViewAnimationOptionRepeat                   //無限重復執(zhí)行動畫
   UIViewAnimationOptionAutoreverse              //執(zhí)行動畫回路
   UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設置
   UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設置
   UIViewKeyframeAnimationOptionCalculationModeLinear     //運算模式 :連續(xù)
   UIViewKeyframeAnimationOptionCalculationModeDiscrete   //運算模式 :離散
   UIViewKeyframeAnimationOptionCalculationModePaced      //運算模式 :均勻執(zhí)行
   UIViewKeyframeAnimationOptionCalculationModeCubic      //運算模式 :平滑
   UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻
} UIViewKeyframeAnimationOptions;

增加關鍵幀方法:

[UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間(占總時間的比例)

relativeDuration:(double) //動畫持續(xù)時間(占總時間的比例)

animations:^{

//執(zhí)行的動畫

}];

轉場動畫:從舊視圖到新視圖的動畫效果

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

單個視圖的過渡效果

[UIView transitionWithView:(nonnull UIView *)
duration:(NSTimeInterval)
options:(UIViewAnimationOptions)
animations:^{
//執(zhí)行的動畫
}
completion:^(BOOL finished) {
//動畫執(zhí)行提交后的操作
}];

代碼例子

[UIView animateWithDuration:3.0 animations:^{
     self.redView.center = point;
     self.redView.transform = CGAffineTransformMakeScale(1.5, 1.5);
     self.redView.transform = CGAffineTransformMakeRotation(M_PI);
} completion:^(BOOL finished) {
     [UIView animateWithDuration:2.0 animations:^{
         self.redView.frame = CGRectMake(100, 100, 100, 100);
         self.redView.transform = CGAffineTransformMakeScale(1 / 1.5,1 / 1.5);
         self.redView.transform = CGAffineTransformMakeRotation(M_PI);
     }];
}];
運行結果
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末致讥,一起剝皮案震驚了整個濱河市仅仆,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌垢袱,老刑警劉巖墓拜,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異请契,居然都是意外死亡咳榜,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門爽锥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涌韩,“玉大人,你說我怎么就攤上這事氯夷〕加#” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵腮考,是天一觀的道長雇毫。 經(jīng)常有香客問我,道長踩蔚,這世上最難降的妖魔是什么棚放? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮馅闽,結果婚禮上飘蚯,老公的妹妹穿的比我還像新娘。我一直安慰自己捞蛋,他們只是感情好孝冒,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拟杉,像睡著了一般庄涡。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上搬设,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天穴店,我揣著相機與錄音,去河邊找鬼拿穴。 笑死泣洞,一個胖子當著我的面吹牛,可吹牛的內容都是我干的默色。 我是一名探鬼主播球凰,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了呕诉?” 一聲冷哼從身側響起缘厢,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎甩挫,沒想到半個月后贴硫,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡伊者,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年英遭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片亦渗。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡挖诸,死狀恐怖,靈堂內的尸體忽然破棺而出央碟,到底是詐尸還是另有隱情税灌,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布亿虽,位于F島的核電站菱涤,受9級特大地震影響,放射性物質發(fā)生泄漏洛勉。R本人自食惡果不足惜粘秆,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望收毫。 院中可真熱鬧攻走,春花似錦、人聲如沸此再。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽输拇。三九已至摘符,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間策吠,已是汗流浹背逛裤。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留猴抹,地道東北人带族。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像蟀给,于是被迫代替她去往敵國和親蝙砌。 傳聞我的和親對象是個殘疾皇子阳堕,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內容

  • UIView動畫簡介 UIView動畫實質上是對Core Animation的封裝,提供簡潔的動畫接口择克。 UIVi...
    zhaihongxia閱讀 845評論 0 0
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫嘱丢,核心動畫,幀動畫祠饺,自定義轉場動畫。 1.UIView...
    請叫我周小帥閱讀 3,101評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果汁政,實現(xiàn)這些動畫的過程并不復雜道偷,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,113評論 5 13
  • 重點參考鏈接: View Programming Guide for iOS https://developer....
    Kevin_Junbaozi閱讀 4,450評論 0 15
  • 本以為记劈,不眨眼 便能鎖住夕陽 不揮手勺鸦,便能享受靜謐時光 可太陽,總在群峰跌落 漂浮的誓言目木,耐不住時間的鍛燒 殘缺的...
    和風戲雨閱讀 280評論 2 9