javascript - 在 GSAP 中使用循环来获取多个对象

Question

大家好..

我想知道是否可以在GSAP中使用循环，或者它可能对这种情况有一些特殊的东西。

在我的情况下，我有 ul 元素和 30 li 项。

我想给他们增加单独的动画。

例如这样

TweenMax.to($(".blue"), 1,{x:100,y:50},"+=1")
TweenMax.to($(".red"), 1,{x:10,y:50},"+=1")
TweenMax.to($(".purple"), 1,{x:80,y:10},"+=1")
TweenMax.to($(".green"), 1,{x:35,y:70},"+=1")

ul li {
  position:absolute;
  left:50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<ul>
  
  <li class="blue">1</li>
  <li class="red">2</li>
  <li class="purple">3</li>
  <li class="green">4</li>
</ul>

就像您在下面的代码片段中使用的那样，有 30 li 项带有图标，当窗口加载时，此图标会传播到 Js< 选择的任何随机位置.

如何用循环组织此代码。

尝试 1.forEach 循环

let liItems = document.querySelectorAll("li");

[...liItems].forEach((items) => {
    TweenMax.to(items, 1,{x:35,y:70},"+=1")
}

这不起作用。

尝试 2 个for 循环

let liItems = document.querySelectorAll("li");

for(let i = 0;i < liItems.length;i++){
   TweenMax.to(liItems[i], 1,{x:35,y:70},"+=1")
}

对我来说也不起作用。

请帮忙

Answer 1

试试这个(你可能不得不稍微弄乱随机数的高值......

const randomNum = (low, high) => {
  const r = Math.floor(Math.random() * (high - low + 1)) + low;
  return r;
};

let liItems = document.querySelectorAll('li');

liItems.forEach(items => {
  TweenMax.to(items, 1, { x: `${randomNum(0, 180)}`, y: `${randomNum(0, 100)}` });
});