UIView 動畫 (整理筆記)

說明:此文僅為筆記,是本人根據(jù)參考他人自己總結(jié)的一些東西,查閱原文請戳這里:
iOS動畫篇:UIView動畫

彈珠.jpg

一、簡介:

UIView 動畫實質(zhì)是對Core Animation的封裝,提供簡潔的動畫接口:

UIView動畫可以設(shè)置動畫的屬性有:

  • 大小變化 (frame)
  • 拉伸變化 (bounds)
  • 中心位置 (center)
  • 旋轉(zhuǎn) (transform)
  • 透明度 (alpha)
  • 背景色 (backgroundColor)
  • 拉伸內(nèi)容 (contentStretch)

二:具體方法:

1.動畫開始和結(jié)束方法:

A.動畫開始標(biāo)記:

    // 第一個參數(shù): 動畫標(biāo)識
    // 第二個參數(shù): 附加參數(shù),在設(shè)置代理情況下,此參數(shù)將發(fā)送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法,大部分情況,設(shè)置為nil.
    [UIView beginAnimations:(nullable NSString *) context:(nullable void *)];

B.結(jié)束動畫標(biāo)記:

    [UIView commitAnimations];

####2.動畫參數(shù)的設(shè)置方法:

    //動畫持續(xù)時間
    [UIView setAnimationDuration:(NSTimeInterval)];
//動畫的代理對象 
[UIView setAnimationDelegate:(nullable id)];

    //設(shè)置動畫將開始時代理對象執(zhí)行的SEL
    [UIView setAnimationWillStartSelector:(nullable SEL)];
//設(shè)置動畫延遲執(zhí)行的時間
[UIView setAnimationDelay:(NSTimeInterval)];

        //設(shè)置動畫的重復(fù)次數(shù)
    [UIView setAnimationRepeatCount:(float)];
