如何动态调整anime.js中的duration参数?

时间:2019-03-28 11:12:46

标签: anime.js

在anime.js代码中,我需要根据外部因素动态调整动画的持续时间。

这是我的默认代码。持续时间参数现在为4000,但在某些情况下需要为其他值。

anime({
        targets: '.target',
        translateX: 400,
        delay: function (el, i) {
            return i * 100;
        },
        direction: 'reverse',
        rotate: '2turn',
        loop: true,
        duration:4000, // THIS NEEDS TO BE DYNAMIC
        autoplay: false,
        easing: 'easeInOutQuad',
        begin: function(anime) {

            $('.target').fadeIn(2000);
        }
    });

我需要的是类似的东西

var MyDuration= $('.myInput').val();

anime({
        targets: '.target',
        translateX: 400,
        delay: function (el, i) {
            return i * 100;
        },
        direction: 'reverse',
        rotate: '2turn',
        loop: true,
        duration: MyDuration,  // THIS NEEDS TO BE DYNAMIC
        autoplay: false,
        easing: 'easeInOutQuad',
        begin: function(anime) {

            $('.target').fadeIn(2000);
        }
    });

但这显然不起作用。我也尝试过使用函数:


duration: function(){ return $('.myInput').val(); }

这也失败了。我被正式困住了。我想要在anime.js中实现什么,如果可以,该怎么办?

0 个答案:

没有答案