Sabes más de animaciones de lo que crees

Amo los cursos de Estefany ❤️ uno no quiere perderse ninguno.
¡Empecemos pues!
😃

Yo de pequeño veía dibujos animados en 2D de Mickey Mouse y a veces miraba este proceso de cómo las páginas iban pasando una detrás de otra, cada uno con un diujo de Mickey Mouse, pero en diferentes posturas jaja, eso lograba un efecto de movimiento 😂.
.
Creo que una de las principales diferencias a recalcar entre transiciones y animaciones, es que en transiciones simplemente vas de un punto A a un punto B, no menos, no más. En cambio, en una animación puedes definir tantos puntos com desees (también llamado KeyFrames), es decir, puedes ir de un punto A a un punto D pasando por un punto B y otro punto C.
.

.
Si alguna vez han tenido la oportunidad de probar programas de animaciones (como Adobe Animate o After Effects), pues el concepto de KeyFrames es el mismo 😄

¿Cuáles son los 12 principios de animación de Disney?

En este comentario te voy a mencionar los conceptos de cada uno de los 12 principios de animación. Sin embargo, hice un tutorial para que puedas ver un ejemplo de cada uno de los principios y además el código en html y css aqui.
.
Antes de empezar a describir los principios de animación de Disney, es importante mencionar que no todos aplican al desarrollo web, ya que lo que Disney trato de hacer fue representar elementos físicos al mundo digital. Sin embargo, en el desarrollo web, nosotros no tenemos que hacer eso, ya que normalmente todo es visto a través de cajas contenedoras.
.

Exprimir y estirar

Como su nombre lo indica, esta animación trata de representar a un elemento físico cuando este se estira y exprime. Esto lo podemos ver en animaciones de Disney muy frecuentemente cuando un personaje choca contra la pared, por ejemplo.
.

Anticipación

En la vida real, los movimientos no pasan de manera repentina. Antes de que un movimiento suceda, siempre hay una serie de movimientos que nos ayudan a entender que algo va a pasar. Por ejemplo, antes de dar un salto, lo primero que hacemos es tomar impulso y podemos inclinarnos. En el caso del desarrollo web, al momento de dar un hover a un elemento, esto puede hacerse un poco pequeño para posteriormente hacerse mas grande.
.

Puesta en escena

En algunas ocasiones, hay un personaje al que queremos que sea el protagonista en alguna escena en particular. Para que esto suceda, una buena forma es escondiendo o quitando del foco de atención a cualquier otro personaje alrededor. En el desarrollo web, podemos hacer esto con una sombra negra en los elementos que no queremos que tengan una protagonización, o incluso darle movimiento al elemento que queremos resaltar. Por ejemplo, a un botón de “Save” le podemos dar movimiento frecuentemente para que el usuario sepa que necesita guardar algún archivo.
.

Acción directa y pose a pose

El objetivo es hacer que la animación se vea tan suave como sea posible. Como se menciono anteriormente, hacer que los movimientos en la web luzcan tan similares como en la vida real. Para hacer esto hay dos formas de hacerlo.

• Manualmente (Acción directa)
• Pose a pose (Nos ayuda el navegador)

En la acción directa nosotros tenemos que determinar cada frame. En cambio, en el pose a pose, la transición entre los keyframes es manejada por el navegador.
.

Accion de seguimiento y superposicion

En la vida real NO todo se mueve a la misma velocidad y dirección. Por ejemplo, cuando vamos conduciendo muy rápido y frenamos de manera repentina, el auto todavía se sigue moviendo hacia adelante unos segundos para después regresar a la posición en la que debería detenerse. Además de esto, los pasajeros dentro del auto podrían salir volando si no llevan el cinturón de seguridad.
.

Acelerar y desacelerar

En la vida real rara vez las cosas van de 0 a 100 km/h en menos de un segundo. Normalmente, a las cosas les lleva unos segundos acelerar y desacelerar. En el mundo web, esto se logra con las transiciones, donde ease-in significa acelerar y ease-out es lo contrario, desacelerar.
.

Curvas

En la vida real las cosas no se mueven de manera lineal. Las lineas rectas no es algo que a la madre naturaleza le gusta hacer. En el mundo web, nosotros podemos hacer lucir a los elementos de una manera mas “natural” con el movimiento de ease-in & ease-out. Sin embargo, cuando queremos que un elemento simule una curva, tendremos que usar mas de una animación o movimientos. Por ejemplo, cuando una pelota esta cayendo, podemos simular una curva con 2 movimientos:

