Glitchy动画CAAnimation

Question

我正在尝试创建一个具有动画功能的新imageview。但是，我的动画有问题，让我们看看;

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

这是我的动画;

<trans-unit id="flux.element.sections.settings.mysection">
    <source>This works</source>
</trans-unit>
<trans-unit id="flux.element.objects.myobject">
    <source>This also works</source>
</trans-unit>
<trans-unit id="flux.element.fields.myfield">
    <source>This doesn't work</source>
</trans-unit>

Answer 1

您无法使用标准的封闭路径strokeStart + strokeEnd来实现此目标，因为Float位于0.0和{{1}之间但是，你可以在路径上玩一些技巧。

我采取循环的方式，例如，因为它更直接。

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π，不是优化的解决方案，但它完成了工作。