Animation Glitchy CAAnimation

Question

J'essaye de créer une nouvelle imageview qui va avoir une caractéristique d'animation. Mais, j'ai un problème avec mon animation, voyons voir;

Ici, tout ce que je dois faire est de cette animation semble continue. Je veux dire, sans ce pépin au début de chaque boucle. Juste le bord droit du coin en haut à gauche.

Voici mes animations;

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

Vous ne pouvez pas obtenir simplement avec un standard chemin fermé et strokeStart + strokeEnd, parce que ces valeurs sont Float est comprise entre 0.0 et 1.0, mais vous pouvez jouer quelques tours sur le chemin lui-même.

Je vais prendre un chemin circulaire par exemple car c'est plus direct.

// 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") 

Alors que lorsqu'une fin de boucle d'animation, le sit coup à 2π-2.353π qui ressemble exactement identique quand un début de boucle d'animation: 0π - 0.353π, pourrait ne pas être la solution optimale, mais il fait le travail.