iOS學(xué)習(xí)筆記10-UIView動(dòng)畫(huà)

上次學(xué)習(xí)了iOS學(xué)習(xí)筆記09-核心動(dòng)畫(huà)CoreAnimation,這次繼續(xù)學(xué)習(xí)動(dòng)畫(huà),上次使用的CoreAnimation很多人感覺(jué)使用起來(lái)很繁瑣,有沒(méi)有更加方便的動(dòng)畫(huà)效果實(shí)現(xiàn)呢?答案是有的,那就是UIView動(dòng)畫(huà)封裝

一、UIView動(dòng)畫(huà)

蘋(píng)果知道圖層動(dòng)畫(huà)使用麻煩,就為我們封裝到了UIView里,使我們可以簡(jiǎn)單的實(shí)現(xiàn)各種動(dòng)畫(huà)效果。

1. 基礎(chǔ)動(dòng)畫(huà)

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

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

彈簧動(dòng)畫(huà)效果:
/*
  創(chuàng)建彈性動(dòng)畫(huà)
  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動(dòng)畫(huà)方法中有個(gè)options參數(shù),是枚舉類型,可以組合使用:

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

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

2. 關(guān)鍵幀動(dòng)畫(huà)

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

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

3. 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

主要實(shí)現(xiàn)方法為:
+ (void)transitionWithView:(UIView *)view 
                  duration:(NSTimeInterval)duration 
                   options:(UIViewAnimationOptions)options 
                animations:(void (^)(void))ainimations 
                completion:(void (^)(BOOL finished))completion;
實(shí)例:
#pragma mark 轉(zhuǎn)場(chǎng)動(dòng)畫(huà)
- (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)場(chǎng)動(dòng)畫(huà)options多了一些選擇:
/* 轉(zhuǎn)場(chǎng)類型 */
UIViewAnimationOptionTransitionNone/*< 沒(méi)有轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果 */
UIViewAnimationOptionTransitionFlipFromLeft/*< 從左側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromRight/*< 從右側(cè)翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionCurlUp/*< 向后翻頁(yè)的動(dòng)畫(huà)過(guò)渡效果 */  
UIViewAnimationOptionTransitionCurlDown/*< 向前翻頁(yè)的動(dòng)畫(huà)過(guò)渡效果 */   
UIViewAnimationOptionTransitionCrossDissolve/*< 溶解消失效果 */ 
UIViewAnimationOptionTransitionFlipFromTop/*< 從上方翻轉(zhuǎn)效果 */
UIViewAnimationOptionTransitionFlipFromBottom/*< 從底部翻轉(zhuǎn)效果 */
  • 使用UIView動(dòng)畫(huà)封裝的轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果少,這里無(wú)法直接使用私有API
  • 兩個(gè)視圖之間轉(zhuǎn)場(chǎng)可以使用
+ (void)transitionFromView:(UIView *)fromView 
                     toView:(UIView *)toView 
                   duration:(NSTimeInterval)duration 
                    options:(UIViewAnimationOptions)options 
                 completion:(void (^)(BOOL finished))completion;
  • 默認(rèn)情況,轉(zhuǎn)出的視圖會(huì)從父視圖移除,轉(zhuǎn)入后重新添加
轉(zhuǎn)場(chǎng)動(dòng)畫(huà)效果圖,是不是很炫啊,不過(guò)這個(gè)是CoreAnimation的
最后編輯于
?著作權(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)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

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

  • 前言的前言 唐巧前輩在微信公眾號(hào)「iOSDevTips」以及其博客上推送了我的文章后,我的 Github 各項(xiàng)指標(biāo)...
    VincentHK閱讀 5,580評(píng)論 3 44
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺ios動(dòng)畫(huà)全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,695評(píng)論 6 30
  • 概覽 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你...
    Yiart閱讀 3,967評(píng)論 3 34
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫(huà)效果,實(shí)現(xiàn)這些動(dòng)畫(huà)的過(guò)程并不復(fù)雜,今天將帶大家一窺iOS動(dòng)畫(huà)全貌。在這里你可以看...
    F麥子閱讀 5,270評(píng)論 5 13
  • 在iOS實(shí)際開(kāi)發(fā)中常用的動(dòng)畫(huà)無(wú)非是以下四種:UIView動(dòng)畫(huà),核心動(dòng)畫(huà),幀動(dòng)畫(huà),自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,326評(píng)論 1 23

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