iOS學(xué)習(xí)筆記10-UIView動畫

上次學(xué)習(xí)了iOS學(xué)習(xí)筆記09-核心動畫CoreAnimation,這次繼續(xù)學(xué)習(xí)動畫矛紫,上次使用的CoreAnimation很多人感覺使用起來很繁瑣赎瞎,有沒有更加方便的動畫效果實現(xiàn)呢?答案是有的颊咬,那就是UIView動畫封裝

一务甥、UIView動畫

蘋果知道圖層動畫使用麻煩,就為我們封裝到了UIView里喳篇,使我們可以簡單的實現(xiàn)各種動畫效果敞临。

1. 基礎(chǔ)動畫

主要實現(xiàn)方法為:
+ (void)animateWithDuration:(NSTimeInterval)duration 
                      delay:(NSTimeInterval)delay
                    options:(UIViewAnimationOptions)options 
                 animations:(void (^)(void))ainimations 
                 completion:(void (^)(BOOL finished))completion;
移動動畫使用實例:
/* 
  開始動畫,UIView的動畫方法執(zhí)行完后動畫會停留在終點位置麸澜,而不需要進(jìn)行任何特殊處理
  duration:執(zhí)行時間
  delay:延遲時間
  options:動畫設(shè)置挺尿,例如自動恢復(fù)、勻速運(yùn)動等
  completion:動畫完成回調(diào)方法
*/
[UIView animateWithDuration:5.0 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    _imageView.center = location;
} completion:^(BOOL finished) {
    NSLog(@"Animation end.");
}];

上面的方法基本滿足大部分基礎(chǔ)動畫的要求,還有一種比較有趣的動畫效果

彈簧動畫效果:
/*
  創(chuàng)建彈性動畫
  damping:阻尼编矾,范圍0-1熟史,阻尼越接近于0,彈性效果越明顯
  springVelocity:彈性復(fù)位的速度
*/
[UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 
      initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{
    _imageView.center = location;
} completion:^(BOOL finished) {
    NSLog(@"Animation end.");
}];
彈簧效果

UIView動畫方法中有個options參數(shù)窄俏,是枚舉類型蹂匹,可以組合使用:

/* 常規(guī)動畫屬性設(shè)置,可以同時選擇多個凹蜈,用或運(yùn)算組合  */
UIViewAnimationOptionLayoutSubviews/*< 動畫過程中保證子視圖跟隨運(yùn)動 */          
UIViewAnimationOptionAllowUserInteraction/*< 動畫過程中允許用戶交互 */
UIViewAnimationOptionBeginFromCurrentState/*< 所有視圖從當(dāng)前狀態(tài)開始運(yùn)行 */
UIViewAnimationOptionRepeat/*< 重復(fù)運(yùn)行動畫 */                 
UIViewAnimationOptionAutoreverse/*< 動畫運(yùn)行結(jié)束后回到起始點 */             
UIViewAnimationOptionOverrideInheritedDuration/*< 忽略嵌套動畫時間設(shè)置 */ 
UIViewAnimationOptionOverrideInheritedCurve/*< 忽略嵌套動畫速度設(shè)置 */    
UIViewAnimationOptionAllowAnimatedContent/*< 動畫過程中重繪視圖限寞,只適合轉(zhuǎn)場動畫 */    
UIViewAnimationOptionShowHideTransitionViews/*< 視圖切換直接隱藏舊視圖、顯示新視圖仰坦,只適合轉(zhuǎn)場動畫 */   
UIViewAnimationOptionOverrideInheritedOptions/*< 不繼承父動畫設(shè)置或動畫類型 */  

/* 動畫速度變化控制履植,其中選一個進(jìn)行設(shè)置 */    
UIViewAnimationOptionCurveEaseInOut/*< 動畫先緩慢,后逐漸加速悄晃,默認(rèn)值 */       
UIViewAnimationOptionCurveEaseIn/*< 動畫逐漸變慢 */          
UIViewAnimationOptionCurveEaseOut/*< 動畫逐漸加速 */             
UIViewAnimationOptionCurveLinear/*< 動畫勻速執(zhí)行 */            

