Quiero tener una secuencia PNG que muestre 68 cuadros de animación y luego repita los 20 cuadros finales x cantidad de veces.
Basé mi código en la sugerencia de 'r3mainer' en su página: [https://stackoverflow.com/questions/43595504/play-one-part-of-gif-first-then-loop-a-certain-section- indefinidamente]
Pero no puedo hacer que funcione.
Creé la 'tira de película' PNG vertical, un archivo CSS con la información de estilo de fondo adecuada y un archivo JS al que se hace referencia en un HTML.
Con PNG, JS, HTML y CSS cargados, todo lo que obtengo para una imagen en la página es el primer 'marco' de la tira PNG. No hay mensajes de error.
Creo que hay algo que no entiendo sobre cómo se debe implementar el código JS.
Aquí está mi archivo HTML:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Strip Test</title> <script src="film_strip_script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="draw.css"> </head> <body> <div id="draw"></div> </body>El CSS:
#draw { width: 279px; height: 202px; margin: 0 auto; background: url(basquiat_strip.png) top center; }Archivo JavaScript:
$(function() { var ani = { frame_height: 202, num_frames: 68, loop_frame: 30, frame_duration: 1, cur_frame: 0 }; window.setInterval( function() { $('#draw').css( 'background-position-y', (-ani.frame_height * ani.cur_frame ) + 'px' ); ani.cur_frame = (ani.cur_frame + 1) % ani.num_frames; if (ani.cur_frame == 0) ani.cur_frame = ani.loop_frame; }, ani.frame_duration ); });