說明:此文僅為筆記，是本人根據(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)問題請及時反饋，謝謝！

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

UIView 動畫（整理筆記)

UIView 動畫（整理筆記)

一、簡介:

二:具體方法:

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

三.UIView Block 動畫

1.Block動畫方法

2.實例代碼:

四.最后

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

UIView 動畫 （整理筆記)

一、簡介:

二:具體方法:

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

三.UIView Block 動畫

1.Block動畫方法

2.實例代碼:

四.最后

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

UIView 動畫（整理筆記)