版本记录

前言

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

问题概述

利用UIKit的UIView做动画的时候，当控件在运动的时候是不允许交互的。这一篇我们就说一下这个问题，配合具体的Demo，见GitHub - 刀客传奇。

问题解决

下面我们就看一下这个问题，先写一个动画，具体代码如下所示。

1. ViewController.m

#import "ViewController.h"
#import "JJGiftView.h"

@interface ViewController ()

@property (nonatomic, strong) JJGiftView *giftView;

@end

@implementation ViewController

#pragma mark - Override Base Function

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

@end

2. JJGiftView.h

#import <UIKit/UIKit.h>

@interface JJGiftView : UIView

- (void)startAnimation;

@end

3. JJGiftView.m

#import "JJGiftView.h"

@interface JJGiftView()

@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 JJGiftView

#pragma mark - Override Base Function

- (instancetype)initWithFrame:(CGRect)frame
{
    if (self = [super initWithFrame:frame]) {
        UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(imageViewDidTapped:)];
        [self addGestureRecognizer:tapGesture];
    }
    return self;
}


#pragma mark - Object Private Function

- (void)startAnimation
{
    self.giftWidth = 100.0;
    self.giftHeight = 100.0;
    self.startXRatio = 0.2;
    self.startYRatio = 0.1;
    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.frame = CGRectMake(self.startXRatio * screenSize.width, self.startYRatio * screenSize.height, self.giftWidth, self.giftHeight);
    
    [UIView animateWithDuration:self.startDuration delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        self.frame = CGRectMake(self.pauseXRatio * screenSize.width, self.pauseYRatio * screenSize.height, self.giftWidth, self.giftHeight);
    } completion:^(BOOL finished) {
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(self.pauseDuration * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [UIView animateWithDuration:self.endDuration delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
                self.frame = CGRectMake(self.endXRatio * screenSize.width, self.endYRatio * screenSize.height, self.giftWidth, self.giftHeight);
            } completion:^(BOOL finished) {
                NSLog(@"动画结束了");
            }];
        });
    }];
    
}

#pragma mark - Action && Notification

- (void)imageViewDidTapped:(UITapGestureRecognizer *)tapGesture
{
    CGFloat redValue = arc4random_uniform(255)/255.0;
    CGFloat greenValue = arc4random_uniform(255)/255.0;
    CGFloat blueValue = arc4random_uniform(255)/255.0;
    self.backgroundColor = [UIColor colorWithRed:redValue green:greenValue blue:blueValue alpha:1.0];
}

@end

下面我们就看一下效果。

这里，我们就发现个问题，尽管给视图我们添加了手势，并且做UIView动画的时候，option使用了枚举值UIViewAnimationOptionAllowUserInteraction，结果是只有在动画在中间停止的附近时，点击才会响应手势，视图变随机色。

这是什么原因呢？

其实主要原因是，动画执行的过程中，是layer在做动画，我们点击的手势其实已经透过本身传递给父视图了，我们这个自定义view无法响应手势，解决方式就是重写hitTest方法，留住对手势的点击响应。

下面我们就改进一下。

// 在自定义方法中重写下面这个方法

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    CGPoint locationPoint = [self.layer convertPoint:point toLayer:self.layer.presentationLayer];
    CALayer *layer = self.layer.presentationLayer;
    if(CGRectContainsPoint(layer.bounds, locationPoint)){
        return self;
    }
    
    if (!self.layer.presentationLayer) {
        return [super hitTest:point withEvent:event];
    }
    return nil;
}

这样点击视图，就可以响应手势。

问题效果

下面我们运行看一下效果，

后记

未完，待续~~~