iOS UIView Animation动画

1. UIView属性动画

常用方法animateWithDuration

• duration，动画时间
• delay，动画在延迟多久之后执行
• options，动画的展示方式
• animations，动画代码
• completion，动画完成后代码

// 动画时间，，options，completion
+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay 
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^ __nullable)(BOOL finished))completion)

// delay = 0.0, options = 0, completion = NULL
+ (void)animateWithDuration:(NSTimeInterval)duration
                 animations:(void (^)(void))animations)

// delay = 0.0, options = 0
+ (void)animateWithDuration:(NSTimeInterval)duration
                 animations:(void (^)(void))animations
                 completion:(void (^ __nullable)(BOOL finished))completion)

1.1 可实现动画的属性

• frame，实现移动的动画效果
• bounds，实现内部子控件移动的动画效果
• center，实现移动的动画效果
• alpha，实现淡入淡出的动画效果
• backgroundColor，实现背景色渐变的动画效果
• transform，实现移动、缩放、旋转的动画效果，详见iOS CGAffineTransform仿射变换

frame属性

[UIView animateWithDuration:1 animations:^(void) {
    self.animationView.frame = CGRectMake(20, 80, 240, 240);
} completion:nil];

bounds属性

[UIView animateWithDuration:1 animations:^(void) {
    self.animationView.bounds = CGRectMake(30, 30, 160, 160);
} completion:nil];

center属性

[UIView animateWithDuration:1 animations:^(void) {
    self.animationView.center = CGPointMake(160, 220);
} completion:nil];

alpha属性

[UIView animateWithDuration:1 animations:^(void) {
    self.animationView.alpha = 0.2;
} completion:nil];

backgroundColor属性

[UIView animateWithDuration:1 animations:^(void) {
    self.animationView.backgroundColor = [UIColor blueColor];
} completion:nil];

transform属性

[UIView animateWithDuration:1 animations:^(void) {
    self.animationView.transform = CGAffineTransformMakeRotation(M_PI_4);
} completion:nil];

1.2 options动画的展示方式

options是UIViewAnimationOptions，主要分为3种

动画效果

值	说明
UIViewAnimationOptionLayoutSubviews	提交动画的时候布局子控件，表示子控件将和父控件一同动画。
UIViewAnimationOptionAllowUserInteraction	动画时允许用户交流，比如触摸
UIViewAnimationOptionBeginFromCurrentState	从当前状态开始动画
UIViewAnimationOptionRepeat	动画无限重复
UIViewAnimationOptionAutoreverse	执行动画回路,前提是设置动画无限重复
UIViewAnimationOptionOverrideInheritedDuration	忽略外层动画嵌套的执行时间
UIViewAnimationOptionOverrideInheritedCurve	忽略外层动画嵌套的时间变化曲线
UIViewAnimationOptionAllowAnimatedContent	通过改变属性和重绘实现动画效果，如果key没有提交动画将使用快照
UIViewAnimationOptionShowHideTransitionViews	用显隐的方式替代添加移除图层的动画效果
UIViewAnimationOptionOverrideInheritedOptions	忽略嵌套继承的选项

动画运行加速

值	说明
UIViewAnimationOptionCurveEaseInOut	由慢到快再到慢
UIViewAnimationOptionCurveEaseIn	由慢到快
UIViewAnimationOptionCurveEaseOut	由快到慢
UIViewAnimationOptionCurveLinear	匀速

分别采用四种加速模式UIViewAnimationOptionCurveEaseInOut， UIViewAnimationOptionCurveEaseIn， UIViewAnimationOptionCurveEaseOut， UIViewAnimationOptionCurveLinear

转场动画

值	说明
UIViewAnimationOptionTransitionNone	无转场动画
UIViewAnimationOptionTransitionFlipFromLeft	转场从左翻转
UIViewAnimationOptionTransitionFlipFromRight	转场从右翻转
UIViewAnimationOptionTransitionCurlUp	上卷转场
UIViewAnimationOptionTransitionCurlDown	下卷转场
UIViewAnimationOptionTransitionCrossDissolve	转场交叉消失
UIViewAnimationOptionTransitionFlipFromTop	转场从上翻转
UIViewAnimationOptionTransitionFlipFromBottom	转场从下翻转

1.3 弹簧效果

弹簧效果的方法多了两个参数dampingRatio和velocity

