ios - 故障动画 CAAnimation

Question

我正在尝试创建一个将具有动画功能的新 ImageView 。但是，我的动画有问题，让我们看看；

在这里，我只需要让这个动画看起来是连续的。我的意思是，在每个循环的开始都没有那个故障。就在左上角的右边缘。

这是我的动画；

let strokeEndAnimation: CAAnimation = {
    let animation = CABasicAnimation(keyPath: "strokeEnd")
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 2

    let group = CAAnimationGroup()
    group.duration = 2.3
    group.repeatCount = .infinity
    group.animations = [animation]

    return group
}()

let strokeStartAnimation: CAAnimation = {
    let animation = CABasicAnimation(keyPath: "strokeStart")
    animation.beginTime = 0.3
    animation.fromValue = 0
    animation.toValue = 1
    animation.duration = 2

    let group = CAAnimationGroup()
    group.duration = 2.3
    group.repeatCount = .infinity
    group.animations = [animation]

    return group
}()

Answer 1

你不能简单地用标准的闭合路径和strokeStart + strokeEnd来实现它，因为这些值是Float位于0.0 和 1.0，但是您可以在路径本身上玩一些技巧。

我将以圆形路径为例，因为它更直接。

// Create an arc path with 2.353π (animation start at 0.15)
let arcPath = UIBezierPath(arcCenter: CGPoint(x: 100, y: 100), radius: 90.0, startAngle: 0, endAngle: CGFloat(.pi * 2.353), clockwise: true)

let pathLayer = CAShapeLayer()
pathLayer.path = arcPath.cgPath
pathLayer.strokeColor = UIColor.black.cgColor
pathLayer.fillColor = nil
pathLayer.lineWidth = 10.0

// stroke start run from 0 - 0.85 (0π - 2π)
let aniSS = CABasicAnimation(keyPath: "strokeStart")
aniSS.fromValue = 0
aniSS.toValue = 0.85
aniSS.duration = 2

// stroke end run from 0.15 - 1 (0.353π - 2.353π)
let aniSE = CABasicAnimation(keyPath: "strokeEnd")
aniSE.fromValue = 0.15
aniSE.toValue = 1
aniSE.duration = 2

let group = CAAnimationGroup()
group.duration = 2
group.repeatCount = .infinity
group.animations = [aniSS, aniSE]

pathLayer.add(group, forKey: "strokeAnimation")

因此，当动画循环结束时，笔划位于 2π - 2.353π，这看起来与动画循环开始时完全相同:0π - 0.353π，可能不是优化的解决方案，但它完成了工作。