//設(shè)置動畫的曲線
[UIView setAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve的枚舉值如下:
UIViewAnimationCurveEaseInOut,         // 慢進(jìn)慢出(默認(rèn)值)
UIViewAnimationCurveEaseIn,            // 慢進(jìn)
UIViewAnimationCurveEaseOut,           // 慢出
UIViewAnimationCurveLinear             // 勻速

    //設(shè)置是否從當(dāng)前狀態(tài)開始播放動畫
    [UIView setAnimationBeginsFromCurrentState:YES];
    假設(shè)上一個動畫正在播放,且尚未播放完畢,我們將要進(jìn)行一個新的動畫:
    當(dāng)為YES時:動畫將從上一個動畫所在的狀態(tài)開始播放
    當(dāng)為NO時:動畫將從上一個動畫所指定的最終狀態(tài)開始播放(此時上一個動畫馬上結(jié)束)
//設(shè)置動畫是否繼續(xù)執(zhí)行相反的動畫
[UIView setAnimationRepeatAutoreverses:(BOOL)];   

    //是否禁用動畫效果(對象屬性依然會被改變,只是沒有動畫效果)
    [UIView setAnimationsEnabled:(BOOL)];
//設(shè)置視圖的過渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
 第一個參數(shù):UIViewAnimationTransition的枚舉值如下
     UIViewAnimationTransitionNone,              //不使用動畫
     UIViewAnimationTransitionFlipFromLeft,      //從左向右旋轉(zhuǎn)翻頁
     UIViewAnimationTransitionFlipFromRight,     //從右向左旋轉(zhuǎn)翻頁
     UIViewAnimationTransitionCurlUp,            //從下往上卷曲翻頁
     UIViewAnimationTransitionCurlDown,          //從上往下卷曲翻頁
 第二個參數(shù):需要過渡效果的View
 第三個參數(shù):是否使用視圖緩存,YES:視圖在開始和結(jié)束時渲染一次;NO:視圖在每一幀都渲染
####3.實例代碼:
A.初始化代碼:
#import "ViewController.h"

@interface ViewController ()
// 積分 view
@property (nonatomic, strong) UIImageView *integralView;
// 卡券 view
@property (nonatomic, strong) UIImageView *cartCenterView;
// 簽到 view
@property (nonatomic, strong) UIImageView *signInView;
@end
    @implementation ViewController

    #pragma mark --- life circle

    - (void)viewDidLoad {
    
        [super viewDidLoad];
    
        [self.view addSubview:self.signInView];
    
        [self.view addSubview:self.cartCenterView];
    
        [self.view addSubview:self.integralView];
    
        self.view.backgroundColor = [UIColor whiteColor];
    
    }
#pragma mark --- getter and setter
// 簽到 view
- (UIImageView *)signInView {
    if (!_signInView) {
        CGFloat signInViewX = 60;
        CGFloat signInViewY = 120;
        CGFloat signInViewWidth = self.view.frame.size.width - (2 * signInViewX);
        CGFloat signInViewHeight = 100.0f;
   
        _signInView = [[UIImageView alloc] initWithFrame:CGRectMake(signInViewX, signInViewY, signInViewWidth, signInViewHeight)];
        _signInView.clipsToBounds = YES;
        _signInView.contentMode = UIViewContentModeScaleAspectFill;
        _signInView.image = [UIImage imageNamed:@"default_user_icon.png"];
    }
    return _signInView;
}

// 卡券 view
- (UIImageView *)cartCenterView {
    if (!_cartCenterView) {
    
        CGFloat cartCenterViewX = CGRectGetMinX(self.signInView.frame);
        CGFloat cartCenterViewY = CGRectGetMaxY(self.signInView.frame) + 10;
        CGFloat cartCenterViewWidth = self.signInView.frame.size.width/2.0;
        CGFloat cartCenterViewHeight = 60.0f;
 
        _cartCenterView = [[UIImageView alloc] initWithFrame:CGRectMake(cartCenterViewX, cartCenterViewY, cartCenterViewWidth, cartCenterViewHeight)];
        _cartCenterView.contentMode = UIViewContentModeScaleAspectFill;
        _cartCenterView.clipsToBounds = YES;
    _cartCenterView.image = [UIImage imageNamed:@"icon_gouwuche.png"];
    }
    return _cartCenterView;
}

// 積分
- (UIImageView *)integralView {
    if (!_integralView) {
        CGFloat integralViewX = CGRectGetMaxX(self.cartCenterView.frame);
        CGFloat integralViewY = CGRectGetMinY(self.cartCenterView.frame);
        CGFloat integralViewWidth = self.signInView.frame.size.width/2.0;
        CGFloat integralViewHeight = self.cartCenterView.frame.size.height;
    
        _integralView = [[UIImageView alloc] initWithFrame:CGRectMake(integralViewX, integralViewY, integralViewWidth, integralViewHeight)];
        _integralView.clipsToBounds = YES;
    _integralView.contentMode = UIViewContentModeScaleAspectFill;
        _integralView.image = [UIImage imageNamed:@"home_dingdan.png"];
    }
    return _integralView;
}

B.屬性變化動畫(以frame變化為例子):

// 改變 frame
- (void)changeFrame {
    [UIView beginAnimations:@"FrameAni" context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(startAni:)];
    [UIView setAnimationDidStopSelector:@selector(stopAni:)];
    [UIView setAnimationRepeatCount:1.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    self.cartCenterView.frame = self.signInView.frame;
    [UIView commitAnimations];
}

// 開始 動畫
- (void)startAni:(NSString *)aniId {
    NSLog(@"%@ start",aniId);
}

// 結(jié)束 動畫
- (void)stopAni:(NSString *)aniId {
    NSLog(@"%@ stop",aniId);
}

效果圖:

UIViewChangeFrame.gif

C.轉(zhuǎn)場動畫效果(以Flip和curUp效果為例)

// 轉(zhuǎn)成動畫 (flip)
- (void)filpAnimation {
    [UIView beginAnimations:@"FlipAnimation" context:nil];
    [UIView setAnimationDuration:2.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(startAni:)];
    [UIView setAnimationDidStopSelector:@selector(stopAni:)];
    [UIView setAnimationRepeatCount:1.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.signInView cache:YES];
    self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
    [UIView commitAnimations];
}

效果圖:

UIViewFlipAnimation.gif
// 轉(zhuǎn)場動畫 (curUp) (self.view)
- (void)curUpControllerViewAnimation {
    [UIView beginAnimations:@"FlipAnimation" context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(startAni:)];
    [UIView setAnimationDidStopSelector:@selector(stopAni:)];
    [UIView setAnimationRepeatCount:1.0];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];
    self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
    [UIView commitAnimations];
}

效果圖:


UIViewCurUpAnimation.gif

三.UIView Block 動畫

iOS4.0以后增加了Block動畫塊,提供了更簡潔的方式來實現(xiàn)動畫.

1.Block動畫方法

A.最簡潔的Block動畫:包含時間和動畫

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

B.帶有動畫完成回調(diào)的Block動畫

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

C.可以設(shè)置延時時間和過渡效果的Block動畫

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

UIViewAnimationOptions的枚舉值如下,可組合使用:

 UIViewAnimationOptionLayoutSubviews            //進(jìn)行動畫時布局子控件
 UIViewAnimationOptionAllowUserInteraction      //進(jìn)行動畫時允許用戶交互
 UIViewAnimationOptionBeginFromCurrentState     //從當(dāng)前狀態(tài)開始動畫
 UIViewAnimationOptionRepeat                    //無限重復(fù)執(zhí)行動畫
 UIViewAnimationOptionAutoreverse               //執(zhí)行動畫回路
 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設(shè)置
 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套動畫的曲線設(shè)置
 UIViewAnimationOptionAllowAnimatedContent      //轉(zhuǎn)場:進(jìn)行動畫時重繪視圖
 UIViewAnimationOptionShowHideTransitionViews   //轉(zhuǎn)場:移除(添加和移除圖層的)動畫效果
 UIViewAnimationOptionOverrideInheritedOptions  //不繼承父動畫設(shè)置

 UIViewAnimationOptionCurveEaseInOut            //時間曲線,慢進(jìn)慢出(默認(rèn)值)
 UIViewAnimationOptionCurveEaseIn               //時間曲線,慢進(jìn)
 UIViewAnimationOptionCurveEaseOut              //時間曲線,慢出
 UIViewAnimationOptionCurveLinear               //時間曲線,勻速

 UIViewAnimationOptionTransitionNone            //轉(zhuǎn)場,不使用動畫
 UIViewAnimationOptionTransitionFlipFromLeft    //轉(zhuǎn)場,從左向右旋轉(zhuǎn)翻頁
 UIViewAnimationOptionTransitionFlipFromRight   //轉(zhuǎn)場,從右向左旋轉(zhuǎn)翻頁
 UIViewAnimationOptionTransitionCurlUp          //轉(zhuǎn)場,下往上卷曲翻頁
 UIViewAnimationOptionTransitionCurlDown        //轉(zhuǎn)場,從上往下卷曲翻頁
 UIViewAnimationOptionTransitionCrossDissolve   //轉(zhuǎn)場,交叉消失和出現(xiàn)
 UIViewAnimationOptionTransitionFlipFromTop     //轉(zhuǎn)場,從上向下旋轉(zhuǎn)翻頁
 UIViewAnimationOptionTransitionFlipFromBottom  //轉(zhuǎn)場,從下向上旋轉(zhuǎn)翻頁

D.Spring動畫
iOS7.0以后新增了Spring動畫(iOS系統(tǒng)動畫大部分采用Spring Animation, 適用所有可被添加動畫效果的屬性)

     [UIView anima
teWithDuration:(NSTimeInterval)//動畫持續(xù)時間
                       delay:(NSTimeInterval)//動畫延遲執(zhí)行的時間
      usingSpringWithDamping:(CGFloat)//震動效果,范圍0~1,數(shù)值越小震動效果越明顯
       initialSpringVelocity:(CGFloat)//初始速度,數(shù)值越大初始速度越快
                     options:(UIViewAnimationOptions)//動畫的過渡效果
                  animations:^{
                     //執(zhí)行的動畫
     }
                      completion:^(BOOL finished) {
                     //動畫執(zhí)行完畢后的操作
     }];

E.Keyframes動畫
IOS7.0后新增了關(guān)鍵幀動畫,支持屬性關(guān)鍵幀,不支持路徑關(guān)鍵幀

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

UIViewKeyframeAnimationOptions的枚舉值如下,可組合使用:

UIViewAnimationOptionLayoutSubviews           //進(jìn)行動畫時布局子控件
UIViewAnimationOptionAllowUserInteraction     //進(jìn)行動畫時允許用戶交互
UIViewAnimationOptionBeginFromCurrentState    //從當(dāng)前狀態(tài)開始動畫
UIViewAnimationOptionRepeat                   //無限重復(fù)執(zhí)行動畫
UIViewAnimationOptionAutoreverse              //執(zhí)行動畫回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套動畫的執(zhí)行時間設(shè)置
UIViewAnimationOptionOverrideInheritedOptions //不繼承父動畫設(shè)置

UIViewKeyframeAnimationOptionCalculationModeLinear     //運算模式 :連續(xù)
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //運算模式 :離散
UIViewKeyframeAnimationOptionCalculationModePaced      //運算模式 :均勻執(zhí)行
UIViewKeyframeAnimationOptionCalculationModeCubic      //運算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //運算模式 :平滑均勻

各種運算模式的直觀比較如下圖:


UIViewKeyframeAnimationOptions效果對比圖.png

增加關(guān)鍵幀方法:

[UIView addKeyframeWithRelativeStartTime:(double)//動畫開始的時間(占總時間的比例)
                     relativeDuration:(double) //動畫持續(xù)時間(占總時間的比例)
                           animations:^{
                         //執(zhí)行的動畫
 }];

F.轉(zhuǎn)場動畫:
a.從舊視圖到新視圖的動畫效果

[UIView transitionFromView:(nonnull UIView *)
                 toView:(nonnull UIView *)
               duration:(NSTimeInterval)
                options:(UIViewAnimationOptions)
             completion:^(BOOL finished) {
                 //動畫執(zhí)行完畢后的操作
 }];

在該動畫過程中,fromView 會從父視圖中移除,并將 toView 添加到父視圖中,注意轉(zhuǎn)場動畫的作用對象是父視圖(過渡效果體現(xiàn)在父視圖上)。調(diào)用該方法相當(dāng)于執(zhí)行下面兩句代碼:

[fromView.superview addSubview:toView];
[fromView removeFromSuperview];

b.單個視圖的過渡效果

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

2.實例代碼:

A.最簡潔的Block動畫:包含時間和動畫:

 // 改變 frame (時間和動畫)
- (void)blockChangeFrame {
    [UIView animateWithDuration:1.0 animations:^{
        self.cartCenterView.frame = self.signInView.frame;
    }];
}

效果圖:


UIViewBlockChangeFrame.gif

B.帶有動畫完成回調(diào)的Block動畫

 // 改變 frame (時間、動畫、完成回調(diào))
- (void)blockChangeFrameWithComplete {
    CGRect originalFrame = self.cartCenterView.frame;
    [UIView animateWithDuration:1.0 animations:^{
         self.cartCenterView.frame = self.signInView.frame;
    }completion:^(BOOL finished) {
         self.cartCenterView.frame = originalFrame;
    }];
}

效果圖:


UIViewBlockChangeFrameWithComplete.gif

C.設(shè)置延時時間和過渡效果的Block動畫

// 改變 frame (時間、延遲時間、過渡動畫、完成回調(diào))
- (void)blockChangeFrameWithDelayTimeAndComplete {
    CGRect originalFrame = self.cartCenterView.frame;
   [UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
       self.cartCenterView.frame = self.signInView.frame;
   } completion:^(BOOL finished) {
       self.cartCenterView.frame = originalFrame;
   }];
}

