Guía de movimiento de materiales en After Effects

Una hoja de calcomanías básica y un flujo de trabajo para animar interfaces de usuario

Ya he compartido por qué Motion Design no tiene que ser difícil, pero quería que sea aún más fácil para los diseñadores usar los principios de movimiento de materiales que conozco y amo. After Effects es la herramienta principal que nuestro equipo utiliza para crear ejemplos de movimiento para las pautas de material. Después de haberlo usado para animar mi parte justa de IU, quería compartir mis consejos de flujo de trabajo y ...

Mi hoja de pegatinas de After Effects

Descargue esta hoja de adhesivos básicos para ver un proyecto completado con mi flujo de trabajo simplificado (descrito a continuación). Contiene una colección de componentes de material, UI de línea de base y transiciones de navegación.

Descárgalo aquí

Disponible bajo Apache 2.0. Al descargar este archivo, acepta los Términos de servicio de Google. La Política de privacidad de Google describe cómo se manejan los datos en este servicio.

Importar activos a AE

Lo primero es lo primero, necesitamos activos para animar. La mayoría de los diseñadores visuales de nuestro equipo usan Sketch, que por defecto no interactúa con AE. Afortunadamente, Adam Plouff ha creado este complemento que agrega esta funcionalidad. Lo utilicé para importar nuestra biblioteca de componentes de material de referencia de Sketch a AE. Estos activos se encuentran en la carpeta Componentes de la hoja de calcomanías.

Crear IU

Con esta biblioteca de componentes de línea de base, las nuevas IU pueden ensamblarse rápidamente arrastrándolas a una nueva composición AE.

Un ejemplo de componentes de Sketch importados que se arrastran a una compilación AE

Personalizando componentes

Estos componentes de línea de base son un gran comienzo, ahora deben personalizarse para crear una amplia gama de interfaces de usuario. Aquí es donde brillan las propiedades maestras en AE. Esta característica que a menudo se pasa por alto hace posible crear un único activo reutilizable que puede modificarse rápidamente sin duplicar el original. Es similar a cómo anula el trabajo con símbolos en Sketch. Por ejemplo, la barra de aplicaciones a menudo se personaliza cambiando sus iconos, colores y sombras. Con eso en mente, agregué esos tres elementos como propiedades maestras para el componente.

Un ejemplo de ajuste rápido de un componente utilizando propiedades maestras

Al agregar propiedades maestras a cada componente, pude crear rápidamente una colección de interfaces de usuario para animar. Puede encontrarlos en la carpeta Baseline UIs en la descarga.

Una colección de interfaces de usuario creadas con componentes personalizados con propiedades maestras

Transiciones animadas

Ahora que hemos establecido un flujo de trabajo para crear interfaces de usuario, es hora de animar. Los ejemplos en la carpeta de transiciones de navegación ilustran un método para aplicar patrones de movimiento de material en After Effects. Si está interesado en obtener más información sobre estos patrones, asegúrese de leer mi artículo anterior.

Ejemplos de transiciones de navegación utilizando patrones de movimiento de materiales.

Para comenzar, cada propiedad se anima sin suavizar. La composición principal se reasigna en el tiempo para aplicar la relajación y establecer la duración de todos los fotogramas clave anidados. Esto permite ajustes rápidos en la relajación y la duración, ya que solo dos fotogramas clave reasignados controlan la transición completa. También es un método simple para aplicar una curva de relajación general a todos los elementos animados. Los elementos persistentes se animan con toda la curva de relajación. Los elementos salientes salen a medida que la curva se acelera y los elementos entrantes entran a medida que se ralentiza. Lea más aquí en "Coreografía compleja".

Este método puede usarse para animar consistentemente la mayoría de las transiciones que utilizan los principios de movimiento del material. Puede comenzar a descomponerse con flujos más complejos o transiciones altamente estilizadas, pero tienden a ser menos comunes.

After Effects es una herramienta tan flexible que es difícil afirmar que un solo flujo de trabajo sea correcto. Cada diseñador tendrá enfoques únicos y válidos para los desafíos de animación. Espero que estos consejos generen algunas ideas y te ayuden a ser un diseñador de movimiento más eficiente.