如何为结束点和控制点设置动画 SWIFT

Question

我的视图中有一个 CAShapeLayer，它具有 Bezierpath 实例的到 CGPath 投射路径。我现在想为结尾和两个控制点设置动画，例如那条线的末端正在移动（不停止）。怎么做？我查看了 CABasicAninmations 但没有得到如何访问端点。与动画与持续时间相同。如何在无尽的时间里做到这一点。

Answer 1

您可以使用CADisplayLink（类似于NSTimer，除了动画帧更新的最佳时机）并更新CAShapeLayer 的path。

---

例如：

var displayLink: CADisplayLink?
var startTime: CFAbsoluteTime?
let duration = 2.0

var shapeLayer: CAShapeLayer?

override func viewDidLoad() {
    super.viewDidLoad()

    shapeLayer = CAShapeLayer()
    shapeLayer?.fillColor = UIColor.clearColor().CGColor
    shapeLayer?.strokeColor = UIColor.blueColor().CGColor
    shapeLayer?.lineWidth = 10
    shapeLayer?.frame = view.bounds
    view.layer.addSublayer(shapeLayer!)

    startTime = CFAbsoluteTimeGetCurrent()
    displayLink = CADisplayLink(target: self, selector: "handleDisplayLink:")
    displayLink?.addToRunLoop(NSRunLoop.mainRunLoop(), forMode: NSRunLoopCommonModes)
}

func handleDisplayLink(displayLink: CADisplayLink) {
    let elapsed = CFAbsoluteTimeGetCurrent() - startTime!
    let percent = (elapsed % duration) / duration

    let path = UIBezierPath()
    let startPoint = CGPoint(x: 0, y: view.bounds.size.height / 2.0)
    let controlPoint = CGPoint(x: view.bounds.size.width / 20, y: view.bounds.size.height * CGFloat(0.5 + sin(percent * M_PI * 2.0) / 2.0))
    let endPoint = CGPoint(x: view.bounds.size.width - 1, y: view.bounds.size.height / 2.0)
    path.moveToPoint(startPoint)
    path.addQuadCurveToPoint(endPoint, controlPoint: controlPoint)

    shapeLayer?.path = path.CGPath
}

产生：

Answer 2

这里有一些可能性。

• 提前配置动画，即通过生成一系列绘图，就像卡通的单元格一样，对这些图像使用简单的 UIImageView 动画。

• 使用 CAShapeLayer 并在两个 path 值之间设置动画。不幸的是，这并不能让您完全控制中间帧，但您可以使用关键帧动画来提供中间帧，从而提供额外的控制。

• 为绘图的实际点设置动画。这是最难配置的，但它是真正的动画，它可以让您完全控制动画。这就是我在这里所做的：我通过创建一个自定义动画属性来做到这一点——在这种情况下，一个表示三角形底点的 x 位置的属性。您必须为所有要设置动画的点执行此操作。