iOS动画篇：UIView动画

作者: 明仔Su | 来源:发表于2016-04-21 11:19 被阅读17293次

iOS的动画效果一直都很棒很，给人的感觉就是很炫酷很流畅，起到增强用户体验的作用。在APP开发中实现动画效果有很多种方式，对于简单的应用场景，我们可以使用UIKit提供的动画来实现。

UIView动画简介

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

UIView动画可以设置的动画属性有:
1、大小变化(frame)
2、拉伸变化(bounds)
3、中心位置(center)
4、旋转(transform)
5、透明度(alpha)
6、背景颜色(backgroundColor)
7、拉伸内容(contentStretch)

UIview 类方法动画

1）动画的开始和结束方法

1.1 动画开始标记

[UIView beginAnimations:(nullable NSString *) context:(nullable void *)];

第一个参数：动画标识
第二个参数：附加参数，在设置了代理的情况下，此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下，我们设置为nil即可。

1.2 结束动画标记

    [UIView commitAnimations];

2）动画参数的设置方法

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

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

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

    //设置动画结束时代理对象执行的SEL
    [UIView setAnimationDidStopSelector:(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）实例代码：

1、属性变化动画（以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];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    self.cartCenter.frame = self.centerShow.frame;
    [UIView commitAnimations];
}

- (void)startAni:(NSString *)aniID {
    NSLog(@"%@ start",aniID);
}

- (void)stopAni:(NSString *)aniID {
    NSLog(@"%@ stop",aniID);
}

动画效果：

NormalAni.gif

2、转场效果动画（以Flip效果为例）

- (void)flipAni {
    [UIView beginAnimations:@"FlipAni" context:nil];
    [UIView setAnimationDuration:1.0];
    [UIView setAnimationDelegate:self];
    [UIView setAnimationWillStartSelector:@selector(startAni:)];
    [UIView setAnimationDidStopSelector:@selector(stopAni:)];
    [UIView setAnimationRepeatCount:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.centerShow cache:YES];
    self.centerShow.image = [UIImage imageNamed:@"service"];
    [UIView commitAnimations];
}

动画效果：

ScreenTransitionAni.gif

UIview Block动画

iOS4.0以后，增加了Block动画块，提供更简洁的方式来实现动画。

1）Block动画方法

1、最简洁的Block动画：包含时间和动画

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

2、带有动画完成回调的Block动画

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

3、可设置延迟时间和过渡效果的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  //转场，从下向上旋转翻页

4、Spring动画
iOS7.0后新增Spring动画（iOS系统动画大部分采用Spring Animation，适用于所有可被添加动画效果的属性）

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

5、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 //运算模式 :平滑均匀

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

图片来源网络.png

增加关键帧的方法：

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

6、转场动画
6.1 从旧视图转到新视图的动画效果

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

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

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

6.2 单个视图的过渡效果

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

2）实例代码：

1、普通动画
下面三段代码都实现了相同的视图frame的变化，不同之处只在于其延迟时间、过渡效果和结束回调。

- (void)blockAni1 {
    [UIView animateWithDuration:1.0 animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    }];
}

- (void)blockAni2 {
    [UIView animateWithDuration:1.0 animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}

- (void)blockAni3 {
    [UIView animateWithDuration:1.0 delay:1.0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}

动画效果：

NormalAni.gif

2、Spring动画

- (void)blockAni4 {
    [UIView animateWithDuration:1.0 delay:0.f usingSpringWithDamping:0.5 initialSpringVelocity:5.0 options:UIViewAnimationOptionCurveLinear animations:^{
        self.cartCenter.frame = self.centerShow.frame;
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}

动画效果：

SpringAni.gif

3、Keyframes动画
这里以实现视图背景颜色变化（红-绿-蓝-紫）的过程来演示关键帧动画。

- (void)blockAni5 {
    self.centerShow.image = nil;
    [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{
        [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0];
        }];
        [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{
            self.centerShow.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0];
        }];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}

动画效果：

KeyFramesAni.gif

4、转场动画
4.1 单个视图的过渡效果

- (void)blockAni6 {
    [UIView transitionWithView:self.centerShow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
        self.centerShow.image = [UIImage imageNamed:@"Service"];
    } completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}

动画效果：

TransitionAni.gif

4.2 从旧视图转到新视图的动画效果

- (void)blockAni7 {
    UIImageView * newCenterShow = [[UIImageView alloc]initWithFrame:self.centerShow.frame];
    newCenterShow.image = [UIImage imageNamed:@"Service"];
    [UIView transitionFromView:self.centerShow toView:newCenterShow duration:1.0 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
        NSLog(@"动画结束");
    }];
}

动画效果：

ScreenTransitionAni.gif

接下来将更新核心动画Core Animation

网友评论

__阳阳:mark
SOI:备注：写的挺详细不错。适合新手学习。
22d4539f53cc:不错
d68cc9a86c71:vey good
NotFunGuy:写的很棒
郑州程序员王一:写的好
哈哈大笑呼呼呼呼:UIView的block为什么不需要考虑循环引用的问题呢，求解释一直困扰谢谢了
e97915c51a5e:对象本身不拥有BLOCK 是UIVIEW拥有，你可以查一下Block的内存类型，应该是有三种，具体的忘了
郑明明:不错啊
YungFan:请问能把demo源码共享一下么？包括核心动画的，谢谢
34ab9b9838b1:mark
00a81d752e8d:mark一下，楼主写的很详细
属鱼的加菲猫:不错
最长的河流:block里的self？
烟雨痕:@最长的河流 block是UIView调用的.
浮桥小麦:楼主总结的很细心，感谢！！！
米修斯_:第一个动画直接用frame 好像是不能完成动画的吧。。。
zBk9cN:可以了，需要在viewDidLayoutSubviews中调用
zBk9cN:@穷开心12138 是啊，和展示的效果不一致
0b8aaf76d30b:这篇文章不错。
xxttw:给力啊
西门欥雪:好
xxttw:棒棒棒
莫莫H:可以收了
wlw_花田半亩:一直也想写一个。没写。不错。mark
SilenceZhou:不错长见识了
Mg明明就是你:不错，收了
VictoryForYou:效果很好 block内存管理？