iOS动画篇：UIView动画

本是古典何须时尚 2022-06-17 14:28 228阅读 0赞

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

**UIView动画简介**

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

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

1、大小变化(frame)

2、拉伸变化(bounds)

3、中心位置(center)

4、旋转(transform)

5、透明度(alpha)

6、背景颜色(backgroundColor)

7、拉伸内容(contentStretch)

**UIview类方法动画**

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

1.1动画开始标记

[UIView beginAnimations:(nullableNSString*) context:(nullablevoid*)];

第一个参数：动画标识

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

1.2结束动画标记

\[UIView commitAnimations\];

**2）动画参数的设置方法**

//动画持续时间
    [UIView setAnimationDuration:(NSTimeInterval)];
    //动画的代理对象
    [UIView setAnimationDelegate:(nullableid)];
    //设置动画将开始时代理对象执行的SEL
    [UIView setAnimationWillStartSelector:(nullableSEL)];
    //设置动画结束时代理对象执行的SEL
    [UIView setAnimationDidStopSelector:(nullableSEL)];
    //设置动画延迟执行的时间
    [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:(nonnullUIView*) 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;//self.cartCenter：卡券中心view   self.centerShow：签到有礼view
    [UIView commitAnimations];
    }
    -(void)startAni:(NSString*)aniID{
    NSLog(@"%@start",aniID);
    }
    -(void)stopAni:(NSString*)aniID{
    NSLog(@"%@stop",aniID);
    }

动画效果：

![1644426-f0c6747fb4bcd06e.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];
    }

动画效果：

![1644426-8db4a85698c4032e.gif][]

**UIviewBlock动画**

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

**1）Block动画方法**

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

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

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

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

3、可设置延迟时间和过渡效果的Block动画

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

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系统动画大部分采用SpringAnimation，适用于所有可被添加动画效果的属性）

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

5、Keyframes动画

iOS7.0后新增关键帧动画，支持属性关键帧，不支持路径关键帧

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

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

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

![1644426-2ff1cf991b2e0372.png][]

增加关键帧的方法：

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

6、转场动画

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

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

在该动画过程中，fromView会从父视图中移除，并讲toView添加到父视图中，注意转场动画的作用对象是父视图（过渡效果体现在父视图上）。

调用该方法相当于执行下面两句代码：

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

6.2单个视图的过渡效果

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

**2）实例代码：**

1、普通动画

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

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

动画效果：

![1644426-f0c6747fb4bcd06e (1).gif][1644426-f0c6747fb4bcd06e _1_.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:^(BOOLfinished){
    NSLog(@"动画结束");
    }];
    }

动画效果：

![1644426-5c04af0a0045466f.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.192 1blue: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:^(BOOLfinished){
    NSLog(@"动画结束");
    }];
    }

动画效果：

![1644426-3e24ae361ce10dc3 (1).gif][1644426-3e24ae361ce10dc3 _1_.gif]

4、转场动画

4.1单个视图的过渡效果

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

动画效果：

![1644426-20fc02571b2aa0ac.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:^(BOOLfinished){
    NSLog(@"动画结束");
    }];
    }

动画效果：

![1644426-8db4a85698c4032e (1).gif][1644426-8db4a85698c4032e _1_.gif]

源码:[点击打开链接][Link 1]

[1644426-f0c6747fb4bcd06e.gif]: /images/20220617/c197711e7304470f8342999d934af177.png
[1644426-8db4a85698c4032e.gif]: /images/20220617/872115f7c43e46299993fe9052de3e3d.png
[1644426-2ff1cf991b2e0372.png]: /images/20220617/0872da766691460e9c4ec23cfbff41fb.png
[1644426-f0c6747fb4bcd06e _1_.gif]: /images/20220617/104aaf4121b24214bcbfc05be6cce7ab.png
[1644426-5c04af0a0045466f.gif]: /images/20220617/d655e50d6b304c709f70d5fb810ad2bb.png
[1644426-3e24ae361ce10dc3 _1_.gif]: /images/20220617/adf79c715bbf4802964d35c9cf1d2f36.png
[1644426-20fc02571b2aa0ac.gif]: /images/20220617/c46b54924e2548998027d62bd5c5f566.png
[1644426-8db4a85698c4032e _1_.gif]: /images/20220617/ccca3e366a8240f78f232607b9925cc3.png
[Link 1]: http://download.csdn.net/download/zenmela2011/9828565