我正在尝试使用 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 元素设置动画,而是为它的虚拟克隆设置动画。
不幸的是,我不知道如何从这里开始。
谁能帮帮我?谢谢!
最佳答案
我可能无法理解您的场景,但似乎在它的核心,我认为您的问题更多是关于随机化 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当涉及到改组数组时。
关于javascript - 使用 TweenMax 以随机顺序交错动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29564960/