效果圖:


UIViewBlockChangeFrameWithDelayTimeAndComplete.gif

D..Spring動畫

    // 彈簧動畫
    - (void)blockChangeFrameWithSpringAnimation {
        [UIView animateWithDuration:1.0 delay:0.5 usingSpringWithDamping:0.01 initialSpringVelocity:10.0f options:UIViewAnimationOptionCurveEaseInOut animations:^{
            self.cartCenterView.frame = self.signInView.frame;
        } completion:^(BOOL finished) {
            self.cartCenterView.hidden = YES;
        }];
    }

效果圖:


UIViewBlockChangeFrameWithSpringAnimtion.gif

E.Keyframes動畫

    // 關(guān)鍵 幀 放大 動畫
    - (void)blockAmplifyAnimation {
        self.signInView.transform = CGAffineTransformIdentity;
        self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
        [UIView animateKeyframesWithDuration:1.5 delay:0 options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
            [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1/3.0 animations:^{
                self.signInView.transform = CGAffineTransformMakeScale(1.5, 1.5);
            }];
        
            [UIView addKeyframeWithRelativeStartTime:1/3.0 relativeDuration:1/3.0 animations:^{
                self.signInView.transform = CGAffineTransformMakeScale(0.8, 0.8);
            }];
        
            [UIView addKeyframeWithRelativeStartTime:2/3.0 relativeDuration:1/3.0 animations:^{
                self.signInView.transform = CGAffineTransformMakeScale(1.0, 1.0);
            }];

        } completion:^(BOOL finished) {
            NSLog(@"動畫結(jié)束");
        }];
    }

