使用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元素.你看过这个吗？

1. 将元素转换为数组,如下所示:var elements=$('.animate').toArray();.
2. 使用这种技术对这个数组进行混洗: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 在这里.

请注意,在洗牌阵列方面有很多解决方案.