iOS：如何绘制一条随时间逐渐消失并与视图互动的线（UIBezierpath或其他方式）？

Question

例如：

我用手指在下面画橙色线，因为它触摸了蓝色方块，它们变亮了。

我可以从我发现的StackOverflow问题/教程中使用UIBezierPath来画一条线，但是我不知道如何使其消失或与其他视图交互。

这不是游戏，而是常规的iOS应用。 我不确定这是否会改变事情。

有任何想法吗？

我实现了一个不平滑的垃圾版本，但是有我想要的线条图感觉

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch *touch = [[[event allTouches] allObjects] firstObject];
    CGPoint point = [touch locationInView:self.view];
    UIView *dot = [[UIView alloc] initWithFrame:CGRectMake(point.x, point.y, 6, 6)];
    dot.backgroundColor = UIColorFromRGB(0xeb3b6e);
    dot.layer.cornerRadius = 3;

    for(UILabel *el in self.testLabels){
        CGPoint pointInSuperView = [self.view convertPoint:point toView:el.superview];
        if(CGRectContainsPoint(el.frame, pointInSuperView))
            el.textColor = UIColorFromRGB(0xeb3b6e);
    }
    [self.view addSubview:dot];
    [UIView animateWithDuration:1.0 animations:^{
        dot.alpha = 0;
    } completion:^(BOOL finished) {
        [dot removeFromSuperview];
    }];
}

Answer 1

如果用“它”中的“它接触到蓝色方块”，则表示该行，将很难做到。 直线没有矩形，因此您不能使用CGRectIntersectsRect之类的方法来查看直线和正方形是否相交。 使用手指的触摸点（无论如何都应该是线条）会容易得多。 您可能希望在数组中包含蓝色方块，并在touchesMoved内部循环遍历数组以查看是否有任何方块包含接触点（使用CGRectContainsPoint）。

Answer 2

您可能已经有一个UIPanGesture设置或一个touchesBegan: / touchesMoved:实现，可用来制作图形。 由于您始终要绘制到当前手指的位置，因此可以使用平移手势或触摸对象的locationInView: CGPoint（您应该已经用来更新UIBezierPath）来检查它是否与CGRectContainsPoint相交于一个正方形。

为了使线条淡出，最简单的方法是在停止绘制时启动计时器，并使包含该绘图的图层淡出：

CABasicAnimation *fadeAnim = [CABasicAnimation animationWithKeyPath:@"opacity"];
fadeAnim.fromValue = @(1);
fadeAnim.toValue = @(0);
fadeAnim.duration = 1;
[myLayer addAnimation:fadeAnim forKey:nil];
myLayer.opacity = 0;

或者，如果使用CAShapeLayer，则可以为该行设置动画以使其“变短”（如蛇游戏）：

CABasicAnimation *strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
strokeAnim.fromValue = @(0);
strokeAnim.toValue = @(1);
strokeAnim.duration = 3;
[shapeLayer addAnimation:strokeAnim forKey:nil];

为了使它从行的开头逐渐消失到最近的部分，这是另一回事了，因为它要求您用渐变颜色“绘制”您的行。