• El primero seria la pelota moviéndose de arriba a abajo
• El segundo movimiento seria la pelota moviéndose de izquierda a derecha.

.

Accion desencadenada

En el mundo real, cuando una acción sucede, hay otras acciones que nos ayudan a entender que la primera acción realmente paso. Por ejemplo, cuando un balón rebota en el césped, puede levantar pasto, o algún animales pueden salir asustados por el ruido del balón, etc.
En el caso del desarrollo web, nosotros podemos hacer que una acción desencadene a otra acción. Esto lo podemos hacer con timing donde ambas acciones están encadenadas y cuando no suceda la primera, no puede suceder la segunda.
.

Timing

El timing es simplemente cuanto tiempo le tomara a un elemento completar un movimiento. El timing nos ayuda a que un cierto elemento parezca mas pesado que otro cuando le agregamos mas timing. Podemos ajustar este tiempo que tarda un elemento en moverse con las propiedades de animation-duration o transition-duration.
.

Exageracion

La exageración es utilizada en Disney muy comúnmente para enfatizar una acción, tal como un golpe, una caída, etc. En el mundo web, nosotros podemos exagerar una acción cuando damos clic a un elemento o cuando una acción es completada, como la carga de un archivo. Con esto enfatizamos que la acción ya se realizo. Además de esto, la exageración puede ir acompañada de colores distintos en el elemento que esta siendo enfatizado.
.

Renderizacion en 3D

Cuando estamos trabajando con elemento 3D, tenemos que tener cuidado en que estos elementos cumplan con las reglas de perspectiva que rigen al mundo físico. De otra forma, estas formas en 3D lucen erróneas. La buena noticia es que la mayoría de los navegadores ya cumplen y pueden manejar renderizaciones en 3D.
.

Atraccion

Cuando usamos animaciones o transiciones, tenemos que estar seguros de que estas lucen amigables para el usuario. De otra forma pueden estresar al usuario si las animaciones van muy rápido o aburrirlo si van muy lentas. La idea es encontrar el punto medio.

🍿Sabes más de animaciones de lo que crees

❤Requisitos para realizar el curso

• [ ✅ ] Tener Curso de Transformaciones y Transiciones en CSS aprobado
• [ ✅ ] Que te guste el papayawhip y el hotpink

🧡Libro recomendado

Disney Animation: The Illusion of Life

💛Lecturas Recomendadas

Making The Transition From After Effects To CSS Transitions And Keyframes - Smashing Magazine

Animation Principles for the Web - CSS Animation

Curso de Transformaciones y Transiciones en CSS - Platzi

Para los que al igual que yo todavía no dominan bien el ingles. Les dejo un articulo sobre los 12 principios en español:
https://platzi.com/blog/doce-principios-animacion-disney/

Aporte en Ingles:
https://cssanimation.rocks/principles/

La mejor profe de Platzi de los cursos web 😌🙃😄

Genial, estaba esperando el curso!. Listo para el proyecto.

Un Libro importante de animacion es The Animator’s Survival Kit de Richard Williams

happy three friends, gran caricatura

Qué persona tan agradable Estefany, transmite mucha paz en sus cursos

Siempre que Estafany de un curso, tengan por seguro que será uno extremadamente bueno. ¡Éxito a todas!

https://www.notodoanimacion.es/los-12-principios-de-la-animacion-disney-libro/

iujuu con Estefany ❤️

Valoro mucho los cursos de la profesora Estefany; porque, los explica de manera muy “coloquial”, que permite ir agregando dificultad ( no morir en el intento). Gracias!!

Los “detrás de cámara” de las producciones animadas de Disney siempre me sorprendían y motivaban. Varias veces jugaba y dibujaba animaciones en la esquina de mis cuadernos y los hacía “mover” haviéndolas pasar rápidamente.

Es mi primera clase con Tefa y me dicen que es la mejor!!

También pensé en ser dibujante de manga, más específicamente de Dragon Ball jaja

Animation land suena como un escenario para animaciones

Me enamore de sus curso ❤ éxito

Terminando la saga de CSS por ahora!

Imagino que sera un juego tipo mario bros 😀😀😀😀

Los 12 Principios de la Animación

1. Estirar y Encoger.
2. Anticipación.
3. Puesta en Escena.
4. Animación Directa y Pose a Pose.
5. Acciones Complementarias y Superpuestas.
6. Acelerar y Desacelerar.
7. Arcos.
8. Acción Secundaria.
9. Sincronización.
10. Exageración.
11. Dibujo Sólido.
12. Atractivo.

