代码之家 › 专栏 › 技术社区 › Thijs van der Heijden

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

cgpath cabasicanimation cashapelayer uibezierpath swift

Thijs van der Heijden · 技术社区 · 6 年前

我正在尝试制作一个为用户绘制对象的应用程序。我现在有一个这样的对象,它是由一个类型为 [UIBezierPath] 。然后我使用循环来更改所有 UIBezierPath 数组中的 CGPath ,然后希望为这些路径逐个绘制动画。然而,当我现在尝试这段代码时,它不起作用,而且我在网上找不到任何关于这段代码的有用信息。这是用于转换数组的代码 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 和 CABasicAnimation 和 UIBezierPath 因此,任何帮助都将不胜感激!!!:D

1 回复 | 直到 6 年前

Rob 6 年前

我建议建造一个 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)

E、这里有100条路径,组合成一条路径 strokeEnd 然后在形状层上设置动画:

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