Question

我正在尝试使用TweenMax创建一个staggerTo（）动画，它以随机顺序影响元素，这意味着我不希望实际动画是随机的，而是它的顺序。

为此，我使用此功能将我想要的所有元素设置为动画和随机播放：

$.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
                allElems.splice(random, 1);
                return randEl;
        });

    return $(shuffled);

};

var elements = $('.animate').shuffle();

然后我吃了staggerTo动画午餐：

TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1);

但是当然，我意识到自己错了，因为TweenMax并没有动画实际的DOM元素，而是它的虚拟克隆。

不幸的是，我不知道如何从这里开始。

有人可以帮帮我吗？谢谢！

Answer 1

我可能无法理解你的场景，但似乎在它的核心，我认为你的问题更多的是随机化一组jQuery元素。你看过this了吗？

将您的元素转换为数组，如下所示：var elements=$('.animate').toArray();。
使用this技术随机播放此数组：elements.sort(function(){return 0.5-Math.random()});。感谢CSS-Tricks.com。
然后将此新数组提供给staggerTo来电：TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1);，即您已有的数据。
Quick jsFiddle here。

请注意，在洗牌阵列方面有很多solutions。

使用TweenMax以随机顺序交错动画

1 个答案: