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

How to animate the end and the control points SWIFT

我的视图中有一个 CAShapeLayer,它具有 Bezierpath 实例的 CGPath 转换路径。我现在想为结束和两个控制点设置动画,例如该行的末尾正在移动(不停止)。怎么做?我查看了 CABasicAninmations 但没有了解如何访问终点。与持续时间动画相同。如何让这一切在无尽的时间里发生。

您可以使用 CADisplayLink(类似于 NSTimer,除了动画帧更新的最佳时间)并更新 CAShapeLayerpath


例如:

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
}

产生:

这里有一些可能性。

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

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

  • 为绘图的实际点设置动画。这是最难配置的,但它是真正的动画,它使您可以完全控制动画。这就是我在这里所做的:我通过创建自定义动画 属性 来做到这一点 - 在本例中,属性 代表三角形底点的 x 位置。您必须为 所有 要设置动画的点执行此操作。