如何在 anime.js 的每个循环中定位一个随机子元素？

Question

我试图在关键帧 anime.js 动画的每个循环中定位一个随机元素。

查看documentation，可以看出有一个loopComplete回调函数。因此，我创建了一个函数来将随机子元素分配给变量 random_target.

虽然我可以在控制台日志中看到 random_target 的值正在更改，但 anime.js 循环继续以第一个生成的 random_target.

为目标

如何确保动画在循环完成时重新定位？

var pulseTargets = document.querySelector(".pulse-parent").children;
var random_target = null;

function getRandomTarget() {
  random_target = pulseTargets[Math.floor(Math.random() * pulseTargets.length)];
}

getRandomTarget();
console.log(random_target);
anime({
  targets: random_target,
  keyframes: [{
    opacity: 1
  }, {
    opacity: 0.3
  }, {
    opacity: 1
  }],
  duration: 3000,
  loop: true,
  loopComplete: function(anim) {
    getRandomTarget();
    console.log(random_target)
  }
});

.even\:font-light> :nth-child(even) {
  font-weight: 300;
}

.odd\:font-black> :nth-child(odd) {
  font-weight: 900;
}

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
</head>
<body>
  <div class="container col-span-full mx-auto h-auto relative mt-32 pb-16">
    <div class="grid grid-cols-1 md:grid-cols-3">
      <div class="pulse-parent block font-sans odd:font-black tracking-widest even:font-light text-amber-400 col-span-1 h-[6em] overflow-hidden -mt-4 text-justify" style="text-justify: inter-character">
        <span>CHILD1</span> <span>CHILD2</span> <span>CHILD3</span> <span>CHILD4</span> <span>CHILD5</span>
      </div>
    </div>
  </div>
</body>
</html>

codepen here if snippet is not working

Answer 1

在深入研究了提供给回调函数的 anim 对象之后，我弄明白了这一点。我需要更新动画对象上的一些目标，因为一旦初始化动画就不会寻找更新的目标值。

    var pulseTargets = document.querySelector('.pulse-parent').children
    var random_target = null
    function getRandomTarget() {
        random_target =  pulseTargets[Math.floor(Math.random() * pulseTargets.length)]
    }

    getRandomTarget()
    console.log(random_target)
    anime({
        targets: random_target,
        keyframes: [
            {opacity: 1},
            {opacity: 0.3},
            {opacity: 1}
        ],
        duration: 3000,
        loop: true,
        loopComplete: function (anim) {
            getRandomTarget();
            anim.targets = random_target;
            anim.animatables[0].target = random_target;
            anim.animations[0].animatable.target = random_target;
        }
    })

我不确定这是否是最好的方法，但它对我有用。

如何在 anime.js 的每个循环中定位一个随机子元素？

How can I target a random child element on each loop of anime.js?

javascript

anime.js