iOS Swift 如何同步图表绘制线条、渐变和圆形动画？答案

【问题标题】：iOS Swift how to synchronise chart drawing line, gradient and circle animations?iOS Swift 如何同步图表绘制线条、渐变和圆形动画？
【发布时间】：2019-03-22 19:03:23
【问题描述】：

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

这是带有不同步动画的精美图表 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

我有梯度容器层，梯度层作为子层。我只在渐变层上移动容器遮罩层：

    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)

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

【问题讨论】：

嗯，很明显你的动画对于一件事有不同的计时功能。洋红色渐变填充正在向右线性扩展，但您的其他动画使用 ease-in-ease-out。
“渐变动画不同步，因为路径上的距离与直线不同，有人知道如何同步吗？”您需要在这里做的是使用关键帧动画将 x 位置的每个前进指定为一帧，并为每个前进设置时间。

标签： ios swift animation core-graphics core-animation

【解决方案1】：

而不是在CAKeyframeAnimation 上使用基本和属性动画切换。我个人发现它们的调整方式更简单，而且总体上更灵活。

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

【讨论】：

另外，我必须 1. 将动画计算模式设置为“.paced”并更改 2. 将渐变动画 keyPath 更改为“position.x”，而不是动画值，将动画路径设置为与行中相同和圆形动画。