UIView 动画 （整理笔记)

说明:此文仅为笔记，是本人根据参考他人自己总结的一些东西，查阅原文请戳这里:
iOS动画篇：UIView动画

弹珠.jpg

一、简介:

UIView 动画实质是对Core Animation的封装，提供简洁的动画接口:

UIView动画可以设置动画的属性有:

• 大小变化 (frame)
• 拉伸变化 (bounds)
• 中心位置 (center)
• 旋转 (transform)
• 透明度 (alpha)
• 背景色 (backgroundColor)
• 拉伸内容 (contentStretch)

二:具体方法:

1.动画开始和结束方法:

A.动画开始标记:

    // 第一个参数: 动画标识
    // 第二个参数: 附加参数,在设置代理情况下，此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法，大部分情况，设置为nil.
    [UIView beginAnimations:(nullable NSString *) context:(nullable void *)];

B.结束动画标记:

    [UIView commitAnimations];

####2.动画参数的设置方法:

    //动画持续时间
    [UIView setAnimationDuration:(NSTimeInterval)];

//动画的代理对象 
[UIView setAnimationDelegate:(nullable id)];

    //设置动画将开始时代理对象执行的SEL
    [UIView setAnimationWillStartSelector:(nullable SEL)];

//设置动画延迟执行的时间
[UIView setAnimationDelay:(NSTimeInterval)];

        //设置动画的重复次数
    [UIView setAnimationRepeatCount:(float)];

//设置动画的曲线
[UIView setAnimationCurve:(UIViewAnimationCurve)];
UIViewAnimationCurve的枚举值如下：
UIViewAnimationCurveEaseInOut,         // 慢进慢出（默认值）
UIViewAnimationCurveEaseIn,            // 慢进
UIViewAnimationCurveEaseOut,           // 慢出
UIViewAnimationCurveLinear             // 匀速

    //设置是否从当前状态开始播放动画
    [UIView setAnimationBeginsFromCurrentState:YES];
    假设上一个动画正在播放，且尚未播放完毕，我们将要进行一个新的动画：
    当为YES时：动画将从上一个动画所在的状态开始播放
    当为NO时：动画将从上一个动画所指定的最终状态开始播放（此时上一个动画马上结束）

//设置动画是否继续执行相反的动画
[UIView setAnimationRepeatAutoreverses:(BOOL)];   

    //是否禁用动画效果（对象属性依然会被改变，只是没有动画效果）
    [UIView setAnimationsEnabled:(BOOL)];

//设置视图的过渡效果
[UIView setAnimationTransition:(UIViewAnimationTransition) forView:(nonnull UIView *) cache:(BOOL)];
 第一个参数：UIViewAnimationTransition的枚举值如下
     UIViewAnimationTransitionNone,              //不使用动画
     UIViewAnimationTransitionFlipFromLeft,      //从左向右旋转翻页
     UIViewAnimationTransitionFlipFromRight,     //从右向左旋转翻页
     UIViewAnimationTransitionCurlUp,            //从下往上卷曲翻页
     UIViewAnimationTransitionCurlDown,          //从上往下卷曲翻页
 第二个参数：需要过渡效果的View
 第三个参数：是否使用视图缓存，YES：视图在开始和结束时渲染一次；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);
}

// 结束 动画
- (void)stopAni:(NSString *)aniId {
    NSLog(@"%@ stop",aniId);
}

效果图:

UIViewChangeFrame.gif

C.转场动画效果(以Flip和curUp效果为例)

// 转成动画 (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

// 转场动画 (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动画块，提供了更简洁的方式来实现动画.

1.Block动画方法

A.最简洁的Block动画:包含时间和动画

[UIView animateWithDuration:(NSTimeInterval)  //动画持续时间
              animations:^{
              //执行的动画
 }];

B.带有动画完成回调的Block动画

 [UIView animateWithDuration:(NSTimeInterval)  //动画持续时间
              animations:^{
            //执行的动画
 }                completion:^(BOOL finished) {
            //动画执行完毕后的操作
 }];

C.可以设置延时时间和过渡效果的Block动画

[UIView animateWithDuration:(NSTimeInterval) //动画持续时间
                   delay:(NSTimeInterval) //动画延迟执行的时间
                 options:(UIViewAnimationOptions) //动画的过渡效果
              animations:^{
               //执行的动画
 }                completion:^(BOOL finished) {
               //动画执行完毕后的操作
 }];

