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π，可能不是最優的解決方案，但它所做的工作。