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个循环

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中使用循环获取多个对象

1 个答案: