javascript - Lottie 动画到达特定帧后如何触发事件?

标签 javascript animation lottie bodymovin

使用Lottie/BodyMoving,如何在Lottie动画到达某一帧时触发事件。

例如:一旦anim1到达某一帧,我想要anim2播放。

谢谢

最佳答案

尝试 enterFrame 事件

  const anim = lottie.loadAnimation({ ...options, path: 'URL_TO_JSON' });
anim.addEventListener('enterFrame', () => {
  console.log('enterFrame', anim.currentFrame);
  if(anim.currentFrame == 55)
  {
  //stop and play 2nd one
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js"></script>
 <div style="width:1067px;height:600px"  class="lottie" data-animation-path="animation/" data-anim-loop="true" data-name="ninja"></div>

关于javascript - Lottie 动画到达特定帧后如何触发事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59966891/

相关文章:

javascript - 使用 javascript/jquery 向字符串中的某些字符添加 span 标记

javascript - 需要搜索点来拆分,但我只在不匹配其他子字符串时才需要

javascript - 如何在 Javascript/Jquery 中将键值对添加到数组

安卓 : Click event is not triggered at time of animation

android - 如何更改 lottie json 文件中的单个图像

xcode - react native 构建失败 - xcodebuild : error: The workspace named "foo" does not contain a scheme named "foo"

javascript - 如何根据容器高度和宽度拉伸(stretch)内容图标跨度元素的 50% 宽度和 100% 高度

jquery - 淡入淡出效果在我悬停时不断重复

javascript - Css3动态添加的元素没有得到动画

android - Lottie动画无法编译-为什么?