毛刺动画CAAnimation

Question

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

​

​

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

这是我的动画；

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来实现它，因为这些值是介于0.0和1.0之间的Float，但是你可以在路径本身上玩一些小把戏。

例如，我将采用圆形路径，因为它更简单。

// 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π，这可能不是优化的解决方案，但它确实起到了作用。