Question

当我滚动浏览页面中的某个点时，我想要触发一些动画。

我认为我没有使用scrollTop属性调用动画函数的正确语法。我用警报测试它，它工作正常。

var illustArr = ['map', 'privacy', 'payment', 'rewards', 'security', 'passcode'];
var illust;

function addListenerToElement(e, anim){
    document.getElementById(e).addEventListener('mousedown', function() {
    anim.play();
    anim.addEventListener('complete', function(){anim.goToAndStop(0,true)});
  }
)};

function buildIllus(){
for(var i=0;i<illustArr.length;i+=1){
    illust = document.getElementById(illustArr[i]);
    var params = {
        container: illust,
        autoplay: false,
        loop: false,
        animationData: animations[illustArr[i]],
        renderer: 'svg'
    };

    var anim = bodymovin.loadAnimation(params);

    illustArr.forEach(function (e) {
      addListenerToElement(e, anim)
      })
}
};

window.onscroll = function() {myFunction()};

function myFunction() {
if (document.body.scrollTop > 50) {
    anim.play
}}

buildIllus();

由于

Answer 1

我知道这是一个很老的话题，但是我遇到了同样的问题，而且在任何地方都找不到答案。但是，由于您的示例，我解决了这个问题，所以我决定分享答案。也许这对于其他人寻找相同的东西会有所帮助！

首先，我假定HTML中的动画具有相同的类，但是具有不同的ID-我确定ID与动画文件名相同（即，animations / privacy.json，DOM id为“ privacy”，动画名“隐私”）。

哦，我用过洛蒂（Lottie），但它与Bodymovin一样。

HTML：

<div class="animation" id="privacy">

JS：

var animationsArray = ['map', 'privacy', 'payment', 'rewards', 'security', 'passcode'];
    var anims;

    function buildAnimations(){
        for(var i=0; i<animationsArray.length; i++) {
            anims = document.getElementById(animationsArray[i]);
            var animationPath = "animations/" + animationsArray[i] +  ".json";
            var parameters = {
                container: anims,
                renderer: 'svg',
                loop: false,
                autoplay: false,
                path: animationPath,
                name: animationsArray[i]
            };

            var anim = lottie.loadAnimation(parameters);
        }
    }

    var animationPosition = function() {
        var winTop = $(window).scrollTop(),
        pageAnimation = $('.animation');

        pageAnimation.each(function(index) {
            var animationID = $(this).attr('id');

            if($(this).offset().top <= (winTop + 450)) {
                lottie.play(animationID);
            }
        });
    };

    buildAnimations();
    window.addEventListener('scroll', animationPosition);

Answer 2

也许将anim.play更改为anim.play()？

function myFunction() {
    if (document.body.scrollTop > 50) {
        anim.play(); // this line
    }
}

如何在滚动上触发功能

2 个答案: