iOS 动画篇----UIView动画

一、UIView动画介绍

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

我们可以同过UIView的动画类别来改变控件的frame、bounds、transform、alpha等等，使用界面看起来跟流畅优雅，增加用户交互上等体验。

---

二、UIView 类方法动画

1、方法解析：

// 动画开始。animationID：动画标识、context：附加参数在设置了代理的情况下，此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下，我们设置为nil即可。+ (void)beginAnimations:(nullable NSString *)animationID context:(nullable void *)context; // 提交动画。动画的相关设置必须在开始设置动画和结束动画之间，否则无效+ (void)commitAnimations;  // 设置动画的代理+ (void)setAnimationDelegate:(nullable id)delegate; // 动画开始触发的方法+ (void)setAnimationWillStartSelector:(nullable SEL)selector; // 动画结束触发的方法+ (void)setAnimationDidStopSelector:(nullable SEL)selector;  // 动画持续时间+ (void)setAnimationDuration:(NSTimeInterval)duration; // 动画执行前的延迟时间+ (void)setAnimationDelay:(NSTimeInterval)delay;// 动画开始的日期+ (void)setAnimationStartDate:(NSDate *)startDate;// 动画的速率类型，有四种类型+ (void)setAnimationCurve:(UIViewAnimationCurve)curve;  // 动画重复的次数+ (void)setAnimationRepeatCount:(float)repeatCount; // 动画是否继续执行相反的动画+ (void)setAnimationRepeatAutoreverses:(BOOL)repeatAutoreverses;// 是否从当前状态开始播放动画+ (void)setAnimationBeginsFromCurrentState:(BOOL)fromCurrentState; // 是否禁用动画效果（对象属性依然会被改变，只是没有动画效果）+ (void)setAnimationsEnabled:(BOOL)enabled;  // 设置视图的过渡效果/*第一个参数：UIViewAnimationTransition的枚举值如下          UIViewAnimationTransitionNone,              //不使用动画          UIViewAnimationTransitionFlipFromLeft,      //从左向右旋转翻页          UIViewAnimationTransitionFlipFromRight,     //从右向左旋转翻页          UIViewAnimationTransitionCurlUp,            //从下往上卷曲翻页          UIViewAnimationTransitionCurlDown,          //从上往下卷曲翻页     第二个参数：需要过渡效果的View     第三个参数：是否使用视图缓存，YES：视图在开始和结束时渲染一次；NO：视图在每一帧都渲染*/+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; 

2、使用示例，以frame为例

// 说明需要执行动画[UIView beginAnimations:nil context:nil];// 设置动画时间[UIView setAnimationDuration:1.0];// 设置速度[UIView setAnimationCurve:UIViewAnimationCurveLinear];// 设置动画代理[UIView setAnimationDelegate:self];// 动画开始执行某个函数[UIView setAnimationWillStartSelector:@selector(aniStart)];// 动画结束执行某个函数[UIView setAnimationDidStopSelector:@selector(aniStop)];// 设置动画延迟执行// [UIView setAnimationDelay:1.0];// 重复次数// [UIView setAnimationRepeatCount:2.0];// 是否反方向执行动画// [UIView setAnimationRepeatAutoreverses:YES];// 相关属性设置                     self.testView.transform = CGAffineTransformMakeScale(1.2, 2.0);// 提交动画[UIView commitAnimations];-----------(void)aniStart{    NSLog(@"动画开始了");}-(void)aniStop{    NSLog(@"动画结束了");    NSLog(@"testView改变后的frame为：%@",NSStringFromCGRect(self.testView.frame));}

---

三、UIview Block动画

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

方法解析

1、基础动画

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

[UIView animateWithDuration:(NSTimeInterval) // 动画执行时间                          delay:(NSTimeInterval) // 延迟时间                        options:UIViewAnimationOptions)  // 动画的效果                     animations:^{                         // 你的code                     } 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  //转场，从下向上旋转翻页

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

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

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

// delay = 0.0, options = 0, completion = NULL[UIView animateWithDuration:(NSTimeInterval)  //动画持续时间                  animations:^{                      //执行的动画                }];

简单使用

// 缩放控件的frame[UIView animateWithDuration:1.0 delay:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{    self.testView.transform = CGAffineTransformMakeScale(0.8, 1.5);} completion:^(BOOL finished) {    NSLog(@"frame动画--执行完毕!!");}];

2、Spring动画（iOS7.0后新增Spring动画）

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

简单使用

/ 弹簧式动画块[UIView animateWithDuration:2.0 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseOut animations:^{    self.testView.y = self.testView.y+100;} completion:^(BOOL finished) {    DSLog(@"弹簧式动画--执行完毕!!");}];

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

增加关键帧的方法：

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

简单使用，改变颜色

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

4、转场动画

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) {                     //动画执行完毕后的操作                 }];

简单使用

// 单个视图的过渡效果[UIView transitionWithView:self.centerShow duration:1.0 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{        self.centerShow.image = [UIImage imageNamed:@"Service"];    } completion:^(BOOL finished) {        NSLog(@"动画结束");    }];----------// 从旧视图转到新视图的动画效果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(@"动画结束");    }];

四、转载地址

1、iOS动画篇：UIView动画