在iOS上创建动画指示符箭头

Question

我正在尝试实现与iOS音乐应用程序中的指示箭头相似的效果，因为当您滚动经过某个点时，指示箭头从箭头变为单行。我在下面附上了一个慢下来的例子。

我要努力理解的是箭头本身，我尝试使用两个旋转的UIView作为与约束一起定位的线，并已成功使用UIViewPropertyAnimator和关键帧创建了动画。但是不幸的是，当从箭头到线条时，线条彼此重叠。

我不确定实现此示例的正确方法。朝正确方向实现这一目标的任何努力将受到高度赞赏。

Answer 1

最简单的方法是为CAShapeLayer的路径设置动画。这为您提供了圆角的末端和免费的连接。您需要一条直线路径和一条弯曲路径；从一个切换到另一个。直线路径必须由两个部分组成，以匹配弯曲路径的两个部分。

这是我对动画的模拟：

这是形状层及其路径的配置：

    let shape = CAShapeLayer()
    shape.frame = // ...        
    shape.lineCap = .round
    shape.lineJoin = .miter
    shape.lineWidth = 6
    shape.strokeColor = UIColor.gray.cgColor
    shape.fillColor = UIColor.clear.cgColor

    let p1 = UIBezierPath()
    p1.move(to: CGPoint(x:0, y:35))
    p1.addLine(to: CGPoint(x:20, y:35))
    p1.addLine(to: CGPoint(x:40, y:35))
    let straight = p1.cgPath

    let p2 = UIBezierPath()
    p2.move(to: CGPoint(x:0, y:25))
    p2.addLine(to: CGPoint(x:20, y:30))
    p2.addLine(to: CGPoint(x:40, y:25))
    let bent = p2.cgPath

这只是根据需要在path和shape之间交替straight的{​​{1}}的问题。