Lottie动画播放得太快了。

Question

我在网页上使用lottie添加了演示动画，但播放速度太快了。该怎么做才能恢复正常速度呢？下面是有问题的动画链接。

问题动画链接：https://saybgm.github.io/Lottie_example/ 我的动画：https://youtu.be/CcHT7VgUF38 After Effect aep文件：https://drive.google.com/file/d/1YGqgiuU-hU5Raq2WXu3r1ZrCANXB_Gw9/view?usp=sharing 我的代码

var animate = lottie.loadAnimation({
container: document.getElementById("hello"),
renderer: 'svg',
autoplay: true,
loop:true,
path: 'animation2.json'})

- SayBGM

---

请发布您当前的代码，以便每个人都可以提供帮助。 - Tam Huynh

这是一个 Github 链接：https://github.com/SayBGM/Lottie_example。 - SayBGM

Answer 1

我认为问题在于动画文件内部，使用Lottiefiles预览尝试了一下，看起来与您的代码运行相同：https://www.lottiefiles.com/share/TNdLkQ

如果您想要减慢速度，请调用setSpeed（1是当前速度，<1会使其变慢）：

var animate = lottie.loadAnimation({
  container: document.getElementById("hello"),
  renderer: 'svg',
  autoplay: true,
  loop:true,
  path: 'animation2.json'
});
animate.setSpeed(0.1);

从文档中得知：http://airbnb.io/lottie/web/getting-started.html

- Tam Huynh

Answer 2

你也可以在XML文件中处理它。进入Lottie标签，然后实现

app:lottie_speed="any number"

- A.R.B.N

Answer 3

如果您正在使用React，还可以直接在组件上设置速度。

<LottieView
  speed={0.2}
  ref={animation}
  loop={true}
  autoPlay={true}
  ...
/>

- Michael Brenndoerfer

Answer 4

如果你正在遵循在React中实现Lottie的新方法，你可以像这样使用它（类似于迈克尔的回答，他得到了我的点赞）：

 <Lottie
        options={defaultOptions}
        height={'100%'}
        width={'100%'}
        isStopped={false}
        isPaused={false}
        speed={0.25}
      />

- Ian