javascript - 在 HTML 网页上滚动播放 Lottie/Bodymovin 动画

Question

我一直在搜索多个论坛，寻找此问题的解决方案 - 我正在尝试编写多个 Lottie 动画，以便在每个动画进入 HTML 网页上的浏览器窗口时播放。有人有可行的解决方案吗？

我尝试过使用 Waypoint.js 的解决方案，但不幸的是我无法获得超过一个动画来使用该方法。如果有人知道如何让 Lottie 和 Waypoint 很好地合作，我将不胜感激。

我愿意接受任何脚本建议，即使它们要求我加载依赖项才能使其工作。任何帮助将不胜感激。另外，我应该指出，我对 Lottie 是个新手，而且我是一名动画师，所以请留下详细的解释，因为我是 javascript 的初学者。

Answer 1

创建动画后，使用anim.goToAndStop(0)暂停它:

const animData = ... // Let's pretend that you loaded this from a .json file
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
canvas.className = 'myAnimation';

// Create the animation
const anim = lottie.loadAnimation({
  renderer: 'canvas',
  loop: true,
  autoplay: false,
  rendererSettings: {
    context: ctx,
    scaleMode: 'noScale',
    clearCanvas: true,
  },
  animationData: animData,
});

// Go to the first frame and pause
anim.goToAndStop(0);

然后，您可以使用 OnScreen ( https://github.com/silvestreh/onScreen ) 之类的东西来检测动画何时可见:

import OnScreen from 'onscreen';
const os = new OnScreen();

os.on('enter', '.myAnimation', (element, event) => {
    anim.play(); // If animation becomes visible, play it
});

os.on('leave', '.myAnimation', (element, event) => {
    anim.goToAndStop(0); // If animation goes off screen, reset it
});

以上内容适用于单个动画，但通过一些细微的调整，它可以扩展到多个动画。