效果圖:


UIViewBlockKeyframeAmplyAnimation.gif

F.單個視圖的轉(zhuǎn)場動畫

    // 轉(zhuǎn)場 動畫 單個 視圖 過渡 效果
    - (void)blockTransitionWithSingleViewAnimation {
        [UIView transitionWithView:self.signInView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
            self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
        } completion:^(BOOL finished) {
            NSLog(@"動畫結(jié)束");
           self.view.backgroundColor = [UIColor lightGrayColor];
    }];
}

效果圖:


UIViewBlockSingleTransitionAnimation.gif

G.從舊視圖到新視圖的轉(zhuǎn)場動畫

    // 轉(zhuǎn)場 動畫 (舊視圖 到 新 視圖)
    - (void)blockTransitionFromViewToViewAnimation {
        UIImageView *tmpNewImageView = [[UIImageView alloc] initWithFrame:self.signInView.frame];
        tmpNewImageView.image = [UIImage imageNamed:@"serviceActivity.png"];
        [UIView transitionFromView:self.signInView toView:tmpNewImageView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
             NSLog(@"動畫結(jié)束");
            self.view.backgroundColor = [UIColor lightGrayColor];
        }];
    }

效果圖:


UIViewBlockTransitionFromViewToViewAnimation.gif

四.最后

送上一張喜歡的圖片:

世界.jpg

這是gitHub鏈接地址:UIViewAnimation,大家有興趣可以看一下,如果覺得不錯,麻煩給個喜歡或star,若發(fā)現(xiàn)問題請及時反饋,謝謝!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,200評論 4 61
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種:UIView動畫,核心動畫,幀動畫,自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,142評論 1 23
  • 在iOS中隨處都可以看到絢麗的動畫效果,實現(xiàn)這些動畫的過程并不復(fù)雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,551評論 6 30
  • 一晃三年。閉上眼睛,2012年的7月,驚心動魄的宗親工作的吧臺詞窮的宗親工作群規(guī)律所有人員外了么事情做橋梁施工圖的...
    就是一男人閱讀 293評論 0 0
  • 當(dāng)一個沒有脾氣的人 真是一點都不搖滾
    heim_dn閱讀 263評論 0 0