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

Question

我一直在搜索多个论坛寻找这个问题的解决方案 - 当每个动画进入HTML网页上的浏览器窗口时，我正在尝试编写多个lottie动画。有没有人有工作的解决方案？

我尝试过使用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
});

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