Question

我正在尝试制作类似于Android材料设计循环不确定活动指标的自定义活动指示器。基本上我想画两次圆并擦除它，但擦除和绘图不会同时或速度发生。这就是我到目前为止所做的：

let progressLayer = CAShapeLayer()
progressLayer.strokeColor = UIColor.red().cgColor
progressLayer.fillColor = nil
progressLayer.lineWidth = 2

let drawAnimation = CABasicAnimation(keyPath: "strokeEnd")
drawAnimation.duration = duration / 2
drawAnimation.fromValue = 0
drawAnimation.toValue = 1
drawAnimation.isRemovedOnCompletion = false
drawAnimation.fillMode = kCAFillModeForwards

let eraseAnimation = CABasicAnimation(keyPath: "strokeStart")
eraseAnimation.duration = duration / 2
eraseAnimation.beginTime = 0.2
eraseAnimation.fromValue = 0
eraseAnimation.toValue = 0.4
eraseAnimation.isRemovedOnCompletion = false
eraseAnimation.fillMode = kCAFillModeForwards

let endDrawAnimation = CABasicAnimation(keyPath: "strokeEnd")
endDrawAnimation.beginTime = duration / 2
endDrawAnimation.duration = duration / 2
endDrawAnimation.fromValue = 0
endDrawAnimation.toValue = 1
endDrawAnimation.isRemovedOnCompletion = false
endDrawAnimation.fillMode = kCAFillModeForwards

let endEraseAnimation = CABasicAnimation(keyPath: "strokeStart")
endEraseAnimation.beginTime = duration / 2
endEraseAnimation.duration = duration / 4
endEraseAnimation.fromValue = 0.4
endEraseAnimation.toValue = 1
endEraseAnimation.isRemovedOnCompletion = false
endEraseAnimation.fillMode = kCAFillModeForwards

let endEraseAnimation2 = CABasicAnimation(keyPath: "strokeStart")
endEraseAnimation2.beginTime = duration * 3 / 4
endEraseAnimation2.duration = duration / 4
endEraseAnimation2.fromValue = 0
endEraseAnimation2.toValue = 1
endEraseAnimation2.isRemovedOnCompletion = false
endEraseAnimation2.fillMode = kCAFillModeForwards


let animations = CAAnimationGroup()
animations.duration = duration
animations.animations = [drawAnimation, eraseAnimation, endDrawAnimation, endEraseAnimation, endEraseAnimation2]
animations.isRemovedOnCompletion = false
animations.fillMode = kCAFillModeForwards
progressLayer.add(animations, forKey: "stroke")

除了一个问题，代码按预期执行所有操作。当第一个strokeEnd动画完成并且第二个动画开始时，有一种闪光意味着直到该点绘制的圆圈部分消失，然后再从0开始绘制。有没有人有任何想法如何解决这个问题？

Answer 1

当第一个strokeEnd动画完成并且第二个动画完成时有一种闪光意味着绘制圆圈的一部分直到那一点消失，然后再从0开始画画。

如果您比较drawAnimation和endDrawAnimation的设置，除了beginTime属性外，您会看到它们是相同的。这就是导致你闪烁的原因。它们都从0开始，它们都以1结尾。由于你没有指定所需的结果，我可以假设你希望endDrawAnimation的{{1}}为1。

fromValue

建议改进

据我所知，你想创建关键帧动画，这意味着你有预定义的偏移，动画行为（速度，值等）会发生变化。您可能需要考虑使用CAKeyframeAnimation。

我不确定您是否意识到这一点，但目前您在let drawAnimation = CABasicAnimation(keyPath: "strokeEnd") drawAnimation.duration = duration / 2 drawAnimation.fromValue = 0 drawAnimation.toValue = 1 drawAnimation.isRemovedOnCompletion = false drawAnimation.fillMode = kCAFillModeForwards let endDrawAnimation = CABasicAnimation(keyPath: "strokeEnd") endDrawAnimation.beginTime = duration / 2 // Starts after the first animation and starts with 0 again. endDrawAnimation.duration = duration / 2 endDrawAnimation.fromValue = 0 endDrawAnimation.toValue = 1 endDrawAnimation.isRemovedOnCompletion = false endDrawAnimation.fillMode = kCAFillModeForwards上同时运行了两个动画：

strokeStart从eraseAnimation开始，持续时间为0.2

0.5 * duration

endEraseAnimation。

这意味着0.5 * duration（eraseAnimation）的结尾总是大于0.2 + 0.5 * duration的开头（endEraseAnimation）

连接两个笔画和动画

1 个答案: