Esperando que puedas ayudarme. Soy nuevo en el uso de AnimationFrames (comencé a usarlo para cumplir con los requisitos comerciales). Me las arreglé para hacer una animación que cambia a medida que te desplazas (a través de codepens muy útiles), pero el problema que tengo es que solo agrega una nueva imagen y deja atrás la imagen anterior, dejando un rastro. (se puede ver aquí: https://aimtechnologies.com/scrolltest/index ). Sé que hay CancelAnimationRequest pero no estoy seguro de dónde ponerlo para resolver mi problema.
Vea a continuación el código:
const canvas = document.getElementById("hero-lightpass"); const context = canvas.getContext("2d"); const frameCount = 148; const currentFrame = index => ( `images/1 & 2 Intro & Exploded View_${index.toString().padStart(5, '0')}.png` ) const preloadImages = () => { for (let i = 1; i < frameCount; i++) { const img = new Image(); img.src = currentFrame(i); } }; const img = new Image() img.src = currentFrame(1); canvas.width=1158; canvas.height=770; img.onload=function(){ context.drawImage(img, 0, 0); } const updateImage = index => { img.src = currentFrame(index); context.drawImage(img, 0, 0); } window.addEventListener('scroll', () => { const scrollTop = html.scrollTop; const maxScrollTop = html.scrollHeight - window.innerHeight; const scrollFraction = scrollTop / maxScrollTop; const frameIndex = Math.min( frameCount - 1, Math.ceil(scrollFraction * frameCount) ); requestAnimationFrame(() => updateImage(frameIndex + 1)) }); preloadImages()```Prueba esto: context.clearRect(0, 0, canvas.width, canvas.height); justo antes de llamar a drawImage
Resuelto: use JPG en lugar de PNG
O si necesita usar cambios pngs
context.drawImage(img, 0, 0); } ``` to ```img.onload=function(){ context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage(img, 0, 0); }```