Glitchy动画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π，可能不是最优的解决方案，但它所做的工作。