Desaparece mi imagen en animación con HTML5

[SrTrp]

Estoy usando 19 imágenes para hacer esta animación lo que pasa es que a veces como que parpadea y a veces da la animación perfecta, pensé en meter las 19 imágenes en solo 1 y solo ir cambiando el posicionamiento de la imagen las imágenes miden 800*800, no se si esto las debo redimensionar y meterlas en una sola imagen y esto se solucionara?

[AlbertoBSD]

Interesante proyecto, me a tocado utilziar html5 para hacer secuencias de video utilizando imagenes y funciona bien.

Todo depende de como este tu codigo, creo que es un problema de sincronizacion. Si lo que mencionas es correcto, deberias de poder meter todas las imagenes en un solo layer y solo graficar esta ultima imagen para evitar que se sobreescriban las capas en el orden incorrecto.

Saludos!

[#!drvy]

¿Cargas 19 imagenes? No hagas eso xD

Mételas en un sprite y posiciona sobre la que te interese en cada frame de la animación.

O a las malas intenta precargar las 19 imágenes para que no tengas el flick que ves (que se da por la espera en cargar la imagen). Puedes precargarlas con JS y luego ya haces lo que te de la gana. Pero vamos, es más limpio y óptimo hacer un sprite.


Saludos

[MinusFour]

Eh... sin ver que estás haciendo es difícil saber. Quiero creer que las 19 imágenes son solo del zorro. Si piensas reutilizar estas imagenes para hacer más animaciones pues entonces si sería mejor usar sprites como dice drvy. Si es solo una animación que no piensas reusar, pues mejor ponerlo todo en un gif.

[SrTrp]

Hola muchas gracias, por sus respuestas y una disculpa por contestar apenas, voy entrando y realice la supuesta 'solución', metí las 19 imágenes a un spritesheet, pero ahora obtengo este resultado, que me da como una salto va bajando las manos y usando la otra tecnica de cargar 19 imágenes no pasaba esto.

Anterior mente lo que pasaba era de que parpadeaba mi imagen, ahora como que no corre todos los frames, les dejo ambos códigos para que vean como lo ejecuto y ejecutaba:
Este es el antiguo cargando 19 imágenes:

Código (javascript) [Seleccionar] Expandir


canvas_spr=document.getElementById("myCanvas");
          canvas_spr.width= 145;
          canvas_spr.height= 175;
          var time_changecaracter;
          var cc=1;
          var tiempo_edit=30;
          var url_spr = "../Avatar/000001/";
          var ctx_spr=canvas_spr.getContext("2d");

          var img_spr= new Image();
          img_spr.src= url_spr;
          ctx_spr.drawImage(img_spr,0,0,145,175);
          time_changecaracter= setInterval(function(){
          switch(cc){
          case 1:img_spr.src= url_spr+ cc+ ".png";break;
          case 2:img_spr.src= url_spr+ cc+ ".png";break;
          case 3:img_spr.src= url_spr+ cc+ ".png";break;
          case 4:img_spr.src= url_spr+ cc+ ".png";break;
          case 5:img_spr.src= url_spr+ cc+ ".png";break;
          case 6:img_spr.src= url_spr+ cc+ ".png";break;
          case 7:img_spr.src= url_spr+ cc+ ".png";break;
          case 8:img_spr.src= url_spr+ cc+ ".png";break;
          case 9:img_spr.src= url_spr+ cc+ ".png";break;
          case 10:img_spr.src= url_spr+ cc+ ".png";break;
          case 11:img_spr.src= url_spr+ cc+ ".png";break;
          case 12:img_spr.src= url_spr+ cc+ ".png";break;
          case 13:img_spr.src= url_spr+ cc+ ".png";break;
          case 14:img_spr.src= url_spr+ cc+ ".png";break;
          case 15:img_spr.src= url_spr+ cc+ ".png";break;
          case 16:img_spr.src= url_spr+ cc+ ".png";break;
          case 17:img_spr.src= url_spr+ cc+ ".png";break;
          case 18:img_spr.src= url_spr+ cc+ ".png";break;
          case 19:img_spr.src= url_spr+ cc+ ".png";cc= 0;break
        };
          ctx_spr.clearRect(0,0,145,175);ctx_spr.drawImage(img_spr,0,0,145,175);cc++},tiempo_edit);




Ahora estoy estoy haciendo usando el spritesheet

Código (javascript) [Seleccionar] Expandir


var sprite_spr,sprite_sheet,canvas_spr;
    function sA01 () {
      window.requestAnimationFrame(sA01);
      sprite_spr.update();
      sprite_spr.render();
    }
     function sprite (options) {
    var that = {},frameIndex = 0,tickCount = 0,ticksPerFrame = options.ticksPerFrame || 0,numberOfFrames = options.numberOfFrames || 1;
    that.context = options.context;
    that.width = options.width;
    that.height = options.height;
    that.image = options.image;
    that.update = function () {
            tickCount += 1;
            if (tickCount > ticksPerFrame) {
              tickCount = 0;
                if (frameIndex < numberOfFrames - 1) {
                    frameIndex += 1;
                } else {
                    frameIndex = 0;
                }
            }
        };
    that.render = function () {
      that.context.clearRect(0, 0, that.width, that.height);
      that.context.drawImage(
        that.image,
        frameIndex * that.width / numberOfFrames,
        0,
        that.width / numberOfFrames,
        that.height,
        0,
        0,
        that.width / numberOfFrames,
        that.height);
    };
    return that;
  }
          canvas_spr=document.getElementById("myCanvas");
          canvas_spr.width= 145;
          canvas_spr.height= 175;
          sprite_sheet = new Image();
          sprite_spr = sprite({
              context: canvas_spr.getContext("2d"),
              width: 2755,
              height: 175,
              image: sprite_sheet,
              numberOfFrames: 19,
              ticksPerFrame: 3
            });
          sprite_sheet.addEventListener("load", sA01);
        sprite_sheet.src = "../Avatar/000001/spritesheet.png";


[SrTrp]

Encontré el eror gracias a los que me apoyarón.
El error era que ajuste un sprite en el frame que no debia..