He creado una animación de carrusel de texto infinito usando HTML Canvas. Puedes ver cómo funciona la animación aquí: https://codepen.io/m1llipede/pen/zYdLBBP

Esencialmente, estoy agregando una nueva cotización a una matriz de visualización después de que la cotización anterior alcance un punto específico en el lienzo:

 // if this quote is at the top of canvas if (Math.floor(this.y) == 80 && this.callNextQuote) { // call next quote addToDisplayArr() // set flag so this wont run again this.callNextQuote = false }

Luego, elimino esa cita de la matriz de visualización cuando la cita ha salido de la parte inferior del lienzo:

 // if this quote has reached the end of the canvas if (this.y > ctx.canvas.height + 50 && this.removedQuote == false) { // remove this quote from display arr removeFromDisplayArr() // set flag so this wont run again this.removedQuote = true }

También estoy animando la opacidad de cada cita, desvaneciéndolas cuando llegan al centro del lienzo y luego desvaneciéndolas cuando llegan al fondo. Aquí es donde está ocurriendo el error. Notará que cada vez que se agrega un nuevo objeto de cotización a la matriz de visualización. la primera cita en la matriz parece tener su opacidad puesta a cero. Esto está causando el parpadeo no deseado en las primeras comillas que se animan en el lienzo.

Aquí es donde estoy manejando la adición/eliminación de comillas:

 // one by one push item from api to display array function addToDisplayArr() { // reset index is we've reached all quotes from API if (lastIndex == quoteData.length) { lastIndex = 0 } // create new quote object and add it to display array displayArr.push(new Quote(quoteData[lastIndex].message, quoteData[lastIndex].name)); // increase to next index lastIndex++ } // remove quote from display array once it has left the screen function removeFromDisplayArr() { displayArr.shift() console.log('removed:', displayArr, lastIndex) }

¿Podría ser un problema con la forma en que agrego nuevas comillas a la matriz de visualización? Si es así, ¿cómo debo agregar nuevas cotizaciones sin afectar la representación de las otras cotizaciones?

Otra nota: en producción, obtendrá cotizaciones de una API que se actualizará con el tiempo a medida que se ejecuta la animación, obteniendo nuevas cotizaciones a medida que se agregan a la base de datos.