Tenemos un teletipo en la parte inferior de una página HTML que muestra noticias, como un teletipo de noticias en la televisión. Actualmente usamos requestAnimationFrame para esto, pero experimentamos que no siempre anima bien y me pregunto si alguien sabe cuál sería la mejor práctica para esto.
En primer lugar, intentamos ejecutarlo en una Raspberry Pi y no pudo reproducirlo bien sin importar lo que intentáramos.
En segundo lugar, lo estamos ejecutando en una PC con Windows en un navegador Chrome y, en general, funciona bien, pero si reproducimos un video de alta resolución en la misma página, la visualización del ticker se vuelve muy lenta.
Entiendo que está compitiendo por los recursos, pero animar un ticker, en principio, no debería requerir muchos recursos, así que creo que debería haber una solución para esto.
Aquí está nuestro código actual. Es mecanografiado y no javascript simple, pero mi pregunta no se trata tanto de detalles de solución de problemas en mi código actual, sino más bien de encontrar el mejor enfoque que supongo que es algo diferente de lo que estamos haciendo ahora:
private startTicker() { const ticker = document.getElementById(`RssTickerContainer_${this.props.rssTicker?.rssTicker?.url}`); if (!ticker || !this.state.items || this.state.items.length === 0) { setTimeout(() => { if (this.props.rssTicker?.rssTicker?.url) { // try to fetch rss content again after 1 second this.getRssFeed(this.props.rssTicker?.rssTicker?.url, true); } }, 1000); return; } console.log("Starting RSS ticker"); const startPosition = this.state.leftPosition; let leftPosition = startPosition; let lastFrameCalled = performance.now(); let fps = 0; this.animationFrameID = requestAnimationFrame(() => this.animateTicker(lastFrameCalled, fps, startPosition, leftPosition, ticker)); } private animateTicker(lastFrameCalled: number, fps: number, startPosition: number, leftPosition: number, ticker: HTMLElement) { // calculate fps const timeSinceLastFrame = (performance.now() - lastFrameCalled) / 1000; lastFrameCalled = performance.now(); fps = 1 / timeSinceLastFrame; const containerWidth = ticker.getBoundingClientRect().width; if (containerWidth <= 0) { // no content, component probably has unmounted return; } if ((leftPosition * -1) > containerWidth) { // when leftPosition (inversed, since has negative value) is greater than containerWidth, // this means that all elements has passed the screen so we restart the ticker console.log("Restarting RSS ticker"); leftPosition = startPosition; ticker.style.left = leftPosition + "px"; this.getRssFeed(this.props.rssTicker?.rssTicker?.url); } else { const timeToCross = 25; // use fps to set the new position to avoid slow animations on weaker devices const step = window.innerWidth / timeToCross / fps; leftPosition = leftPosition - step; ticker.style.left = leftPosition + "px"; } this.animationFrameID = requestAnimationFrame(() => this.animateTicker(lastFrameCalled, fps, startPosition, leftPosition, ticker)); }