パスに続くドット

Question

私は、閉じたパスで動くドットをアニメーション化する簡単な方法を探しています。

UIBezierPathで作成されたパスがあります。これはCAShapeLayerによって表されます。

この閉じたパスの周りを移動するこの形の点に配置したいと思います。問題は、私が最良の方法を見つけることができなかったことです。私はすべてのドットをプログラムで追加したくありません。おそらく、粒子を使用する可能性のある方法があります。

パスの形状は異なります。最も重要なことは、お互いに同じ距離の点を喜ばせることです。

私は助けここ

Answer 1

ため喜んでいるでしょうが、あなたがプレイグラウンドで実行することができます例です。

それは、（しばらく前から）マット・ロングによる記事に基づいています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