Estoy tratando de apuntar a un elemento aleatorio en cada bucle de una animación anime.js con fotogramas clave.
Mirando la documentación , puedo ver que hay una función de devolución de llamada loopComplete . Entonces, creé una función para asignar un elemento secundario aleatorio a la variable random_target .
Si bien puedo ver en el registro de la consola que el valor de random_target está cambiando, el ciclo anime.js continúa apuntando al random_target generado por primera vez.
¿Cómo puedo asegurarme de que la animación se reoriente al finalizar el ciclo?
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>Después de profundizar en el objeto anim proporcionado a la función de devolución de llamada, pude resolver esto. Necesitaba actualizar algunos objetivos en el objeto de animación porque, una vez inicializada, la animación no busca un valor objetivo actualizado.
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; } })No estoy seguro de si esta es la mejor manera de hacerlo, pero funciona para mí.