如何为结束点和控制点设置动画 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 位置。您必须为所有要设置动画的点执行此操作。

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

How to animate the end and the control points SWIFT

cabasicanimation

cashapelayer

uibezierpath

animatewithduration

swift