Amor infinito al libro ♥

👀 Sabes más de animaciones de lo que crees

Ideas/conceptos claves

La animación puede ser una herramienta poderosa para ayudar a nuestros visitantes y clientes a comprender y beneficiarse de nuestros diseños. Hay principios que podemos aplicar a nuestro trabajo para aprovechar al máximo este poder.

Recursos

Animation Principles for the Web - CSS Animation

Apuntes

• Cuando hablamos de animaciones pensamos en keyframes
• Trabajar con keyframes puede llegar a ser sencillo
• Animaciones se refiere de ir de un punto A hacia un punto B los cuales pueden tener movimientos intermedios

Sabemos más de animaciones de lo que crees

• Las animaciones en sí las vemos todo el tiempo en caricaturas
• Podemos tomar ideas de las mismas para plasmarlo en la web

Principios de las animaciones

• Podemos tomar conceptos como:
  1. Anticipación ⇒ si vamos a correr podemos dar el efecto
  2. Secondary Action ⇒ Complementa la acción de otro

📌 **RESUMEN:** Como desarrolladora web puedes implementar animaciones los cuales pueden tener principios los cuales se tienen propuestas como ser de Disney. Cuando hablamos de animaciones CSS estamos hablando de keyframes. Los cuales son sencillos de crear.

noooooooo el nivel de lo que veia era muy dificil de imitar porque dragon ball z tiene mucho nivel como para tratar de dibujarlos, y especificamente el dibujo de las peores cosas que se me dan jejejej

Ya vi otro curso de Estefany, me encanta, explica muy bien y tiene una gran actitud para enseñar 😃.

`![](``
<cod)![](url)e> 

Hola, que bueno estar aqui, y poder aprender Mucho de CSS!
Me alegro que hay muchas cosas por hacer y lograr , gracias Stefany!!

Gracias, por el curso Estefany, estaba esperando el curso con muchas ansias

Respondiendo al tema de la caricatura: siiiiii siempre quise saber como hacian un dibujito que miraba cuando era chica que se llamaba “el pajaro loco” en argentina! Por eso me encanta CSS, siento que podemos hacer “magia” con las animaciones e ilusiones opticas 😄

Como es el nombre del libro donde està todo lo de animaciones de una pelicula ?

Hay que meterle a todo y nunca dejar de aprender, me gusta como lo explican en platzy

Secondary Action, yo lo asociaría en la vida real a cuando caminamos y movemos las manos al mismo tiempo.

Squash and strech lo asocio a una pelotica rebotando.

🙂

bien

Cuando era chico veía el laboratorio de dexter y siempre me parecio precioso como estaba dibujado y la sintesis apicada al diseño de sus personajes. 😃

Amo la animación y me encantaria aplicarla a mis sitios web ❤️

Por fin tomare un curso de animaciones en CSS 💚
Después de tomar y repasar los temas del curso de transiciones y transformaciones creo que me siento preparado para implementar ahora animaciones en web.
Ya vi el proyecto final y se ve increíble el proyecto. Con todos los ánimos de elaborarlo.
Saludos 😃

Yo quería estudiar Diseño de Animación y trabajar en Pixar 😅

Siempre veo que separan el back y el front abriendo las vulnerabilidades, ¿por qué omiten la opción monolítica?.
Hay fallos de seguridad que cubre por no decir que la mayoria

La profe estefany me parece espectacular, al comienzo no me gustaba su forma de aplicar los CSS ya que lo hace con una mala practica, sin embargo entiendo porque lo hace asi, por la facilidad de ver el codigo en el curso y de forma inmediata 😃 , pero si me pareceria pertinente que lo dijeran en los cursos “esto lo hacemos asi por ta ta ta”. Bueno aparte de todo eso, vengo del curso de animaciones y transiciones con css que ella misma da, y me parece espectacular el empeño que ella tiene ya que por cosa del storytelling, ella tambien se vistio de la misma ocasion, desde mi punto de vista, es un buen componente pedagogico, ademas de que tiene una actitud muy besha. Lo que explica lo hace de forma detallada y calmada, que bueno que de estos contenidos 😃

Como todos los cursos de Platzi = 9+1; Gracias.

Gracias a la liga crativa estoy aca! dios! me volvi adicto a estos cursos!

Hace meses vine por el PlatziDay.

Es hora de echarle ganas de nuevo y disfrutar este curso ❤️