在 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 个带有图标的项目，当 window 加载时，这个图标会散布到选择的任何随机位置通过 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)}` });
});

在 GSAP 中使用循环获取多个对象的

Use loop in GSAP for taking multiple object's

javascript

gsap