Lottie动画:停止循环,但等到动画完成



我目前正在使用 Lottie 在 Swift 中使用不同的动画制作按钮动画。

我需要的是一种停止循环的方法,但只有当动画到达终点并会重复时。在那一刻,我希望能够插话并用另一个非循环动画替换动画,这样它看起来像是从循环动画到另一个动画的流畅过渡。这样做的原因是,我在循环播放动画时等待通过网络获取数据的完成。

它反过来进入循环动画,如下所示:

func animate(animation: Animation?, endIn loop: Animation?) {
self.setImage(nil, for: .normal)
self.animationView.isHidden = false
self.animationView.animation = animation
self.animationView.loopMode = .playOnce
self.animationView.play { _ in
self.animationView.animation = loop
self.animationView.loopMode = .loop
self.animationView.play()
}
}

也许其他人已经实现了这样的转换,我将不胜感激任何帮助。

编辑:我尝试以这种方式进行,然后在获取完成后仅调用self.animationView.loopMode = .playOnce

func animate(startAnimation: Animation?,
transitionTo loop: Animation?,
endAnimation: Animation?,
image: UIImage?) {
self.setImage(nil, for: .normal)
self.animationView.isHidden = false
self.animationView.animation = startAnimation
self.animationView.loopMode = .playOnce
self.animationView.play { _ in
self.animationView.animation = loop
self.animationView.loopMode = .loop
self.animationView.play { _ in
self.animationView.animation = endAnimation
self.animationView.loopMode = .playOnce
self.setImage(image, for: .normal)
}
}
}

编辑 2:

我通过上层函数启动循环然后调用它来结束它,从而找到了一个有效但糟糕的解决方案:

func stopLoopAndTranstion(to animation: Animation?, endIn image: UIImage?) {
guard let animation = animation else {
return
}
if self.animationView.realtimeAnimationProgress > 0.95 {
self.animationView.stop()
self.animationView.animation = animation
self.animationView.loopMode = .playOnce
self.animationView.play()
} else {
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
self.stopLoopAndTranstion(to: animation, endIn: image)
}
}
}

我在这里做的是检查动画进度,一旦达到某个进度,我就会停止并替换动画。 我宁愿认为这是一个黑客而不是解决方案。每次我触发此功能时,CPU 使用率都会上升 2-3%,直到动画被替换。 虽然这 2-3% 可以忽略不计,但我并不满意,并且仍在寻找一种更清洁的方式来实现这样的事情。

您可以使用Lottie提供play(fromProgress...)API 之一

animationView.play(
fromProgress: animationView.currentProgress,
toProgress: 1,
loopMode: .playOnce,
completion: { [weak self] completed in
DispatchQueue.main.asyncAfter(deadline: .now() + 0.01) {
self.stopLoopAndTranstion(to: animation, endIn: image)
}
}
)

这将确保您当前的动画将完成,并且在completion块中您可以完成整理工作

也许你只需要将重复计数设置为 0

最新更新