Sabes m谩s de animaciones de lo que crees

1/13
Recursos
Transcripci贸n

馃帀隆Te damos la bienvenida al curso de Animaciones con CSS! 馃帀

Por lo general, al hablar de animaciones y todo lo que conlleva, nos podemos intimidar al pensar en la complejidad que representa, pero realmente trabajar con animaciones es uno de los caminos m谩s f谩ciles para desarrollar lo que nos propongamos. Antes de ello, se recomienda haber tomado el curso de Transformaciones y Transiciones 鉁, para contar con una base.

驴Qu茅 es una animaci贸n? 馃幁

Una animaci贸n podr铆a ser descrita como un conjunto de fotogramas que cuenten con un estado inicial y final, compuesto de distintos puntos medios que conforman la misma. Adem谩s, desde peque帽os nuestros ojos 馃憖 han sido entrenados de forma involuntario al momento de ver las caricaturas a trav茅s del televisor.

Principios de animaci贸n para la web 馃捇

Actualmente, en el desarrollo web, podemos contar con diversas animaciones realizadas en su mayor铆a con CSS. Para ello, existen principios a seguir, que se crearon con el fin de optimizar y aprovechar al m谩ximo esta funci贸n. Estos principios describen c贸mo se puede utilizar la animaci贸n para sumergir a los espectadores en un mundo cre铆ble 馃憮. Un dato interesante, es que dichos principios fueron utilizados como metodolog铆a de trabajo para las animaciones que Disney dise帽aba en aquellos tiempos.

Entre ellos tenemos (estar谩n mencionados en su lengua original):

  • Squash and stretch
  • Anticipation
  • Staging
  • Straight-Ahead Action and Pose-to-Pose
  • Follow Through and Overlapping Action
  • Slow In and Slow Out
  • Arc
  • Secondary Action
  • Timing
  • Exaggeration
  • Solid drawing
  • Appeal

Contribuci贸n creada con los aportes de:Angel David Osorio Leyva

Aportes 48

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淪ave鈥 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 鈥渘atural鈥 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

鉂equisitos 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/

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

La mejor profe de Platzi de los cursos web 馃槍馃檭馃槃

Un Libro importante de animacion es The Animator鈥檚 Survival Kit de Richard Williams

happy three friends, gran caricatura

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

iujuu con Estefany 鉂わ笍

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

Los 鈥渄etr谩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 鈥渕over鈥 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

ohhh鈥ue emoci贸n!!! 馃槺馃槻 poder seguir aprendiendo con Estefany, vengo siguiendo todos tus cursos.

Siempre que Estafany de un curso, tengan por seguro que ser谩 uno extremadamente bueno. 隆脡xito a todas!

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 馃槂.

Chale jaja empec茅 a ver el curso pr谩ctico, luego me vine al curso de animaciones y resulta que debo de ver el de transformaciones primero. Bueno, vuelvo al rato :D
`![](``
<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 鈥渆l pajaro loco鈥 en argentina! Por eso me encanta CSS, siento que podemos hacer 鈥渕agia鈥 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 鈥渆sto 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 鉂わ笍

estoy emocionado por empezar :3