Preparar motion graphics para programación javascript
4 seguidores
Buenos días,
Trabajo sobre una página programada en Javascript y css3 y me gustaría introducir animaciones, pero al programador le resulta difícil hacerlas él mismo y me preguntaba si habría alguna manera de preparar las animaciones hechas en After Effects o Flash para dárselas en vez que las tenga que hacer él programadas.
No encuentro nada útil en Google acerca del tema y quizás alguien por aquí ya lo haya hecho.
Muchas Gracias
smalonso Mod
Depende del tipo de animaciones. ¿Son de interfaz o de gráficos?
En After tienes un plugin que se llama Bodymovin y puedes exportar lo que hagas a html5, te lo exporta como svg si no recuerdo mal. Tienes un programa que se llama Framer con el cual puedes preparas las animaciones de interfaz y el código que genera es coffescript, pero se puede traducir a javascript sin problema. Y si tienes un poco de mano con el código puedes usar GSAP, es un estándar hoy en día. Es una librería que ya existía para Flash y hace unos años sacaron la versión js con los mismos fundamentos.
Hay mas opciones pero creo que con alguna de ellas ya puedes solventar la tarea.
rafael_o Mod Plus
After effects te genera un video y flash... un archivo de flash.
Tienes que buscar un programa diferente, dependiendo de la animación...
Tus opciones son un gif animado que puede ser partiendo de la animación de flash o un video.
Sprite animation, o sea sacar cuadro por cuadro y luego animarlo con CSS.
O usar un programa como Adobe Animate, Google web design, para generar una animación CSS directamente.
Pero tienes que entender que es lo que en realidad estás animando, si son simples posiciones y rotaciones de elementos o es por ejemplo un personaje caminando. Si no defines que es tu animación es difícil decidir las opciones.
---
La respuesta anterior era para el foro de ilustración y animación.
Al pegar el tema en el foro de JavaScript estás indicando un requerimiento, que probablemente no es necesario. Que la animación va a ser elaborada en JavaScript. JavaScript puede animar con una cosa que se llama canvas o directamente moviendo cosas en el navegador, pero ya casi no es el caso, esto se resuelve normalmente con CSS o gifs animados, no con JavaScript. (depende del caso)
Enfoca tu pregunta, (no la pongas por todos lados) aclara tus ideas y pon un ejemplo y vas a obtener mejores resultados.
urquizar
Hola como dice Rafael deberías de explicar mejor lo que andas buscando, si lo que quieres es además interacción con el usuario (es lo interpreto por el uso de JavaScript), lo que puedes hacer es crear tus objetos en SVG con Illustrator o Inkscape por ejemplo y con alguna librería JS animar al estilo Snap.svg.
Si es lo que andas buscando te recomiendo que mires este curso en domestika que tiene muy buena pinta y trata la animación con svg.
Suerte
smalonso Mod
@rafael-8 ¿el lunes bien? tranquilo amigo. Si que es verdad que lo ha preguntado tres veces, eso no es spammear sino que seguramente inseguridad de dónde publicar un hilo. Se comenta de buen rollo y no pasa nada. En el foro de javascript es correcto que lo ponga ya que es una de las soluciones más probables para crear el output que necesita.
La normalidad no es resolverlo con gifs animados o css, sólo es otra opción pero no la más óptima siempre. Y sí, se resuelve con javascript en mayor medida e incluso con clips de vídeo bien integrados con la interfaz también. Como comentan, si facilitas más información de que tipo de asset que se trata, se puede ser más preciso con la solución.
Te adjunto un par de ejemplos hechos con el plugin de After effects que te he comentado antes, Bodymovin. Al final lo que exporta de After también son SVGs manipulados por javascript.
- El juego de Party pooper
- La cabecera de entrada de Softfaçade que tiene un mix con un fondo de vídeo y SVG animado por encima. Y si navegas hacia abajo tienes unos iconos que introducen secciones, que son gif.
A ver si este tipo de ejemplos encajan con lo que tienes que hacer y te dan una idea de la solución. Salut!
rafael_o Mod Plus
Ok. Edité un poco la respuesta para que no parezca tan Grinch. Caritas felices. :o)
irene_safont
Hola!
Muchas Gracias por contestar. Efectivamente no sabía dónde poner el hilo, disculpas si ha podido molestar tanto, ya he borrado los otros hilos.
@samuelalonso es más bien animación tipo Softfaçade.
Para animar botones, letras que aparezcan en fade in / fade out, serían SVG con movimientos de rotación, posición, escala,etc.
El problema que he visto con Bodymovin es que trabajo con AE CS6. Pero parece que con CC 2014 ya funciona, así que si veo que puedo usaré Bodymovin ya que parece la mejor solución a mi problema.
Las animaciones que pueden hacer los desarrolladores en éste momento son muy básicas y quiero dejárselo fácil y tener el mejor resultado posible.
Muchas Gracias a todos!
Se aceptan más sugerencias! Todo conocimiento es poco.
rafael_o Mod Plus
Para escalar, rotar, opacidad (fade) y posición revisa si no es mejor usar CSS directamente, principalmente si van a ser botones, ya que se me hace que van a ser animados por un hover.
Acá hay un ejemplo:
http://jsfiddle.net/BhZjV/554/
Pero hay ejemplos bastante más elaborados. Aparte hay una librería CSS con evectos como rebotes etc. Animate.css https://daneden.github.io/animate.css/