如何为CGpath数组的绘制设置动画?

时间:2018-03-26 19:33:27

标签: swift uibezierpath cashapelayer cabasicanimation cgpath

我正在尝试创建一个为用户绘制对象的应用程序。我现在有一个对象,它由类型[UIBezierPath]的数组构成。然后我使用循环将数组中的所有UIBezierPath更改为CGPath s,然后想要逐个绘制那些路径的动画。但是,当我尝试使用此代码时,它不起作用,我无法在网上找到任何有用的信息。这是用于将包含macbookPath的数组UIBezierPath转换为CGPath的代码:

for path in macbookPath {
        drawingPath.append(path.cgPath)
    }

然后我使用此代码尝试绘制路径:

for cgPath in drawingPath {
        shapeLayer.path = cgPath
    }

这是函数drawForm()的其余代码,它应该将表单绘制到名为aiDrawView的视图上:

@objc func drawForm() {
    var drawingPath = [CGPath]()
    var macbookPath = Forms.MacbookForm()
    let shapeLayer = CAShapeLayer()
    shapeLayer.frame = aiDrawView.bounds

    for path in macbookPath {
        drawingPath.append(path.cgPath)
    }

    for cgPath in drawingPath {
        shapeLayer.path = cgPath
    }

    let strokeEndAnimation = CABasicAnimation(keyPath: "strokeEnd")
    strokeEndAnimation.duration = 2.0
    strokeEndAnimation.fromValue = 0.0

    shapeLayer.add(strokeEndAnimation, forKey: "strokeEndAnimation")
}

我是CAShapeLayer以及CABasicAnimationUIBezierPath的新手,所以任何帮助都会非常感激!!! :d

1 个答案:

答案 0 :(得分:7)

我建议您从路径数组中构建一个UIBezierPath,然后为其设置动画:

var paths: [UIBezierPath] = ...

let path = UIBezierPath()

paths.forEach { path.append($0) }

shapeLayer.path = path.cgPath

let animation = CABasicAnimation(keyPath: "strokeEnd")
animation.duration = 2.0
animation.fromValue = 0.0
shapeLayer.add(animation, forKey: nil)

,例如,这里有100条路径,合并为一条路径,然后在形状图层上为strokeEnd设置动画:

enter image description here

假设您的路径数组确实形成了一些连续的路径,我建议将其存储为CGPoint的数组。然后你可以从中构建一条路径。这消除了所有这些路径的开销。此外,它还为原始数据集的缩放打开了大门,无需引入任何工件,能够使用行连接选项,applying smoothing algorithms如果您有不合适的线段序列等等。