iOS animtion动画、关键帧动画滚动时可点击效果

以下所有内容均为个人观点，转载请注明出处<简书--小蜗牛吱呀之悠悠 >，谢谢！

最近项目中需要实现一个视图从右向左滑动，动画播放过程子视图需要能响应点击事件，效果和弹幕滚动过程支持点击类似。

1、首先想到的方案是在UIView视图上放一个按钮，然后使用animation动画播放

[UIView animateWithDuration:15 animations:^{
        self.colorView.transform = CGAffineTransformMakeTranslation(-700, 0);
    } completion:^(BOOL finished) {
 }];

运行后发现，动画播放过程中，点击上面的按钮，点击事件不响应。why!!

why?

2、从动画过程看，会不会是animation动画播放过程，系统自动将视图的用户交互给关掉了呢？于是带着这个疑问去查看animation动画的头文件，发现果然有这么一个枚举UIViewAnimationOptionAllowUserInteraction存在，于是赶紧将动画修改成下面的样子：

[UIView animateWithDuration:15 delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        self.colorView.transform = CGAffineTransformMakeTranslation(-700, 0);
    } completion:^(BOOL finished) {
}];

很可惜，运行后发现并没有效果，这是什么原因呢？经过一番研究后发现，在animation动画播放过程中，对视图的坐标设定是立即生效的（即使你看上去视图是从右往左移动的），也就是说此时这个视图已经处于CGAffineTransformMakeTranslation(-700, 0)所在的位置，所以此时你的点击操作并没有被这个在滑动的视图捕获。既然没有被捕获到，那这个手势被谁获取到了呢？父视图。

3、既然手势被父视图获取到了，那么意味着我们可以获取到此时手指点击的坐标

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 获取到点击的位置
       UITouch * touch = touches.anyObject;
       CGPoint point = [touch locationInView:self.view];
}

由于animation动画播放过程，实际上移动的是layer层，那么我们考虑是不是可以获取到这个移动的layer呢，然后通过比较layer的frame与point的位置关系来判断这个手势是否需要响应。那么怎么获取这个layer呢，我们的layer有这么一个属性presentationLayer，这个属性获取到的就是当前正在播放动画的layer，于是touchesBegan方法修改如下

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 获取到点击的位置
    UITouch * touch = touches.anyObject;
    CGPoint point = [touch locationInView:self.view];

    CGRect frame1 = self.tapView.layer.presentationLayer.frame;
    CGRect frame2 = self.colorView.layer.presentationLayer.frame;
    
    frame1.origin.x += frame2.origin.x;
    frame1.origin.y += frame2.origin.y;
       if ( CGRectContainsPoint(frame1, point) ) {
           NSLog(@"contain");
       }
       // 方式2:hitT
}

由于tapView是colorView的子视图，所以frame1的坐标是相对于colorView的坐标，但我们的point却是相对于self.view的，所以此时需要将坐标转换一下。修改完成后运行，效果正是我们想要的。

4、通过demo验证效果后就将效果放到自己的项目上去，可最后发现还是不行，这是为什么呢？于是考虑是不是我这个手势被别的视图捕获了，没有传递到self.view上面呢？查看图层结构后发现，确实如此，我们的点击手势被tableview给捕获了。到这里，我们穿插一下基本的事件传递过程，我们的图层结构如下图

image.png

从图上我们可以看到，tableview与滚动视图是同层级的关系，tableView是self.view的子视图。那么当我们点击事件发生时，根据事件的传递规律，从self.view开始遍历子视图，前面提到，滑动视图此时已经不在手势点击的位置，所以它无法响应事件，那么事件就被tableview捕获了。
那么好了，原因就出在这里，事件被tableview捕获了，self.view的touchesBegan方法就不响应。那么如何才能让self.view获得事件呢？将tableview的userInterface关了，运行后发现是OK的。但是，tableview需要响应自己的事件，userInterface关了以后无法再响应了。因此，这个方式不可行。

5、考虑到touchesBegan是UIView的方法，那么可以为滑动视图增加一个父视图，touchesBegan的处理交给这个父视图来做。

image.png

注：关键帧动画也同样可以用此方法解决
demo地址链接