Javascript 如何触发滚动功能

我有一些动画，当我滚动过页面中的某个点时，我想触发它们

我认为我没有使用scrollTop属性调用动画函数的正确语法。我用alert测试了一下，效果很好

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();

var illustar=['map'，'privacy'，'payment'，'rewards'，'security'，'passcode']；
幻觉变异；
函数addListenerToElement（e、anim）{
document.getElementById（e）.addEventListener（'mousedown'，function（）{
动画。游戏（）；
anim.addEventListener（'complete'，function（）{anim.goToAndStop（0，true）}）；
}
)};
函数buildIllus（）{
对于（变量i=0；i 50）{
动漫游戏
}}
buildIllus（）；

---

谢谢

也许可以将

anim.play

更改为

anim.play（）

---

我知道这是一个相当古老的话题，但我有同样的问题，我在任何地方都找不到答案。不过，多亏了你的例子，我才解决了这个问题，所以我决定与大家分享答案。也许这对其他人寻找同样的东西会有帮助

首先，我假设HTML中的动画具有相同的类，但具有不同的id-我使id与动画文件名相同（即animations/privacy.json、DOM id“privacy”、动画名称“privacy”）

哦，我用了洛蒂，但它和Bodymovin是一样的

HTML:

JS:

var animationsArray=['map'，'privacy'，'payment'，'rewards'，'security'，'passcode']；
动物变种；
函数buildAnimations（）{
对于（var i=0；i
function myFunction() {
    if (document.body.scrollTop > 50) {
        anim.play(); // this line
    }
}

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

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);