Lottie Player非循环场景下反向播放失效问题求助

当loop=false时仅设置setDirection=-1不会生效，核心原因是Lottie默认从第0帧开始播放，反向状态下没有可移动的帧空间。要实现反向播放一次后停止，需要先将动画定位到结束帧，再启动反向播放。

具体实现（以Web端lottie-web为例） #

// 初始化动画实例（确保autoplay、loop都设为false）
const lottieAnim = lottie.loadAnimation({
  container: document.getElementById('your-container'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'path/to/your/animation.json'
});

// 配置反向播放一次停止
lottieAnim.setDirection(-1); // 设置为反向播放
lottieAnim.seek(lottieAnim.totalFrames); // 跳转到动画最后一帧
lottieAnim.play(); // 开始播放，从最后一帧反向走到第一帧后自动停止

另一种方式：使用playSegments #

也可以直接指定播放片段范围，实现从最后一帧到第0帧的单次播放：

lottieAnim.playSegments([lottieAnim.totalFrames, 0], true);
lottieAnim.setLoop(false);

原理说明 #

当loop=false时，Lottie默认播放区间是[0, totalFrames]。仅设置反向方向的话，动画初始在第0帧，没有反向移动的帧范围，所以不会触发播放。先跳转至最后一帧后，反向播放就会从终点逐步走到起点，到达后因关闭循环而自动停止。

如果是Android/iOS端的Lottie SDK，思路完全一致：先seek到动画最大帧，设置播放方向为反向，再调用play方法即可。

内容的提问来源于stack exchange，提问作者Aigbe Destiny