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];

20210510175210383.gif

bounds属性

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

20210510175716160.gif

center属性

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

20210510175837234.gif

alpha属性

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

20210510175915558.gif

backgroundColor属性

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

2021051017593527.gif

transform属性

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

20210510175952322.gif

1.2 options动画的展示方式

options是UIViewAnimationOptions，主要分为3种

动画效果

动画运行加速

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

20210511101157683.gif

转场动画

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，显示如下:

20210511102040426.gif

velocity参数表示初始的速度，数值越大一开始移动越快。

分别设置为5、10和20，效果如下:

20210511102325668.gif

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
20210511141507722.gif	20210511141544148.gif

UIViewAnimationOptionTransitionCrossDissolve
20210511141634548.gif

UIViewAnimationOptionTransitionFlipFromLeft和	UIViewAnimationOptionTransitionFlipFromRight
20210511142132839.gif	20210511142141969.gif

UIViewAnimationOptionTransitionFlipFromTop和	UIViewAnimationOptionTransitionFlipFromBottom
20210511142226598.gif	20210511142234406.gif

还有一个过渡动画的方法，在动画过程中，首先将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可以指定动画效果:

示例代码

[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];

源码下载: https://github.com/nai-chen/IosBlog