Animación

Este vídeo de Alan Becker (el creador del famoso vídeo Animation vs Animator) explica los 12 principios de animación con ejemplos muy prácticos: 12 Principles of Animation by Alan Becker 😮 😎 😏 👏.

Oh sí, eso de las animaciones es todo un tema…

“Que si la riega ya valió” ¿es así? Otra expresión mexicana para mi Trello de localismos.

Me chifla todo lo que aprendo más allá de lo tecnológico.

Abrazos

Mon

Aquí web Animate.css

Para profundizar muchísimo mas todos estos principios y todo lo que tiene que ver con la animación de personajes podemos tomar el Curso de Animación de Personajes en Platzi.

Hola!
En la descripción de la clase hay un pequeño error. En la definición de Estirar y encoger dice “El usuario a cometido” pero debería decir "El usuario ha cometido"
Espero puedan corregirlo =)

⚡Pueden ver todas las notas de la clase en este Notion, además le agregué recursos extras, espero les guste.

✔También escribí el siguiente tutorial 8 atajados de teclado para ser un máster en Notion.

https://daneden.github.io/animate.css/ Ahora es --> https://animate.style/

Animación

Si bien, los sistemas de diseño han sido trabajados arduamente para encaminar tanto el diseño mismo como al código, lo requerimientos con respecto al movimiento falla rotundamente debido a la repetibilidad, ahorro de tiempo y consistencia de UX.
.

ℹ️ Definición
El movimiento es una cualidad de un sistema de diseño que expresa atención visual, educación evocativa y centramiento visual.

.
Para otorgar movimiento a un sistema de diseño, se contemplan los siguientes pasos:
.

Conoce a tu audiencia

✨ Concepto clave
Antes de crear algo nuevo, cerciórate de aquello que ya exista.

.
Recuerda que en la misma medida que encaminas tus patrones de UI, es posible guiar los patrones de movimiento.
.
Al mencionar patrones de movimiento, nos referimos a:

• Curvas de tiempo (Timing curves)
• Tipos de uso como expresión, focalización e información
• Coreografía (número de objetos en escena)
• Efectos como escala opacidad, elevación
• Movimiento vs estático
• Sobremovimiento

.

Tabla de patrones

.

Creación de principios

✨ Concepto clave
La adoctrinación de cuándo y cómo usar el movimiento puede amenazar la consistencia del producto.

.
Para encontrar el equilibrio adecuado, se puede tomar como contexto a aquellas mejoras sobre UX:

• ¿Dónde necesitamos mayor acción e intención?
• ¿Dónde se puede desorientar los usuarios dentro de nuestra navegación?

.
Por ejemplo, tomando como referencia las guías de Material Design del cual define 3 principios de movimiento:

• Informativo
  El movimiento informa a los usuario de aquellas relaciones entre elementos o disponibilidad de ación.
  .
• Focalizado
  El movimiento focaliza la atención sobre aquello importante sin generar distracción.
  .
• Expresivo
  El movimiento celebra momentos en el uso del usuario al agregarle símbolos a interacciones comunes, expresando la personalidad de la marca.
  .

Encuadre de construcción

✨ Concepto clave
El movimiento como pieza de animación dentro de un sistema de diseño es una relación enter un objeto, su tiempo y efecto.

.
Con los principios establecidos como equipo, el encuadre de movimiento consiste de una duración, ease, efectos (estado inicial y final) y coreografía.
.

ℹ️ Definición
Una duración describe una relación en temporalidad que modifica, por efecto, a un objeto.

.
En concepto de escalas, la duración puede ser vista en medidas como la tipografía, grilla e incluso color.
.

Así como la tipografía posee escalas en función de etiquetas (h1 … h6), es posible etiquetar a la duración como (t1 … t6) o mediante descripción (Extra fast, Normal, Slow, etc.).

.

Easing

ℹ️ Definición
Con ease, podemos darle vida a la emoción al proveer aceleraciones y ritmos personalizados al movimiento.

.
Cuando hablamos de ease tenemos que mencionar las curvas de bezier, las cuales describe 3 tipos: default-ease (personalizado), ease-in, and ease-out.
.
Así mismo, podemos organizar nuestra animación mediante el tipo (t1 ease-in) o, a través de una expresión funcional para describir un movimiento fino (Expressive easing ) para switches o checks, así como para describir un movimiento productivo (Productive easing) para modales o alertas.
.

Efectos

ℹ️ Definición
Un efecto es la propiedad de un objeto que lo distingue de uno estático.

.
Cuando un efecto es aplicado a un componente, se convierte en un elemento de interacción que posee un inicio y un final.
.
Para sistematizar estos efectos, se puede usar la convención de nombres que describe su fin, es decir, el estado inicial animate-in o el final animate-out . O por elección, nombrar mediante el efecto descriptivo que realizará Card fade-in .
.

Coreografía

ℹ️ Definición
Una coreografía es definida al acto donde múltiples objetos forman parte, simultáneamente, en un movimiento dado.

.
Por último, podemos mencionar que una animación es el resultado orquestado de una coreografía que, en acto, definirá un fin:
.

• Complejidad
  Basado en la cantidad de bloques que se complementan entre sí
  .
• Principio base
  Los usuarios están concentrados en un contexto espacial
  .
