Glitchy animation CAAnimation - ios

Question

I am trying to create a new imageview which is going to have an animation feature. But, I have a problem about my animation, lets see;
Here, all I need is to make this animation seems continuous. I mean, without that glitch at the beginning of every loop. Just right edge of the corner at top left.
Here are my 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

You can't simply achieve it with a standard closed path and strokeStart + strokeEnd, because these value are Float lies between 0.0 and 1.0, however you can play some tricks on the path itself.
I'll take a circular path for example since it's more straight-forward.
// 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")
So that when an animation loop end, the stroke sit at 2π - 2.353π which looks exactly identical as when an animation loop start: 0π - 0.353π, might not be the optimized solution but it did the work.

Answer 2

I know this post is 5 years old, but there still aren't any good solutions out there to solve this issue. I was able to achieve the desired result using a second layer. The main progress layer is in blue. The second layer is in red to show how it replaces the first layer, and makes it appear to be the same loader:
Here's the code:
- (void)animate {
[self beginning];
[self end];
}
- (void)beginning {
[_progressLayer removeAllAnimations];
CAKeyframeAnimation *animationStart = [CAKeyframeAnimation animationWithKeyPath:kStrokeStart];
animationStart.values = #[#0, #0, #0.75];
animationStart.keyTimes = #[#0, #0.25, #1];
animationStart.duration = 2;
CAKeyframeAnimation *animationEnd = [CAKeyframeAnimation animationWithKeyPath:kStrokeEnd];
animationEnd.values = #[#0, #0.25, #1];
animationEnd.keyTimes = #[#0, #0.25, #1];
animationEnd.duration = 2;
CAAnimationGroup *group = [CAAnimationGroup new];
group.duration = 2;
group.repeatCount = INFINITY;
group.animations = #[animationStart, animationEnd];
[_progressLayer addAnimation:group forKey:#"beginning"];
}
- (void)end {
[_progressLayerTail removeAllAnimations];
CABasicAnimation *animationStart = [CABasicAnimation animationWithKeyPath:kStrokeStart];
animationStart.fromValue = #0.75;
animationStart.toValue = #1;
animationStart.duration = 0.5;
CABasicAnimation *animationEnd = [CABasicAnimation animationWithKeyPath:kStrokeEnd];
animationEnd.fromValue = #1;
animationEnd.toValue = #1;
animationEnd.duration = 0.5;
CAAnimationGroup *group = [CAAnimationGroup new];
group.duration = 2;
group.repeatCount = INFINITY;
group.animations = #[animationStart, animationEnd];
[_progressLayerTail addAnimation:group forKey:#"end"];
}