UIView动画

发表于 | 分类于 |

UIView动画实质上是对Core Animation的封装，提供简洁的动画接口。
对于简单的应用场景，使用UIView动画非常方便简洁。

一、基础动画

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
UIViewAnimationOptionLayoutSubviews            //进行动画时布局子控件
 UIViewAnimationOptionAllowUserInteraction      //进行动画时允许用户交互
 UIViewAnimationOptionBeginFromCurrentState     //从当前状态开始动画
 UIViewAnimationOptionRepeat                    //无限重复执行动画
 UIViewAnimationOptionAutoreverse               //执行动画回路
 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
 UIViewAnimationOptionOverrideInheritedCurve    //忽略嵌套动画的曲线设置
 UIViewAnimationOptionAllowAnimatedContent      //转场：进行动画时重绘视图
 UIViewAnimationOptionShowHideTransitionViews   //转场：移除（添加和移除图层的）动画效果
 UIViewAnimationOptionOverrideInheritedOptions  //不继承父动画设置
 UIViewAnimationOptionCurveEaseInOut            //时间曲线，慢进慢出（默认值）
 UIViewAnimationOptionCurveEaseIn               //时间曲线，慢进
 UIViewAnimationOptionCurveEaseOut              //时间曲线，慢出
 UIViewAnimationOptionCurveLinear               //时间曲线，匀速
 UIViewAnimationOptionTransitionNone            //转场，不使用动画
 UIViewAnimationOptionTransitionFlipFromLeft    //转场，从左向右旋转翻页
 UIViewAnimationOptionTransitionFlipFromRight   //转场，从右向左旋转翻页
 UIViewAnimationOptionTransitionCurlUp          //转场，下往上卷曲翻页
 UIViewAnimationOptionTransitionCurlDown        //转场，从上往下卷曲翻页
 UIViewAnimationOptionTransitionCrossDissolve   //转场，交叉消失和出现
 UIViewAnimationOptionTransitionFlipFromTop     //转场，从上向下旋转翻页
 UIViewAnimationOptionTransitionFlipFromBottom  //转场，从下向上旋转翻页

二、Spring动画

1
2
3
4
5
6
7
8
9
10
11
[UIView animateWithDuration:(NSTimeInterval)
                       delay:(NSTimeInterval)
      usingSpringWithDamping:(CGFloat)//震动效果，范围0~1，数值越小震动效果越明显
       initialSpringVelocity:(CGFloat)//初始速度，数值越大初始速度越快
                     options:(UIViewAnimationOptions)
                  animations:^{
                     
 }
                  completion:^(BOOL finished) {
                   
 }];

三、Keyframes动画

只支持属性关键帧，不支持路径关键帧

1
2
3
4
5
6
7
8
9
[UIView animateKeyframesWithDuration:(NSTimeInterval)
                                delay:(NSTimeInterval)
                              options:(UIViewKeyframeAnimationOptions)
                           animations:^{
                         //执行的关键帧动画
 }
                           completion:^(BOOL finished) {
              
 }];

增加关键帧的方法：

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
UIViewAnimationOptionLayoutSubviews           //进行动画时布局子控件
UIViewAnimationOptionAllowUserInteraction     //进行动画时允许用户交互
UIViewAnimationOptionBeginFromCurrentState    //从当前状态开始动画
UIViewAnimationOptionRepeat                   //无限重复执行动画
UIViewAnimationOptionAutoreverse              //执行动画回路
UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置
UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置
UIViewKeyframeAnimationOptionCalculationModeLinear     //运算模式 :连续
UIViewKeyframeAnimationOptionCalculationModeDiscrete   //运算模式 :离散
UIViewKeyframeAnimationOptionCalculationModePaced      //运算模式 :均匀执行
UIViewKeyframeAnimationOptionCalculationModeCubic      //运算模式 :平滑
UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式 :平滑均匀

四、转场动画

1、单个视图的过渡效果

1
2
3
4
5
6
7
8
9
[UIView transitionWithView:(nonnull UIView *)
                   duration:(NSTimeInterval)
                    options:(UIViewAnimationOptions)
                 animations:^{
                
 }
                 completion:^(BOOL finished) {
                 
 }];

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

1
2
3
4
5
6
7
[UIView transitionFromView:(nonnull UIView *)
                     toView:(nonnull UIView *)
                   duration:(NSTimeInterval)
                    options:(UIViewAnimationOptions)
                 completion:^(BOOL finished) {
          
 }];

// toView added to fromView.superview, fromView removed from its superview

五、UIImageView设置图片帧动画

1
2
3
4
5
6
7
8
9
// _afterWheel 是一个UIImageView
NSMutableArray* after = [NSMutableArray array];
for(int i = 1;i<4;i++){
    [after addObject: [UIImage imageNamed:[NSString stringWithFormat:@"resource.bundle/%@%d",@"porche-f",i]]];
}
_afterWheel.animationImages = after;
_afterWheel.animationDuration = 0.05;
_afterWheel.animationRepeatCount = 0;
[_afterWheel startAnimating];
打赏支持一下呗！