2. 關(guān)鍵幀動畫

主要實現(xiàn)方法為:
+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration 
                               delay:(NSTimeInterval)delay
                             options:(UIViewAnimationOptions)options 
                          animations:(void (^)(void))ainimations 
                          completion:(void (^)(BOOL finished))completion;
實例:
[UIView animateKeyframesWithDuration:5.0 delay:0 
        options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionCurveLinear animations:^{ 
    //第一個關(guān)鍵幀:從0秒開始持續(xù)50%的時間玫霎,也就是5.0*0.5=2.5秒
    [UIView addKeyframeWithRelativeStartTime:0.0 relativeDuration:0.5 animations:^{
        _imageView.center = location1;
    }];
    //第二個關(guān)鍵幀:從50%時間開始持續(xù)25%的時間,也就是5.0*0.25=1.25秒
    [UIView addKeyframeWithRelativeStartTime:0.5 relativeDuration:0.25 animations:^{
        _imageView.center = location2;
    }];
    //第三個關(guān)鍵幀:從75%時間開始持續(xù)25%的時間传泊,也就是5.0*0.25=1.25秒
    [UIView addKeyframeWithRelativeStartTime:0.75 relativeDuration:0.25 animations:^{
        _imageView.center = location3;
    }];
} completion:^(BOOL finished) {
    NSLog(@"Animation end.");
}];
關(guān)鍵幀動畫的options多了一些選擇:
/* 動畫模式選擇鼠渺,選擇一個 */
UIViewKeyframeAnimationOptionCalculationModeLinear/*< 連續(xù)運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeDiscreter/*< 離散運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModePacedr/*< 均勻執(zhí)行運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicr/*< 平滑運(yùn)算模式 */
UIViewKeyframeAnimationOptionCalculationModeCubicPacedr/*< 平滑均勻運(yùn)算模式 */
動畫模式示意圖

UIView動畫現(xiàn)在只支持屬性關(guān)鍵幀動畫,不支持路徑關(guān)鍵幀動畫

3. 轉(zhuǎn)場動畫

主要實現(xiàn)方法為:
+ (void)transitionWithView:(UIView *)view 
                  duration:(NSTimeInterval)duration 
                   options:(UIViewAnimationOptions)options 
                animations:(void (^)(void))ainimations 
                completion:(void (^)(BOOL finished))completion;
實例:
#pragma mark 轉(zhuǎn)場動畫
- (void)transitionAnimation:(BOOL)isNext{
    UIViewAnimationOptions option;
    if (isNext) {
        option = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromRight;
    } else {
        option = UIViewAnimationOptionCurveLinear | UIViewAnimationOptionTransitionFlipFromLeft;
    }
    [UIView transitionWithView:_imageView duration:1.0 options:option animations:^{
        _imageView.image = [self getImage:isNext];
    } completion:nil];
}
轉(zhuǎn)場動畫options多了一些選擇:
/* 轉(zhuǎn)場類型 */
UIViewAnimationOptionTransitionNone/*< 沒有轉(zhuǎn)場動畫效果 */
UIViewAnimationOptionTransitionFlipFromLeft/*< 從左側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromRight/*< 從右側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionCurlUp/*< 向后翻頁的動畫過渡效果 */  
UIViewAnimationOptionTransitionCurlDown/*< 向前翻頁的動畫過渡效果 */   
UIViewAnimationOptionTransitionCrossDissolve/*< 溶解消失效果 */ 
UIViewAnimationOptionTransitionFlipFromTop/*< 從上方翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromBottom/*< 從底部翻轉(zhuǎn)效果 */
  • 使用UIView動畫封裝的轉(zhuǎn)場動畫效果少眷细,這里無法直接使用私有API
  • 兩個視圖之間轉(zhuǎn)場可以使用
+ (void)transitionFromView:(UIView *)fromView 
                     toView:(UIView *)toView 
                   duration:(NSTimeInterval)duration 
                    options:(UIViewAnimationOptions)options 
                 completion:(void (^)(BOOL finished))completion;
  • 默認(rèn)情況拦盹,轉(zhuǎn)出的視圖會從父視圖移除,轉(zhuǎn)入后重新添加
轉(zhuǎn)場動畫效果圖溪椎,是不是很炫啊普舆,不過這個是CoreAnimation的
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市校读,隨后出現(xiàn)的幾起案子沼侣,更是在濱河造成了極大的恐慌,老刑警劉巖歉秫,帶你破解...
    沈念sama閱讀 212,222評論 6 493
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蛾洛,死亡現(xiàn)場離奇詭異,居然都是意外死亡雁芙,警方通過查閱死者的電腦和手機(jī)轧膘,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,455評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來兔甘,“玉大人谎碍,你說我怎么就攤上這事《幢海” “怎么了蟆淀?”我有些...
    開封第一講書人閱讀 157,720評論 0 348
  • 文/不壞的土叔 我叫張陵拯啦,是天一觀的道長。 經(jīng)常有香客問我熔任,道長褒链,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,568評論 1 284
  • 正文 為了忘掉前任笋敞,我火速辦了婚禮碱蒙,結(jié)果婚禮上荠瘪,老公的妹妹穿的比我還像新娘夯巷。我一直安慰自己,他們只是感情好哀墓,可當(dāng)我...
    茶點故事閱讀 65,696評論 6 386
  • 文/花漫 我一把揭開白布趁餐。 她就那樣靜靜地躺著,像睡著了一般篮绰。 火紅的嫁衣襯著肌膚如雪后雷。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,879評論 1 290
  • 那天吠各,我揣著相機(jī)與錄音臀突,去河邊找鬼。 笑死贾漏,一個胖子當(dāng)著我的面吹牛候学,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播纵散,決...
    沈念sama閱讀 39,028評論 3 409
  • 文/蒼蘭香墨 我猛地睜開眼梳码,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了伍掀?” 一聲冷哼從身側(cè)響起掰茶,我...
    開封第一講書人閱讀 37,773評論 0 268
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎蜜笤,沒想到半個月后濒蒋,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,220評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡把兔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,550評論 2 327
  • 正文 我和宋清朗相戀三年沪伙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片垛贤。...
    茶點故事閱讀 38,697評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡焰坪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出聘惦,到底是詐尸還是另有隱情某饰,我是刑警寧澤儒恋,帶...
    沈念sama閱讀 34,360評論 4 332
  • 正文 年R本政府宣布,位于F島的核電站黔漂,受9級特大地震影響诫尽,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜炬守,卻給世界環(huán)境...
    茶點故事閱讀 40,002評論 3 315
  • 文/蒙蒙 一牧嫉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧减途,春花似錦酣藻、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,782評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至税产,卻和暖如春怕轿,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辟拷。 一陣腳步聲響...
    開封第一講書人閱讀 32,010評論 1 266
  • 我被黑心中介騙來泰國打工撞羽, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人衫冻。 一個月前我還...
    沈念sama閱讀 46,433評論 2 360
  • 正文 我出身青樓诀紊,卻偏偏與公主長得像,于是被迫代替她去往敵國和親羽杰。 傳聞我的和親對象是個殘疾皇子渡紫,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,587評論 2 350

推薦閱讀更多精彩內(nèi)容

  • 前言的前言 唐巧前輩在微信公眾號「iOSDevTips」以及其博客上推送了我的文章后,我的 Github 各項指標(biāo)...
    VincentHK閱讀 5,349評論 3 44
  • 在iOS中隨處都可以看到絢麗的動畫效果考赛,實現(xiàn)這些動畫的過程并不復(fù)雜惕澎,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 概覽 在iOS中隨處都可以看到絢麗的動畫效果颜骤,實現(xiàn)這些動畫的過程并不復(fù)雜唧喉,今天將帶大家一窺iOS動畫全貌。在這里你...
    Yiart閱讀 3,799評論 3 34
  • 在iOS中隨處都可以看到絢麗的動畫效果忍抽,實現(xiàn)這些動畫的過程并不復(fù)雜八孝,今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,104評論 5 13
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫鸠项,核心動畫干跛,幀動畫楼入,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,082評論 1 23