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地址链接

你可能感兴趣的:(iOS animtion动画、关键帧动画滚动时可点击效果)