UIViewAnimationOptions的枚举值如下,可组合使用:

 UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件
 UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互
 UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
 UIViewAnimationOptionRepeat                    //无限重复执行动画
 UIViewAnimationOptionAutoreverse               //执行动画回路
 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置
 UIViewAnimationOptionAllowAnimatedContent      //转场：进行动画时重绘视图
 UIViewAnimationOptionShowHideTransitionViews   //转场：移除（添加和移除图层的）动画效果
 UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置

 UIViewAnimationOptionCurveEaseInOut            //时间曲线，慢进慢出（默认值）
 UIViewAnimationOptionCurveEaseIn               //时间曲线，慢进
 UIViewAnimationOptionCurveEaseOut              //时间曲线，慢出
 UIViewAnimationOptionCurveLinear               //时间曲线，匀速

 UIViewAnimationOptionTransitionNone            //转场，不使用动画
 UIViewAnimationOptionTransitionFlipFromLeft    //转场，从左向右旋转翻页
 UIViewAnimationOptionTransitionFlipFromRight   //转场，从右向左旋转翻页
 UIViewAnimationOptionTransitionCurlUp          //转场，下往上卷曲翻页
 UIViewAnimationOptionTransitionCurlDown        //转场，从上往下卷曲翻页
 UIViewAnimationOptionTransitionCrossDissolve   //转场，交叉消失和出现
 UIViewAnimationOptionTransitionFlipFromTop     //转场，从上向下旋转翻页
 UIViewAnimationOptionTransitionFlipFromBottom  //转场，从下向上旋转翻页

D.Spring动画
iOS7.0以后新增了Spring动画(iOS系统动画大部分采用Spring Animation， 适用所有可被添加动画效果的属性)

     [UIView anima
teWithDuration:(NSTimeInterval)//动画持续时间
                       delay:(NSTimeInterval)//动画延迟执行的时间
      usingSpringWithDamping:(CGFloat)//震动效果，范围0~1，数值越小震动效果越明显
       initialSpringVelocity:(CGFloat)//初始速度，数值越大初始速度越快
                     options:(UIViewAnimationOptions)//动画的过渡效果
                  animations:^{
                     //执行的动画
     }
                      completion:^(BOOL finished) {
                     //动画执行完毕后的操作
     }];

E.Keyframes动画
IOS7.0后新增了关键帧动画，支持属性关键帧，不支持路径关键帧

 [UIView animateKeyframesWithDuration:(NSTimeInterval)//动画持续时间
                            delay:(NSTimeInterval)//动画延迟执行的时间
                          options:(UIViewKeyframeAnimationOptions)//动画的过渡效果
                       animations:^{
                     //执行的关键帧动画
 }
                       completion:^(BOOL finished) {
                     //动画执行完毕后的操作
 }];

UIViewKeyframeAnimationOptions的枚举值如下，可组合使用：

UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画
UIViewAnimationOptionRepeat                   //无限重复执行动画
UIViewAnimationOptionAutoreverse              //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置

UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀

各种运算模式的直观比较如下图：

UIViewKeyframeAnimationOptions效果对比图.png

增加关键帧方法:

[UIView addKeyframeWithRelativeStartTime:(double)//动画开始的时间（占总时间的比例）
                     relativeDuration:(double) //动画持续时间（占总时间的比例）
                           animations:^{
                         //执行的动画
 }];

F.转场动画:
a.从旧视图到新视图的动画效果

[UIView transitionFromView:(nonnull UIView *)
                 toView:(nonnull UIView *)
               duration:(NSTimeInterval)
                options:(UIViewAnimationOptions)
             completion:^(BOOL finished) {
                 //动画执行完毕后的操作
 }];

在该动画过程中，fromView 会从父视图中移除，并将 toView 添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）。调用该方法相当于执行下面两句代码：

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

b.单个视图的过渡效果

[UIView transitionWithView:(nonnull UIView *)
               duration:(NSTimeInterval)
                options:(UIViewAnimationOptions)
             animations:^{
             //执行的动画
 }
             completion:^(BOOL finished) {
             //动画执行完毕后的操作
 }];

2.实例代码:

A.最简洁的Block动画:包含时间和动画：

 // 改变 frame （时间和动画）
- (void)blockChangeFrame {
    [UIView animateWithDuration:1.0 animations:^{
        self.cartCenterView.frame = self.signInView.frame;
    }];
}

效果图:

UIViewBlockChangeFrame.gif

B.带有动画完成回调的Block动画

 // 改变 frame （时间、动画、完成回调）
- (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.设置延时时间和过渡效果的Block动画

// 改变 frame （时间、延迟时间、过渡动画、完成回调）
- (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动画

    // 关键 帧 放大 动画
    - (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(@"动画结束");
        }];
    }

效果图:

UIViewBlockKeyframeAmplyAnimation.gif

F.单个视图的转场动画

    // 转场 动画 单个 视图 过渡 效果
    - (void)blockTransitionWithSingleViewAnimation {
        [UIView transitionWithView:self.signInView duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
            self.signInView.image = [UIImage imageNamed:@"serviceActivity.png"];
        } completion:^(BOOL finished) {
            NSLog(@"动画结束");
           self.view.backgroundColor = [UIColor lightGrayColor];
    }];
}

效果图:

UIViewBlockSingleTransitionAnimation.gif

G.从旧视图到新视图的转场动画

    // 转场 动画 (旧视图 到 新 视图)
    - (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(@"动画结束");
            self.view.backgroundColor = [UIColor lightGrayColor];
        }];
    }

效果图:

UIViewBlockTransitionFromViewToViewAnimation.gif

四.最后

送上一张喜欢的图片:

世界.jpg

这是gitHub链接地址:UIViewAnimation,大家有兴趣可以看一下，如果觉得不错，麻烦给个喜欢或star,若发现问题请及时反馈，谢谢！