ios - 沿着路径的点

Question

我正在寻找一些简单的方法来为点按闭合路径移动设置动画。

我有一些使用 UIBezierPath 创建的路径。由 CAShapeLayer 表示。

我想在此形状上放置将围绕此闭合路径移动的点。问题是我找不到最好的方法。我不想以编程方式添加每个点。也许有一些方法可以使用粒子。

路径会有不同的形状。最重要的是请点之间的距离相同。

我很乐意提供帮助

Answer 1

这是您可以在 playground 中运行的示例。

它基于 Matt Long 的一篇文章(不久前)http://www.cimgf.com/2009/10/20/marching-ants-with-core-animation/

import UIKit
import PlaygroundSupport

let container = UIView(frame: CGRect(x: 0, y: 0, width: 600, height: 700))

container.backgroundColor = UIColor.green

let v = UIView(frame: CGRect(x: 100, y: 100, width: 300, height: 300))
v.backgroundColor = UIColor.yellow

let shp = CAShapeLayer()
shp.bounds = v.bounds
let pth = UIBezierPath()
pth.move(to: CGPoint(x: 20, y: 220))
pth.addLine(to: CGPoint(x: 20, y: 40))
pth.addLine(to: CGPoint(x: 40, y: 80))
pth.addLine(to: CGPoint(x: 120, y: 40))
pth.addLine(to: CGPoint(x: 140, y: 40))
pth.close()
shp.strokeColor = UIColor.orange.cgColor
shp.fillColor = UIColor.cyan.cgColor
shp.lineWidth = 3.0

shp.lineDashPattern = [5, 5]

shp.path = pth.cgPath
shp.position = CGPoint(x: 150, y: 150)
v.layer.addSublayer(shp)

container.addSubview(v)

let dashAnim = CABasicAnimation(keyPath: "lineDashPhase")
dashAnim.fromValue = 0
dashAnim.toValue = 15
dashAnim.duration = 0.75
dashAnim.repeatCount = 10000

shp.add(dashAnim, forKey: "lineDashPhase")

PlaygroundPage.current.liveView = container
PlaygroundPage.current.needsIndefiniteExecution = true