版本记录

前言

适当的动画展示可以提高APP的炫酷效果，提高用户忠诚度和粘性，但是在动画集成过程中，不仅可能带来性能问题，还会引起其他交互中的问题，这些都是开发人员在开发过程中比较耗时和需要注意的问题。接下来这几篇我就说一下做各种动画时碰到的各种性能等各种坑和问题。感兴趣的可以看前面几篇。
1. 动画集成中遇到的坑 —— 动画过程中的点击问题（一）

问题描述

UIViewKeyframeAnimationOptionBeginFromCurrentState是UIView动画中的一个option枚举，这个表示从当前状态开始动画。第一次动画正常结束后，当我们第二次开始动画时候，即使已经设置了初始frame，动画就不从初始frame开始，而是从第一次动画结束位置开始的第二次动画。

下面看一下该部分的代码。

#import "ViewController.h"
#import "UIView+Tool.h"

@interface ViewController ()

@property (nonatomic, strong) UIImageView *testImageView;
@property (nonatomic, assign) CGFloat giftWidth;
@property (nonatomic, assign) CGFloat giftHeight;
@property (nonatomic, assign) CGFloat startXRatio;
@property (nonatomic, assign) CGFloat startYRatio;
@property (nonatomic, assign) CGFloat pauseXRatio;
@property (nonatomic, assign) CGFloat pauseYRatio;
@property (nonatomic, assign) CGFloat endXRatio;
@property (nonatomic, assign) CGFloat endYRatio;
@property (nonatomic, assign) CGFloat startDuration;
@property (nonatomic, assign) CGFloat endDuration;
@property (nonatomic, assign) CGFloat pauseDuration;

@end

@implementation ViewController

- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
    [self startAnimation];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    self.view.backgroundColor = [UIColor lightGrayColor];
    self.testImageView = [[UIImageView alloc] init];
    self.testImageView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.testImageView];
}

- (void)startAnimation
{
    self.giftWidth = 100.0;
    self.giftHeight = 100.0;
    self.startXRatio = 0.2;
    self.startYRatio = 0.3;
    self.pauseXRatio = 0.5;
    self.pauseYRatio = 0.5;
    self.endXRatio = 0.8;
    self.endYRatio = 1.0;
    self.startDuration = 5;
    self.pauseDuration = 1;
    self.endDuration = 5;
    
    CGSize screenSize = [UIScreen mainScreen].bounds.size;
    self.testImageView.frame = CGRectMake(100.0, 100.0, 100.0, 100.0);
    
    NSLog(@"开始动画了");
    
    //动画
    CGFloat totalDuration = self.startDuration + self.pauseDuration + self.endDuration;
    [UIView animateKeyframesWithDuration:totalDuration
                                   delay:0
                                 options:UIViewKeyframeAnimationOptionAllowUserInteraction | UIViewKeyframeAnimationOptionBeginFromCurrentState
                              animations:^{
                                  //start
                                  CGFloat startTime = 0.f;
                                  CGFloat duration =  self.startDuration / totalDuration;
                                  [UIView addKeyframeWithRelativeStartTime:startTime
                                                          relativeDuration:duration
                                                                animations:^{
                                                                    self.testImageView.origin = CGPointMake(self.pauseXRatio * screenSize.width,
                                                                                                            self.pauseYRatio * screenSize.height);
                                                                }];
                                  
                                  //pause
                                  startTime += duration;
                                  duration = self.pauseDuration / totalDuration;
                                  [UIView addKeyframeWithRelativeStartTime:startTime
                                                          relativeDuration:duration
                                                                animations:^{}];
                                  //end
                                  startTime += duration;
                                  duration = self.endDuration / totalDuration;
                                  [UIView addKeyframeWithRelativeStartTime:startTime
                                                          relativeDuration:duration
                                                                animations:^{
                                                                    self.testImageView.origin = CGPointMake(self.endXRatio * screenSize.width,
                                                                                                            self.endYRatio * screenSize.height);
                                                                }];
                              } completion:^(BOOL finished) {
                                  
                                  NSLog(@"over");
                              }];
}

@end

下面我们看一下效果图。

问题解决

这里我们有两个方法，第一个就是删除UIViewKeyframeAnimationOptionBeginFromCurrentState这个枚举，第二个方法就是：

[UIView animateWithDuration:0 delay:0 options:0 animations:^{
                self.testImageView.frame = CGRectMake(50.0, 100.0, 100.0, 100.0);
        } completion:^(BOOL finished) {
            //动画
            CGFloat totalDuration = self.startDuration + self.pauseDuration + self.endDuration;
  }];

在我们做动画之前，加上一个UIView动画，并且将延时delay和duration都设置为0，然后在这里修改视图的frame。

问题效果

下面我们就看一下问题效果图。

感兴趣的可以参考GitHub - 刀客传奇

后记

未完，待续~~~