用动画绘制路径

Question

我想在我的应用程序中绘制一条带有动画的路径我使用了下面的代码但是没有动画并且即使我使持续时间比正常情况更长它也只会将路径的结果添加到视图。

let animation = CABasicAnimation(keyPath: "strokeEnd")
let layer = CAShapeLayer()
let bezierPath = UIBezierPath()
bezierPath.move(to: CGPoint(x: 38.5, y: 88.5))
bezierPath.addCurve(to: CGPoint(x: 86.5, y: 88.5), controlPoint1: CGPoint(x: 41.5, y: 88.5), controlPoint2: CGPoint(x: 86.5, y: 88.5))
bezierPath.addLine(to: CGPoint(x: 86.5, y: 64.5))
bezierPath.addLine(to: CGPoint(x: 145.5, y: 64.5))
UIColor.black.setStroke()
bezierPath.lineWidth = 1
bezierPath.stroke()

layer.path = bezierPath.cgPath
layer.strokeEnd = 0
layer.lineWidth = 1
layer.strokeColor = UIColor.gray.cgColor
layer.fillColor = UIColor.black.cgColor

animation.toValue = 1
animation.duration = 20 // seconds
layer.add(animation, forKey: "Line")
self.view.layer.addSublayer(layer)

我不知道怎么让它动起来

Answer 1

这在我的机器上有效，这是完整的 class 和代码：

https://github.com/Shah3r/testAnim

import UIKit

class ViewController: UIViewController {

override func viewDidLoad() {
    super.viewDidLoad()

    //Use CATransaction
    CATransaction.begin()

    //Set Layer
    let layer = CAShapeLayer()
    layer.lineWidth = 3
    layer.strokeColor = UIColor.red.cgColor
    layer.fillColor = UIColor.black.cgColor

    //Set Bezier Path
    let bezierPath = UIBezierPath()
    bezierPath.move(to: CGPoint(x: 38.5, y: 88.5))
    bezierPath.addCurve(to: CGPoint(x: 86.5, y: 88.5), controlPoint1: CGPoint(x: 41.5, y: 88.5), controlPoint2: CGPoint(x: 86.5, y: 88.5))
    bezierPath.addLine(to: CGPoint(x: 86.5, y: 64.5))
    bezierPath.addLine(to: CGPoint(x: 145.5, y: 64.5))

    //Set Animation
     let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0.0
    animation.toValue = 1
    animation.duration = 7.0 // seconds

  //Completion Block
    CATransaction.setCompletionBlock{
        print("Animation completed")
    }

    //Add path and animation
    layer.path = bezierPath.cgPath
    layer.add(animation, forKey: "Line")
    CATransaction.commit()

    self.view.layer.addSublayer(layer)
 }
}

用动画绘制路径

Draw A Path with Animation

core-animation

swift