Diferente Basado en el horario animación, contar historias a través de una serie de eventos, o interacción Animación que se desencadena cuando alguien toca algo, Animación ambiental Es el tipo de movimiento pasivo que puede no notar al principio. Sin embargo, hacen que el diseño se vea vivo de manera sutil.
En la animación ambiental, los elementos pueden hacer una transición sutilmente entre los colores, moviéndose lenta o gradualmente en movimiento. Los elementos pueden aparecer y desaparecer, cambiar de tamaño, o pueden girar lentamente.
Las animaciones ambientales no son invasivas; No necesitan tener cuidado, no distraer y no interferir con lo que alguien quiere lograr al usar un producto o sitio web. También pueden divertirse y hacer sonreír a alguien cuando los ve. De esta manera, la animación del entorno Aumentar la profundidad de la personalidad de la marca.
Para ilustrar el concepto de animación del entorno, lo recreé Dibuja rápidamente a McGraw Libros de cómics (PDF) como animación CSS/SVG. El cómic fue publicado en 1971 por Charlton Comics, y los personajes no se movieron, por lo que es un candidato ideal para convertirse en animación ambiental.
Como referencia: Artista de portada original RAY DE Conocido por dibujar personajes de Hanna-Barbera para Charlton Comics en la década de 1970. Ray murió en 2000 a la edad de 92 años.
pista: Puedes ver la animación del entorno completo Código en CodePen.
Seleccione un elemento de animación
No todo en la página o en los gráficos debe moverse, y parte de la animación de entorno de diseño es Saber cuando parar. El truco es elegir elementos naturales con movimientos sutiles en lugar de forzar el movimiento a lugares que no pertenecen.
Consejos de movimiento natural
Cuando decido lo que quiero animar, busco consejos de movimiento natural y pienso en cuándo algo se mueve naturalmente en el mundo real. Me pregunté: «¿Esto pesa esto?»,,,,, «¿Es flexible?»y «¿Se moverá en la vida real?» Si la respuesta es «Sí,» Puede sentirse bien si te mueves. Hay varios consejos de acción en la portada de Ray Dirgo.
Por ejemplo, la bocanada hinchada de la lotería rápida del tubo de paz tiene dos plumas. A medida que se mueven las tuberías, balancean tres grados ligeramente hacia la izquierda y la derecha, al igual que las plumas reales.
#quick-draw-pipe {
animation: quick-draw-pipe-rotate 6s ease-in-out infinite alternate;
}
@keyframes quick-draw-pipe-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
#quick-draw-feather-1 {
animation: quick-draw-feather-1-rotate 3s ease-in-out infinite alternate;
}
#quick-draw-feather-2 {
animation: quick-draw-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes quick-draw-feather-1-rotate {
0% { transform: rotate(3deg); }
100% { transform: rotate(-3deg); }
}
@keyframes quick-draw-feather-2-rotate {
0% { transform: rotate(-3deg); }
100% { transform: rotate(3deg); }
}
Atmósfera, no acción
A menudo elijo elementos o detalles decorativos que se suman a la atmósfera, pero no lo convierte en un buen negocio para la atención.
Aquí, el principal se eleva y cae lenta y sutilmente mientras sopla su pipa.
#chief {
animation: chief-rise-fall 3s ease-in-out infinite alternate;
}
@keyframes chief-group-rise-fall {
0% { transform: translateY(0); }
100% { transform: translateY(-20px); }
}
Para aumentar el efecto, las plumas en su cabeza también se movieron a tiempo con su ascenso y caída:
#chief-feather-1 {
animation: chief-feather-1-rotate 3s ease-in-out infinite alternate;
}
#chief-feather-2 {
animation: chief-feather-2-rotate 3s ease-in-out infinite alternate;
}
@keyframes chief-feather-1-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(-9deg); }
}
@keyframes chief-feather-2-rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(9deg); }
}
Jugar y diversión
Una de mis cosas favoritas sobre las animaciones ambientales es cómo traen diversión al diseño. Son una oportunidad Exhibir personalidad A través de detalles interesantes, las personas sonríen cuando los notan.
Eche un vistazo más de cerca al jefe, y puede encontrar sus cejas levantadas y sus ojos cruzados mientras se abalanzaba sobre su pipa. Las cejas de Quick Draw también rebotan de una manera que parece intervalos aleatorios.
#quick-draw-eyebrow {
animation: quick-draw-eyebrow-raise 5s ease-in-out infinite;
}
@keyframes quick-draw-eyebrow-raise {
0%, 20%, 60%, 100% { transform: translateY(0); }
10%, 50%, 80% { transform: translateY(-10px); }
}
Tenga en cuenta la jerarquía
El movimiento atrae los ojos e incluso los movimientos sutiles tienen peso visual. Así que mantengo la animación más obvia para que los elementos creen el mayor impacto.
Fumar obviamente tuvo un gran impacto en dibujar a McGraw rápidamente, por lo que para demostrarlo, envolví sus elementos (incluidas su pipa y plumas) en un nuevo grupo SVG e hice este swing.
#quick-draw-group {
animation: quick-draw-group-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-group-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(2deg); }
30% { transform: rotate(-2deg); }
45% { transform: rotate(1deg); }
60% { transform: rotate(-1deg); }
75% { transform: rotate(0.5deg); }
100% { transform: rotate(0deg); }
}
Luego, para enfatizar este movimiento, reflejo estos valores para sacudir su sombra:
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
@keyframes quick-draw-shadow-wobble {
0% { transform: rotate(0deg); }
15% { transform: rotate(-2deg); }
30% { transform: rotate(2deg); }
45% { transform: rotate(-1deg); }
60% { transform: rotate(1deg); }
75% { transform: rotate(-0.5deg); }
100% { transform: rotate(0deg); }
}
Aplicar restricciones
El hecho de que algo que pueda animarse no significa que debería serlo. Al crear animaciones del entorno, estudio las imágenes y noté elementos que los movimientos sutiles pueden aumentar la vida útil. Recordaré estas preguntas: «¿Qué historias estoy contando? ¿Dónde ayudarán los deportes y cuándo se distraerá?»
Recuerde, la moderación no se trata solo de hacer menos; Se trata de la frecuencia que haces lo correcto.
SVG en capas para la exportación
existir»Animación aplastante Parte 4: Optimización de SVG«, Escribí sobre el proceso del que dependo «Prepárese para la animación, prepare, optimice y construya SVG». Al rellenar elementos en un solo archivo SVG, pueden ser una pesadilla. Encontrar una ruta o grupo específico puede ser como buscar agujas en un pajar.
Es por eso que desarrollo SVG en capas, exporto y optimizo un conjunto de elementos a la vez, siempre en el orden en que aparecen en el archivo final. Esto me permite construir el SVG gradualmente pegándolo en cada sección de limpieza.
Primero quiero exportar los elementos de fondo, optimizarlos, agregar atributos de clase e ID, y pegar su código en mi archivo SVG.
Luego exporto que los elementos generalmente permanecen estáticos o tan acción como un grupo, como el jefe y dibujo rápidamente a McGraw.
Antes de la salida final, nombrar y agregar detalles, como el rápido sorteo de tuberías, ojos y su explosión.
Dado que exporto cada capa de una fábrica del mismo tamaño, no tengo que preocuparme por los problemas de alineación o posicionamiento, ya que todos se conectan automáticamente para colocar.
Implementar animación ambiental
No necesita un marco o biblioteca de animación para agregar animaciones de entorno a su proyecto. En la mayoría de los casos, todo lo que necesita es un SVG preparado y algunos CSS reflexivos.
Pero, comencemos con SVG. La clave es lógicamente elementos agrupados y darles atributos de clase o identificación significativos que son ganchos de animación en CSS. Para esta animación, doy el identificador para cada parte dinámica #quick-draw-tail o #chief-smoke-2. De esta manera, puedo apuntar exactamente lo que necesito sin tener que cavar el DOM como un mapache en un bote de basura.
Después de configurar SVG, CSS realiza la mayor parte del trabajo. Puedo usar @keyframes Para movimientos más expresivos, o animation-delay Simule la aleatoriedad y el tiempo de intercalación. El truco es mantener todo sutil y recordar que no soy animado para la atención, sino para la atmósfera.
Recuerde que la mayoría de las animaciones de entorno siguen en bucle, por lo que deberían estar Luz y Apto para el rendimiento. ciertamente, Respetar a los usuarios que requieren menos movimientos es un buen hábito. Puedes envolver la animación en uno @media prefers-reduced-motion Consultas, por lo que solo pueden correr cuando son bienvenidos.
@media (prefers-reduced-motion: no-preference) {
#quick-draw-shadow {
animation: quick-draw-shadow-wobble 6s ease-in-out infinite;
}
}
Es un pequeño toque que es fácil de lograr, lo que hace que su diseño sea más inclusivo.
Principios de diseño de animación ambiental
Si desea que la animación sienta el medio ambiente, más como la atmósfera que la acción, ayuda a seguir algunos principios. Estas no son reglas difíciles y rápidas, sino cosas que aprendí al animar el humo, las chispas, los ojos y las cejas.
Mantenga la animación lenta y suave
La animación ambiental debe sentirse relajada, así que use Duración más larga Y elegir La sensación de curvas relajantes es orgánica. Lo uso a menudo ease-in-outpero Curva de bezier de cubo También ayuda cuando desea un sentimiento y movimientos más relajados que se puedan encontrar en la naturaleza.
Bucle sin problemas para evitar cambios repentinos
Un reinicio duro o un salto repentino puede arruinar el estado de ánimo, por lo que si la animación bucea, asegúrese de que salga bien. Puedes hacer esto Marcos de inicio y finalización coincidenteso a través de la configuración animation-direction llegar alternate Los valores hacen que la animación se reproduce y luego juegue al revés.
Construir complejidad utilizando la jerarquía
Una animación puede ser aburrida. Cinco animaciones sutiles, cada una en una capa diferente, se sentirán ricas y enérgicas. Piénselo como construir una mezcla de sonido que quiera Cambios en el ritmo, el tono y el tiempo. En mi animación, hay parpadeantes parpadeando a diferentes intervalos, humo rizado hacia arriba, plumas que se balancearon e ojo inquieto. No había nada que dominar, y cada acción jugó un pequeño papel en la escena.
Evite las distracciones
El objetivo de la animación ambiental es que no domina. Es uno Elementos de fondo En lugar de una llamada para tomar medidas. Si los ojos de alguien se levantan, eso es probablemente demasiado, así que llame a la animación hasta que sienta algo que puede atrapar solo cuando realmente lo vea.
Considere la accesibilidad y el rendimiento
Controlar prefers-reduced-motiony no piense que el dispositivo de todos puede manejar animaciones complejas. SVG y CSS son ligeros, pero las animaciones complejas de CSS aún pueden gravar dispositivos de menor potencia como filtros de desenfoque y sombras de caída. Cuando la animación sea puramente decorativa, considere agregar aria-hidden="true" Para evitar que se confunda, el árbol de accesibilidad.
Sorteo
La animación ambiental es como sazonar en un delicioso plato. Esta es la sal que apenas notas, pero cuando desaparezca, la extrañarás. No gritó, susurro. No guiará, persiste. Es humo flotante, plumas que se balancearon y los ojos brillantes que atraparás en las esquinas de tus ojos. Cuando se hace bien, la animación del entorno Agregar personalidad al diseño sin requerir aplausos.
Ahora, me doy cuenta de que no todos necesitan personajes animados de dibujos animados. Entonces, en la segunda parte, compartiré cómo crear animaciones para varios proyectos de clientes recientes. Hasta la próxima, si está haciendo ilustraciones o trabajando con SVG, pregúntese: ¿Qué pasa si esto es cierto? Luego animación. Hazlo lento y suave. Mantenga el medio ambiente.
Puedes ver la animación del entorno completo Código en CodePen.
(GG, YK)
