Foros del Web » Programando para Internet » Javascript »

Dar movimiento a grafica en canvas - Super favor

Estas en el tema de Dar movimiento a grafica en canvas - Super favor en el foro de Javascript en Foros del Web. Buenas compañeros, Hoy he perdido el dia como un imbecil. He estado intentando darle movimiento a una grafica en forma de tarta. Lo que quiero ...
  #1 (permalink)  
Antiguo 29/12/2013, 19:23
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Dar movimiento a grafica en canvas - Super favor

Buenas compañeros,

Hoy he perdido el dia como un imbecil. He estado intentando darle movimiento a una grafica en forma de tarta. Lo que quiero es que se muestren los trozos de tarta poco a poco, con aceleración y deceleracion. Osea que empiece lento y termine lento, en medio rapido.

El problema es que nunca he sido bueno para los movimientos. Requieren conocimientos y practica con funciones exponenciales, que nunca comprendo. He leido un monton de ejemplos y manuales, y no me entra en la cabeza.

Pido un enorme favor al foro, asi por las buenas , tened compasión. No os haceis idea del cabreo que llevo, jeje. He creado un ejemplo sencillo sin movimiento.

http://jsfiddle.net/kLjMU/1/

El caso es que es a la hora de darle movimiento cuando se me lia la cosa y acabo volviendome loco.

Lo que busco hacer es:

http://www.chartjs.org/docs/#pieChart-introduction

Creo que hacer el bounce ese es una locura de complejo... yo intentaba hacerlo progresivo con deceleración, pero ni con esas.

¿Algun alma caritativa?... creo que es la primera vez que pido algo de forma tan lamentable en el foro, pero es una cosa que se me atraganta esto de las funciones con aceleración... por favor... no me envieis un link a un manual, jeje.

Repito: se que esta mal pedirlo, pero mi mente corre peligro. Esta apunto de estallar, cambiando variables en funciones que no soy capaz de comprender, sin cenar... sin beber... volviendome loco.

Siempre que quiero hacer esta tarta con movimiento termino usando un framework, pero ya estoy harto! de tanto framerwork.

Igual otro loco como yo me comprende y me libera de esta carga mortal.

Cuando me topo con este tipo de problemas, te das cuenta lo poco que sabes.


Última edición por 0123; 29/12/2013 a las 19:24 Razón: Lloro de la desesperación
  #2 (permalink)  
Antiguo 30/12/2013, 07:00
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Buenas a todos,

Os pongo el link a la nueva versión:

http://jsfiddle.net/kLjMU/2/

Tiene movimiento, pero es uniforme, y lo que busco es que tenga aceleracion inicial y deceleracion en el final.
  #3 (permalink)  
Antiguo 30/12/2013, 07:08
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Buenas de nuevo,

Ahora con aceleracion final:

http://jsfiddle.net/kLjMU/4/

:D
  #4 (permalink)  
Antiguo 30/12/2013, 07:13
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Buenas jojo,

Ahora mejor:

http://jsfiddle.net/kLjMU/6/

:P
  #5 (permalink)  
Antiguo 30/12/2013, 07:15
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Y ahora super bien!

http://jsfiddle.net/kLjMU/7/

Aunque me gustaria darle un bounce... que no se ni como hacer.
  #6 (permalink)  
Antiguo 30/12/2013, 07:17
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Con datos:

http://jsfiddle.net/kLjMU/8/

:D
  #7 (permalink)  
Antiguo 30/12/2013, 08:04
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Buenas a todos,

Por fin lo he conseguido... tras 15 horas. Joder!,

http://jsfiddle.net/kLjMU/17/

:D

CON BOUNCEEEEE!!!!!!..... YUJUUUU!!!... es triste que nadie me diga lo bonito que me ha quedado. :P, jeje

Última edición por 0123; 30/12/2013 a las 12:20
  #8 (permalink)  
Antiguo 30/12/2013, 14:49
Avatar de marlanga  
Fecha de Ingreso: enero-2011
Ubicación: Murcia
Mensajes: 1.024
Antigüedad: 13 años, 3 meses
Puntos: 206
Respuesta: Dar movimiento a grafica en canvas - Super favor

Lo he rehecho utilizando objetos, consiguiendo un código mucho más claro. También he puesto mas animaciones posibles easeIn, de aceleración, easeOut, deceleración, y la lineal, de veolcidad constante, que es la mas básica.

http://jsfiddle.net/marlanga/4g7m2/

La animación se puede cambiar en la línea 56 con algunas de las animaciones definidas en el objeto ANIMACION creado en la primera linea.
  #9 (permalink)  
Antiguo 01/01/2014, 15:46
Avatar de 0123  
Fecha de Ingreso: noviembre-2012
Ubicación: Entre la consola, el coda y un poco de photoshop
Mensajes: 263
Antigüedad: 11 años, 5 meses
Puntos: 10
Respuesta: Dar movimiento a grafica en canvas - Super favor

Muchas gracias marlanga, jeje... perfecto!!!

Etiquetas: canvas, favor, funcion, js, movimiento, super, variable
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:15.