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

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了吗？ ？

1. 像这样将元素转换为数组:var elements=$('.animate').toArray();。
2. 使用 this 打乱这个数组技术:elements.sort(function(){return 0.5-Math.random()});。感谢 CSS-Tricks.com。
3. 然后将这个新数组提供给 staggerTo 调用:TweenMax.staggerTo(elements, 0.1, {y: 100, ease: Quad.easeInOut}, 0.1);即您已经拥有的东西。
4. 快速 jsFiddle here .

请注意有很多solutions当涉及到改组数组时。