0

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

我认为我没有正确的语法来使用 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();

谢谢

4

2 回答 2

1

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

首先，我假设 HTML 中的动画具有相同的类，但具有不同的 id - 我使 id 与动画文件名相同（即动画/privacy.json，DOM id“privacy”，动画名称“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);
于 2018-07-27T13:36:09.807 回答
0

也许anim.play改成anim.play()?

function myFunction() {
    if (document.body.scrollTop > 50) {
        anim.play(); // this line
    }
}
于 2017-03-06T22:34:14.250 回答