• Narrativa
  Mediante un flujo de trabajo (user journey)
  .
• Accesibilidad
  El movimiento está mantenido en contenedores en su lugar de elementos

Here’s another animation library 😄
https://michalsnik.github.io/aos/

Corazon koreano, muy bueno el curso me tiene inpastado!!!

Animación

Principios:

• Estirar y encoger
• Anticipación (todavía no va pasar pero va pasar)
• Entras lentas y salidas lentas
• Acciones secundaras (cuando haces clic y pasa algo)
• Timing
• Exageración (elemento que trata de exagerar su acción para que el usuario entienda lo que está pasando)

Fade in:

Cuando un elemento independiente de la pantalla tiene la necesidad de entrar o apareces

Fade out:

Cuando un elemento tienen la necesidad de salir de la visión del usuario

Fuera de contexto, el teacher tiene la voz de lingüini de la peli Ratatouille 😃 las clases son muy cool!

Les recomiendo esta super herramienta keyframes.app para animar con CSS

jajajajajajaj muy bueno el inicio xD

Vi a un otaku triste y lo anime. Lo siento, tenia que hacerlo

que si la riega ya valió XD!!

Me encantó esta clase en particular de los 12 principios de Disney. Ojalá Rulótico Pueda dar más clases en Platzi 🙏

Recuerden que Platzi tiene un curso de animaciones: https://platzi.com/clases/animaciones-web/

A mi me gusta mucho esta página de animaciones. Espero les sea útil
https://animista.net/

Vamos a ver algunos principios de animación de Disney:

1. Estirar y encoger: A
2. Anticipación:
3. Entradas lentas y salidas lentas
4. Acción secundaria
5. Timing, loader.
6. Exageración

Podrían haber ejemplos de los botones o vistas webs que aplican los principios que el dice

Noo! como empiezan las clases! que capo Rulótico! jajajaja

Les recomiendo que si buscan inspirarse en cuanto a animaciones creativas siempre visiten: codepen.io

Un articulo muy interesante sobre estos 12 principios aplicado directamente al diseño de interfaces,
Ademas con ejemplos muy visuales

¡enjoy it!

Esta es otra libreria con la que puedes animar cualquier elemento HTML y que tiene todas las animaciones de Animista y Animate.css, y se puede usar fácilmente sin necesidad de manejar clases https://proyecto26.com/animatable-component/

Se tiene que definir hasta cierto punto las animaciones, ya que después el departamento de desarrollo se encargara de esto y podrá hacer cosas que no vayan de acorde a la pagina.

Algunos de los principios de la animación de Disney que se puede aplicar en este ámbito son:

• Estirar Y Encojer:

  Nos ayuda a generar drama sobre algún elemento, por ejemplo, para dramatizar la animación de un botón cuando el usuario ha cometido un error o alguna acción incorrecta.

• Anticipacion:

  Manda la vista al usuario a algun lugar donde habra una accion, esto hace que haya una anticipacion.

• Entradas Lentas y Salidas Lentas:

  Es el mas utilizado, ya que nos ayuda a introducir elementos nuevos y a sacar algunos elementos de pantalla.

• Acción Secundaria:

  Todas las micro interacciones trabajan con este principio, estas animaciones nos ayudan a transmitir o dar información adicional como respuesta a alguna acción de los usuarios.

• Timing:

  Mientras más detalles añadimos a las animaciones, más rápidas o lentas se pueden percibir. Podemos utilizar estos efectos visuales para transmitir apuro o tranquilidad mientras la plataforma esta cargando.

• Exageracion:

  Así como las acciones secundarias, podemos exagerar los movimientos de nuestros elementos para transmitir alguna sensación.

Para poder documentar las animaciones, podemos utilizar una pagina llamada Animate.css y en la documentación podemos decir que elementos exactamente tengan que tipo de animación.

¿Hay algún curso de microinteracción en platizi? y ¿Alguno de Lottie? Gracias 😃

“Un festival de cosas brincando” JA, ja…

Aquí un artículo sobre el tema:
http://blogs.disneylatino.com/oh-my-disney/2016/08/10/12-principios-de-la-animacion-ilustrados-por-peliculas-disney·pixar/

Curso de animación de Pixar:
Pixar in a Box

La consistencia garantiza que las animaciones sigan un patrón uniforme en todo el sistema, brindando una experiencia cohesiva para los usuarios.
Por otro lado, es esencial que las animaciones tengan un propósito claro, ya sea destacar información importante, guiar la atención o mejorar la usabilidad.
Evitar animaciones excesivas o irrelevantes es clave para no abrumar a los usuarios y garantizar que las interacciones sean significativas y no distractores innecesarios.

Es bueno saber que hay una ppágina que facilita las animaciones nwn

les recomiendo tambien https://codesandbox.io

Gracias, la cogerencia es todo!

Mucha teoría en este curso, que mal!!

usar las los 12 principios de animación de disney

Genial. Les recomiendo complementen en javascript con: GSAP ( https://greensock.com/gsap/)

En los enlaces se supone que tenemos acceso al documento de Notion para ir revisándolo, pero no me funciona, ayer podía verlo pero ahora dice que hay que solicitar permiso para acceder a el ¿a ustedes les pasa?

El tema de las animaciones es bastante extenso, para los desarrolladores hay un curso aquí en platzi