转载

iOS 弹幕开发过程碰到的问题总结

前言

简单说说弹幕开发碰到的两个小问题。

正文

需求：实现一个弹幕容器，里面同时会有多行互不重叠的、运动中的弹幕。每一条弹幕均需要支持点击事件。
用脚底板想的方法：在弹幕容器里面创建几个 UIButton，并且 addTarget，增加点击事件。最后利用 UIView 的 block API 实现动画。
结果：嗯...可惜的是，代码运行起来，你会发现在 UIButton 运动过程，点击事件并没有响应，而且非常奇怪的是：为什么在 UIButton 动画过程，去点击 UIButton 动画的终点，点击事件竟然响应了？？这是为什么呢？
Core Anmation 动画过程原理的引用：

在iOS中，屏幕每秒钟重绘60次。如果动画时长比60分之一秒要长，Core Animation就需要在设置一次新值和新值生效之间，对屏幕上的图层进行重新组织。这意味着CALayer除了“真实”值（就是你设置的值）之外，必须要知道当前显示在屏幕上的属性值的记录。
每个图层属性的显示值都被存储在一个叫做呈现图层的独立图层当中，他可以通过-presentationLayer方法来访问。这个呈现图层实际上是模型图层的复制，但是它的属性值代表了在任何指定时刻当前外观效果。换句话说，你可以通过呈现图层的值来获取当前屏幕上真正显示出来的值。

补充：模型图层在动画开始的那一刻就已经达到终点位置，响应点击事件的也是它。

解决办法：重写弹幕容器 view 的 touchesBegan 方法。代码如下：

@interface ZYYBarrageView ()
@property (nonatomic, strong) UIView *redView; // 将要做平移的 subview
@end
@implementation ZYYBarrageView
- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self commonInit];
    }
    
    return self;
}
- (void)commonInit {
    self.redView = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, 30.f, 30.f)];
    self.redView.backgroundColor = [UIColor redColor];
    [self addSubview:self.redView];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    // 重点开始！！UITouch 获取在 barrageView 坐标系下的坐标
    CGPoint touchPoint = [[touches anyObject] locationInView:self];
    // 判断触摸点是否在 redView 的呈现树的框框之中
    if ([self.redView.layer.presentationLayer hitTest:touchPoint]) {
        // 响应红色块点击
        return;
    } else {
    }
}

进一步的需求：在 ZYYBarrageView 的同一层级,但层次偏后会有 UIButton。正常情况下，因为 ZYYBarrageView 的存在，UIButton 是无法响应点击事件的。代码如下：

@property (nonatomic, strong) ZYYBarrageView *barrageView; // 弹幕 view 支持多行 view 在里面进行运动
@property (nonatomic, strong) UIButton *yellowBtn; // 靠后的 UIButton
- (void)viewDidLoad {
    [super viewDidLoad];
    
    // self.yellowBtn 位于 self.barrageView 之后
    [self.view addSubview:self.yellowBtn];
    [self.view addSubview:self.barrageView];
}
- (ZYYBarrageView *)barrageView {
    if (!_barrageView) {
        _barrageView = [[ZYYBarrageView alloc] initWithFrame:CGRectMake(0.f, 30.f, SCREEN_WIDTH, 30.f)];
        _barrageView.backgroundColor = [UIColor clearColor];
    }
    
    return _barrageView;
}
- (UIButton *)yellowBtn {
    if (!_yellowBtn) {
        _yellowBtn = [UIButton buttonWithType:UIButtonTypeCustom];
        _yellowBtn.frame = CGRectMake(90.f, 30.f, 80.f, 30.f);
        _yellowBtn.backgroundColor = [UIColor yellowColor];
        [_yellowBtn setTitle:@"黄色按钮" forState:UIControlStateNormal];
        [_yellowBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [_yellowBtn addTarget:self action:@selector(onYellowBtn:) forControlEvents:UIControlEventTouchUpInside];
    }
    
    return _yellowBtn;
}
- (void)onYellowBtn:(id)sender {
    // 响应黄色按钮
}

怎么办？

Responder Chain 原理讲解：手指点击屏幕，经过系统响应（之前过程省略不说，文末有参考链接），调用 UIApplication 的 sendEvent: 方法，将 UIEvent 传给 UIWindow，通过递归调用 UIView 层级的 hitTest(_:with:)，结合 point(inside:with:) 找到 UIEvent 中每一个UITouch 所属的 UIView（其实是想找到离触摸事件点最近的那个 UIView）。这个过程是从 UIView 层级的最顶层往最底层递归查询。同一层级的 UIView，会优先深度遍历界面靠前的 UIView。找到最底层 UIView 后，沿着 Responder Chain 逐步向上传递（UIControl 子类默认会拦截传递）。

解决思路：重写 ZYYBarrageView 的 hitTest(_:with:) 方法。代码如下：

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
    BOOL isPointInsideSubview = [self.redView.layer.presentationLayer hitTest:point];
    if (isPointInsideSubview == NO) {
        // 如果没有点击在移动的 redView 上，返回 nil
        // 系统会去遍历位于 ZYYBarrageView 后面的 UIButton，UIButton 能得到响应
        return nil;
    } else {
        return [super hitTest:point withEvent:event];
    }
}

如此，可以完美解决啦~

参考链接

iOS触摸事件的流动

隐式动画关于呈现树的讲解

正文到此结束