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

【问题标题】：Stagger animation in a random order with TweenMax使用 TweenMax 以随机顺序交错动画
【发布时间】：2015-06-16 09:08:24
【问题描述】：

我正在尝试使用 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 元素设置动画，而是为它的虚拟克隆设置动画。

很遗憾，我不知道如何从这里开始。

谁能帮帮我？谢谢！

【问题讨论】：

标签： javascript jquery animation gsap

【解决方案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);，即您已经拥有的数组。
快速 jsFiddle here.

请注意，有很多solutions 涉及洗牌数组。

【讨论】：