actualmente estoy trabajando en la animación JS para la tableta MFD. En este momento estoy recibiendo problemas de rendimiento. Escribo un pequeño guión para animación y funciona bien. Pero tan pronto como toco la pantalla, comienza a parpadear. Puedes ver el código completo aquí
<html> <head> <title>JS SpeedTest</title> </head> <style> .row, .row1 { display: flex; } .row1 { margin-top: 20px; } .block { background: black; width: 30%; height: 50px; margin: 5px; } </style> <body> <div class="row"> <div class="block" style="background: red;"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> <div class="row1"> <div class="block" style="background: red;"></div> <div class="block"></div> <div class="block"></div> <div class="block"></div> </div> </body> <script> (() => { function* step() { let back = false; let n = 0; while (true) { if (n >= 200) { back = true; } if (n <= -200) { back = false; } yield back ? n-- : n++ } } Array.prototype.forEach.call( document.getElementsByClassName('row'), function(el) { const nextStep = step(); setInterval( () => { Array.prototype.forEach.call( el.getElementsByClassName('block'), (b, index) => { b.style.transform = `translate(${nextStep.next().value}px, 0px)`; }); }, 20 ); }); Array.prototype.forEach.call( document.getElementsByClassName('row1'), function(el) { const nextStep = step(); setInterval( () => { Array.prototype.forEach.call( el.getElementsByClassName('block'), (b, index) => { const val = nextStep.next().value; b.style.transform = `translate(${val}px, 0px) scale(${val / 100})`; }); }, 20 ); }); })(); </script> </html>también puede ver el comportamiento en el video https://drive.google.com/file/d/1DUrc1N9ZvYxOsnUgnEVQKh7ZRFVrtTPu/view?usp=sharing
¿Alguna idea sobre cómo puedo mejorar el rendimiento?