elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Estamos en la red social de Mastodon


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Desaparece mi imagen en animación con HTML5
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Desaparece mi imagen en animación con HTML5  (Leído 4,955 veces)
SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Desaparece mi imagen en animación con HTML5
« en: 27 Septiembre 2021, 06:59 am »

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?


En línea

AlbertoBSD
Programador y
Moderador Global
***
Desconectado Desconectado

Mensajes: 3.705


🏴 Libertad!!!!!


Ver Perfil WWW
Re: Desaparece mi imagen en animación con HTML5
« Respuesta #1 en: 27 Septiembre 2021, 11:53 am »

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!


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: Desaparece mi imagen en animación con HTML5
« Respuesta #2 en: 27 Septiembre 2021, 15:41 pm »

¿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
En línea

MinusFour
Moderador Global
***
Desconectado Desconectado

Mensajes: 5.529


I'm fourth.


Ver Perfil WWW
Re: Desaparece mi imagen en animación con HTML5
« Respuesta #3 en: 27 Septiembre 2021, 16:14 pm »

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.
En línea

SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Re: Desaparece mi imagen en animación con HTML5
« Respuesta #4 en: 26 Octubre 2021, 05:38 am »

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
  1. canvas_spr=document.getElementById("myCanvas");
  2.          canvas_spr.width= 145;
  3.          canvas_spr.height= 175;
  4.          var time_changecaracter;
  5.          var cc=1;
  6.          var tiempo_edit=30;
  7.          var url_spr = "../Avatar/000001/";
  8.          var ctx_spr=canvas_spr.getContext("2d");
  9.  
  10.          var img_spr= new Image();
  11.          img_spr.src= url_spr;
  12.          ctx_spr.drawImage(img_spr,0,0,145,175);
  13.          time_changecaracter= setInterval(function(){
  14.          switch(cc){
  15.          case 1:img_spr.src= url_spr+ cc+ ".png";break;
  16.          case 2:img_spr.src= url_spr+ cc+ ".png";break;
  17.          case 3:img_spr.src= url_spr+ cc+ ".png";break;
  18.          case 4:img_spr.src= url_spr+ cc+ ".png";break;
  19.          case 5:img_spr.src= url_spr+ cc+ ".png";break;
  20.          case 6:img_spr.src= url_spr+ cc+ ".png";break;
  21.          case 7:img_spr.src= url_spr+ cc+ ".png";break;
  22.          case 8:img_spr.src= url_spr+ cc+ ".png";break;
  23.          case 9:img_spr.src= url_spr+ cc+ ".png";break;
  24.          case 10:img_spr.src= url_spr+ cc+ ".png";break;
  25.          case 11:img_spr.src= url_spr+ cc+ ".png";break;
  26.          case 12:img_spr.src= url_spr+ cc+ ".png";break;
  27.          case 13:img_spr.src= url_spr+ cc+ ".png";break;
  28.          case 14:img_spr.src= url_spr+ cc+ ".png";break;
  29.          case 15:img_spr.src= url_spr+ cc+ ".png";break;
  30.          case 16:img_spr.src= url_spr+ cc+ ".png";break;
  31.          case 17:img_spr.src= url_spr+ cc+ ".png";break;
  32.          case 18:img_spr.src= url_spr+ cc+ ".png";break;
  33.          case 19:img_spr.src= url_spr+ cc+ ".png";cc= 0;break
  34.        };
  35.          ctx_spr.clearRect(0,0,145,175);ctx_spr.drawImage(img_spr,0,0,145,175);cc++},tiempo_edit);
  36.  



Ahora estoy estoy haciendo usando el spritesheet
Código
  1. var sprite_spr,sprite_sheet,canvas_spr;
  2.    function sA01 () {
  3.      window.requestAnimationFrame(sA01);
  4.      sprite_spr.update();
  5.      sprite_spr.render();
  6.    }
  7.     function sprite (options) {
  8.    var that = {},frameIndex = 0,tickCount = 0,ticksPerFrame = options.ticksPerFrame || 0,numberOfFrames = options.numberOfFrames || 1;
  9.    that.context = options.context;
  10.    that.width = options.width;
  11.    that.height = options.height;
  12.    that.image = options.image;
  13.    that.update = function () {
  14.            tickCount += 1;
  15.            if (tickCount > ticksPerFrame) {
  16.              tickCount = 0;
  17.                if (frameIndex < numberOfFrames - 1) {
  18.                    frameIndex += 1;
  19.                } else {
  20.                    frameIndex = 0;
  21.                }
  22.            }
  23.        };
  24.    that.render = function () {
  25.      that.context.clearRect(0, 0, that.width, that.height);
  26.      that.context.drawImage(
  27.        that.image,
  28.        frameIndex * that.width / numberOfFrames,
  29.        0,
  30.        that.width / numberOfFrames,
  31.        that.height,
  32.        0,
  33.        0,
  34.        that.width / numberOfFrames,
  35.        that.height);
  36.    };
  37.    return that;
  38.  }
  39.          canvas_spr=document.getElementById("myCanvas");
  40.          canvas_spr.width= 145;
  41.          canvas_spr.height= 175;
  42.          sprite_sheet = new Image();
  43.          sprite_spr = sprite({
  44.              context: canvas_spr.getContext("2d"),
  45.              width: 2755,
  46.              height: 175,
  47.              image: sprite_sheet,
  48.              numberOfFrames: 19,
  49.              ticksPerFrame: 3
  50.            });
  51.          sprite_sheet.addEventListener("load", sA01);
  52.        sprite_sheet.src = "../Avatar/000001/spritesheet.png";
  53.  
En línea

SrTrp


Desconectado Desconectado

Mensajes: 327


Script/C#


Ver Perfil
Re: Desaparece mi imagen en animación con HTML5
« Respuesta #5 en: 26 Octubre 2021, 07:14 am »

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

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
La ventana desaparece
Programación C/C++
jairogon 2 2,299 Último mensaje 26 Junio 2010, 13:54 pm
por Horricreu
desaparece unidad dvd
Windows
juanpac 3 4,635 Último mensaje 14 Marzo 2011, 15:57 pm
por TheInfinityJoker
html5 drag and drop ayuda (imagen dentro de div)
Desarrollo Web
Kase 0 2,068 Último mensaje 6 Mayo 2013, 11:13 am
por Kase
Animación html5 y svg
Desarrollo Web
kakashi20 1 1,571 Último mensaje 20 Noviembre 2015, 12:28 pm
por eLank0
Conexion de red me desaparece.
Windows
hanigaan 0 1,862 Último mensaje 26 Diciembre 2015, 22:31 pm
por hanigaan
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines