滚动时逐帧播放bodymovin动画

时间:2019-06-16 15:49:03

标签: scroll lottie bodymovin

我在Wordpress中加载了bodymovin动画,我正在使用的脚本效果很好,但Jquery.min.js与主题文件冲突并停止了主题中的重要功能。

我正在寻找一种避免加载Jquery.min.js的替代方法,但到目前为止我找不到任何有效的方法。

<script>
var theWindow = $(window);
var winHeight = theWindow.height();
var animDuration = winHeight * 5;
var animData = {
container: document.getElementById('container'),
renderer: 'svg',
loop: true,
autoplay: false,
path: 'http://anthonynoyce.design/verbose/wp-content/uploads/2019/06/data.json'
};
var anim = bodymovin.loadAnimation(animData);

$( window ).scroll(function() {
animatebodymovin(animDuration, anim);
});

function animatebodymovin(duration, animObject) {

var scrollPosition = theWindow.scrollTop();
var maxFrames = animObject.totalFrames;
var frame = (maxFrames / 150) * (scrollPosition / (duration / 100));

animObject.goToAndStop(frame, true);

}
</script>

我得到的错误是:

Uncaught TypeError: Cannot read property 'concat' of undefined
at custom.min.js?ver=3.23.3:97
at custom.min.js?ver=3.23.3:97
at custom.min.js?ver=3.23.3:97
at custom.min.js?ver=3.23.3:97

0 个答案:

没有答案