0

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

我已经尝试过使用 Waypoint.js 的解决方案，但不幸的是，我无法使用这种方法播放多个动画。如果有人知道让 Lottie 和 Waypoint 一起玩得很好的方法，我将不胜感激任何建议。

我对任何脚本建议持开放态度，即使它们要求我加载依赖项以使其工作。任何帮助将不胜感激。另外，我应该注意，我是 Lottie 的新手，我是一名动画师，所以请留下详细的解释，因为我是 javascript 的初学者。

4

2 回答 2

3

创建动画后，使用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
});

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

于 2019-03-12T23:02:37.073 回答
0

这里有一个简单的解决方案：

var container = document.getElementById('graph_ani'); animData = bodymovin.loadAnimation({ container: container, renderer: 'svg', autoplay: false, loop: false, path : 'graph.json' });

var animationStart = 0;
$(window).scroll(function(){
    animData.playSegments([animationStart,animationStart+1], true);
    animationStart++;
}

可以使用一些工作仅在可见时播放并在向下滚动时播放并在向上滚动时反向播放，但对于快速片段来说效果很好。

于 2020-01-24T00:52:44.173 回答