版本記錄

前言

適當(dāng)?shù)膭?dòng)畫展示可以提高APP的炫酷效果，提高用戶忠誠度和粘性，但是在動(dòng)畫集成過程中，不僅可能帶來性能問題，還會(huì)引起其他交互中的問題，這些都是開發(fā)人員在開發(fā)過程中比較耗時(shí)和需要注意的問題。接下來這幾篇我就說一下做各種動(dòng)畫時(shí)碰到的各種性能等各種坑和問題。感興趣的可以看前面幾篇。
1. 動(dòng)畫集成中遇到的坑 —— 動(dòng)畫過程中的點(diǎn)擊問題（一）

問題描述

UIViewKeyframeAnimationOptionBeginFromCurrentState是UIView動(dòng)畫中的一個(gè)option枚舉，這個(gè)表示從當(dāng)前狀態(tài)開始動(dòng)畫。第一次動(dòng)畫正常結(jié)束后，當(dāng)我們第二次開始動(dòng)畫時(shí)候，即使已經(jīng)設(shè)置了初始frame，動(dòng)畫就不從初始frame開始，而是從第一次動(dòng)畫結(jié)束位置開始的第二次動(dòng)畫。

下面看一下該部分的代碼。

#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(@"開始動(dòng)畫了");
    
    //動(dòng)畫
    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

下面我們看一下效果圖。

問題解決

這里我們有兩個(gè)方法，第一個(gè)就是刪除UIViewKeyframeAnimationOptionBeginFromCurrentState這個(gè)枚舉，第二個(gè)方法就是：

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

在我們做動(dòng)畫之前，加上一個(gè)UIView動(dòng)畫，并且將延時(shí)delay和duration都設(shè)置為0，然后在這里修改視圖的frame。

問題效果

下面我們就看一下問題效果圖。

感興趣的可以參考GitHub - 刀客傳奇

后記

未完，待續(xù)~~~