iOS Swift图表画线、渐变、圆形动画如何同步？

Question

我尝试同步图表线、圆和渐变的动画。

这是没有同步动画的精美图表 gif:/

运行所有动画代码：

        CATransaction.begin()
        CATransaction.setAnimationDuration(5.0)
        CATransaction.setAnimationTimingFunction(CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeInEaseOut))
        self?.animateLineDrawing()
        self?.animateGradient()
        self?.animateCircle()
        CATransaction.commit()

画线动画：

    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0.0
    animation.toValue = 1.0
    lineShapeLayer.add(animation, forKey: "drawLineAnimation")
    lineShapeLayer.path = curvedPath.cgPath

我有 gradientContainer 层，其中 gradientLayer 作为子层。我只将容器遮罩层移动到渐变层上：

    let animationPath = UIBezierPath(rect: CGRect(x: firstPoint.x,
                                         y: chartRect.origin.y,
                                         width: 0,
                                         height: chartRect.height))
    let animation = CABasicAnimation(keyPath: "path")
    animation.fromValue = animationPath.cgPath
    animation.toValue = UIBezierPath(rect: CGRect(x: firstPoint.x,
                               y: chartRect.origin.y,
                               width: chartRect.width,
                               height: chartRect.height)).cgPath
    animation.isRemovedOnCompletion = false
    animation.fillMode = CAMediaTimingFillMode.forwards
    animation.delegate = self
    gradientContainerLayer.mask?.add(animation, forKey: nil)

图表路径上的圆形动画：

    let animation = CAKeyframeAnimation(keyPath: "position")
    animation.path = viewModel.curvedPath(frame)?.cgPath
    animation.delegate = self
    circleLayer.add(animation, forKey: nil)

渐变动画不同步，因为路径上的距离与直线不同，有人知道如何同步吗？
为什么圆形动画时序不等于直线动画？看起来动画的开始和结束是相等的，所以计时功能不同，为什么？

Answer 1

不使用基本的属性动画，而是全部启用 CAKeyframeAnimation。我个人发现它们通常更易于调整且更灵活。

计算每个元素在同一时间点处于相同 x 坐标的位置。
您应该考虑在每个兴趣点中至少添加 1 个点（y 坐标的减少和增加之间的变化），这样您就不会削减局部极值。

iOS Swift图表画线、渐变、圆形动画如何同步？

iOS Swift how to synchronise chart drawing line, gradient and circle animations?

animation

core-animation

core-graphics

ios

swift