动画CAShapeLayer路径更改 [英] Animate CAShapeLayer path change

问题描述

我正在尝试更改路径的 CAShapeLayer 属性的更改，如下所示：

I'm trying to animate change of path property of CAShapeLayer like this:

animatePathChange(for: progressLayer, toPath: progressPath.cgPath)
progressLayer.path = progressPath.cgPath

这是 animatePathChange 功能代码：

func animatePathChange(for layer: CAShapeLayer, toPath: CGPath) {
    let animation = CABasicAnimation(keyPath: "path")
    animation.duration = 1.0
    animation.fromValue = layer.path
    animation.toValue = toPath
    animation.timingFunction = CAMediaTimingFunction(name: "easeInEaseOut")
    layer.add(animation, forKey: "path")
}

但最终结果不是我想要的。如何实现将图层的路径从旧值更改为新值的动画？

But the end result is not what i want. How can i achieve animation that changes layer's path from old value to new?

这就是它现在的样子使用上面的代码：

This is how it looks right now with the code above:

推荐答案

不要为路径设置动画。配置整个路径，然后设置 strokeEnd - 假设它是 0 ，所以用户什么都看不见。现在，每次要进行更改时，请将当前 strokeEnd 的更改设置为新 strokeEnd 。该路径似乎会在曲线周围进一步延伸。

Don't animate the path. Configure the whole path and then set the strokeEnd — let's say it's 0, so the user sees nothing. Now each time you want to make a change, animate the change from the current strokeEnd to the new strokeEnd. The path will appear to extend further round the curve.

这篇关于动画CAShapeLayer路径更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！