+ (void)animateWithDuration:(NSTimeInterval)duration
                      delay:(NSTimeInterval)delay
     usingSpringWithDamping:(CGFloat)dampingRatio
      initialSpringVelocity:(CGFloat)velocity
                    options:(UIViewAnimationOptions)options
                 animations:(void (^)(void))animations
                 completion:(void (^ __nullable)(BOOL finished))completion;

dampingRatio参数的值为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。
分别设置为0.2、0.5和1，显示如下

velocity参数表示初始的速度，数值越大一开始移动越快。
分别设置为5、10和20，效果如下

2. UIView过渡动画

当一个视图的内容需要变化时，可以使用过渡动画。

+ (void)transitionWithView:(UIView *)view
                  duration:(NSTimeInterval)duration
                   options:(UIViewAnimationOptions)options
                animations:(void (^ __nullable)(void))animations
                completion:(void (^ __nullable)(BOOL finished))completion);

view是参与转换的视图，options是UIViewAnimationOptions类型，

UIViewAnimationOptionTransitionCurlUp和UIViewAnimationOptionTransitionCurlDown

UIViewAnimationOptionTransitionCrossDissolve

UIViewAnimationOptionTransitionFlipFromLeft和UIViewAnimationOptionTransitionFlipFromRight

UIViewAnimationOptionTransitionFlipFromTop和UIViewAnimationOptionTransitionFlipFromBottom

还有一个过渡动画的方法，在动画过程中，首先将fromView从父视图中删除，然后将toView添加，就是做了一个替换操作。

+ (void)transitionFromView:(UIView *)fromView
                    toView:(UIView *)toView
                  duration:(NSTimeInterval)duration
                   options:(UIViewAnimationOptions)options
                completion:(void (^ __nullable)(BOOL finished))completion);

3. UIView关键帧动画

• duration，总持续时间
• options，枚举UIViewKeyframeAnimationOptions
• frameStartTime，相对开始时间
• frameDuration，相对持续时间

+ (void)animateKeyframesWithDuration:(NSTimeInterval)duration
                               delay:(NSTimeInterval)delay
                             options:(UIViewKeyframeAnimationOptions)options
                          animations:(void (^)(void))animations
                          completion:(void (^ __nullable)(BOOL finished))completion);
+ (void)addKeyframeWithRelativeStartTime:(double)frameStartTime
                        relativeDuration:(double)frameDuration
                              animations:(void (^)(void))animations);

options可以指定动画效果

值	说明
UIViewKeyframeAnimationOptionLayoutSubviews	提交动画的时候布局子控件，表示子控件将和父控件一同动画。
UIViewKeyframeAnimationOptionAllowUserInteraction	动画时允许用户交流，比如触摸
UIViewKeyframeAnimationOptionBeginFromCurrentState	从当前状态开始动画
UIViewKeyframeAnimationOptionRepeat	动画无限重复
UIViewKeyframeAnimationOptionAutoreverse	执行动画回路,前提是设置动画无限重复
UIViewKeyframeAnimationOptionOverrideInheritedDuration	忽略外层动画嵌套的执行时间
UIViewKeyframeAnimationOptionOverrideInheritedOptions	忽略外层动画嵌套的时间变化曲线
UIViewKeyframeAnimationOptionCalculationModeLinear	选择使用一个简单的线性插值计算的时候关键帧之间的值
UIViewKeyframeAnimationOptionCalculationModeDiscrete	选择不插入关键帧之间的值,而是直接跳到每个新的关键帧的值
UIViewKeyframeAnimationOptionCalculationModePaced	选择计算中间帧数值算法使用一个简单的节奏。这个选项的结果在一个均匀的动画
UIViewKeyframeAnimationOptionCalculationModeCubic	选择计算中间帧使用默认卡特莫尔罗花键,通过关键帧的值
UIViewKeyframeAnimationOptionCalculationModeCubicPaced	选择计算中间帧使用立方计划而忽略的时间属性动画

示例代码

[UIView animateKeyframesWithDuration:1 delay:0 options:0 animations:^{
    [UIView addKeyframeWithRelativeStartTime:0 relativeDuration:0.2 animations:^{
        self.magentaView.frame = CGRectMake(120, 100, 160, 160);
    }];
    [UIView addKeyframeWithRelativeStartTime:0.2 relativeDuration:0.7 animations:^{
        self.magentaView.frame = CGRectMake(160, 240, 80, 80);
    }];
    [UIView addKeyframeWithRelativeStartTime:0.7 relativeDuration:1 animations:^{
        self.magentaView.frame = CGRectMake(20, 100, 160, 160);
    }];
} completion:nil];

显示如下