Imaxina isto: te unes a un novo proxecto, mergúllaste na base de código e, nas primeiras horas, descobres algo frustrantemente familiar. Espalladas polas follas de estilo, atopas varias definicións de @keyframes para as mesmas animacións básicas. Tres efectos de fundido diferentes, dúas ou tres variacións de diapositivas, un puñado de animacións de zoom e polo menos dúas animacións de xiro diferentes porque, ben, por que non? @keyframes pulso { de { escala: 1; } a { escala: 1,1; } }
@keyframes bigger-pulse { 0 %, 20 %, 100 % { escala: 1; } 10 %, 40 % { escala: 1,2; } }
Se este escenario soa familiar, non estás só. Na miña experiencia en varios proxectos, unha das vitorias rápidas máis consistentes que podo ofrecer é consolidar e estandarizar os fotogramas clave. Converteuse nun patrón tan fiable que agora espero esta limpeza como unha das miñas primeiras tarefas en calquera nova base de código. A lóxica detrás do caos Esta redundancia ten todo o sentido cando pensas niso. Todos usamos as mesmas animacións fundamentais no noso traballo diario: fundidos, diapositivas, zooms, xiros e outros efectos comúns. Estas animacións son bastante sinxelas e é fácil crear unha definición rápida de @keyframes para facer o traballo. Sen un sistema de animación centralizado, os desenvolvedores escriben naturalmente estes fotogramas clave desde cero, sen saber que animacións similares xa existen noutros lugares da base de código. Isto é especialmente común cando se traballa en arquitecturas baseadas en compoñentes (que a maioría de nós facemos hoxe en día), xa que os equipos adoitan traballar en paralelo en diferentes partes da aplicación. O resultado? Caos de animación. O Pequeno Problema Os problemas máis obvios coa duplicación de fotogramas clave son o tempo de desenvolvemento perdido e o inchazo de código innecesario. As definicións de fotogramas clave múltiples significan varios lugares para actualizar cando cambian os requisitos. Necesitas axustar o tempo da túa animación de fundido? Terás que buscar todas as instancias da túa base de código. Queres estandarizar as funcións de flexibilización? Boa sorte para atopar todas as variacións. Esta multiplicación de puntos de mantemento fai que incluso as actualizacións de animación simples sexan unha tarefa que levante moito tempo. O Problema Maior Esta duplicación de fotogramas clave crea un problema moito máis insidioso que se esconde baixo a superficie: a trampa do alcance global. Mesmo cando se traballa con arquitecturas baseadas en compoñentes, os fotogramas clave CSS sempre se definen no ámbito global. Isto significa que todos os fotogramas clave aplícanse a todos os compoñentes. Sempre. Si, a túa animación non usa necesariamente os fotogramas clave que definiches no teu compoñente. Usa os últimos fotogramas clave que coinciden exactamente co mesmo nome que se cargaron no ámbito global. Sempre que todos os teus fotogramas clave sexan idénticos, isto pode parecer un problema menor. Pero no momento en que queiras personalizar unha animación para un caso de uso específico, tes problemas ou, peor aínda, serás ti quen os cause. Ou a túa animación non funcionará porque outro compoñente cargado despois do teu, sobreescribindo os teus fotogramas clave, ou o teu compoñente carga o último e cambia accidentalmente o comportamento da animación de todos os outros compoñentes que usan o nome dese fotograma clave, e é posible que nin te decates. Aquí tes un exemplo sinxelo que demostra o problema: .compoñente-un { /* estilos de compoñentes */ animación: pulso 1s ease-in-out infinito alternativo; }
/* esta definición de @keyframes non funcionará */ @keyframes pulso { de { escala: 1; } a { escala: 1,1; } }
/* máis tarde no código... */
.compoñente-dous { /* estilos de compoñentes */ animación: pulso 1s ease-in-out infinito; }
/* estes fotogramas clave aplicaranse aos dous compoñentes */ @keyframes pulso { 0 %, 20 %, 100 % { escala: 1; } 10 %, 40 % { escala: 1,2; } }
Ambos compoñentes usan o mesmo nome de animación, pero a segunda definición de @keyframes sobrescribe a primeira. Agora, tanto o compoñente un como o compoñente dous usarán os segundos fotogramas clave, independentemente de que compoñente defina que fotogramas clave. Vexa as fichas de cadros clave de pluma - Demo 1 [forked] de Amit Sheen. A peor parte? Isto moitas veces funciona perfectamente no desenvolvemento local pero rompe misteriosamente na produción cando os procesos de compilación cambian a orde de carga das túas follas de estilo. Acabas con animacións que se comportan de forma diferente dependendo de que compoñentes se carguen e en que secuencia. A solución: fotogramas clave unificados A resposta a este caos é sorprendentemente sinxela: fotogramas clave dinámicos predefinidos almacenados nunha folla de estilo compartida. En lugar de deixar que cada compoñente defina as súas propias animacións, creamos fotogramas clave centralizados que están ben documentados e fáciles deuso, mantendo e adaptado ás necesidades específicas do seu proxecto. Pense nel como tokens de fotogramas clave. Do mesmo xeito que usamos tokens para cores e espazamento, e moitos de nós xa usamos tokens para propiedades de animación, como funcións de duración e flexibilización, por que non usamos tokens tamén para fotogramas clave? Este enfoque pode integrarse de forma natural con calquera fluxo de traballo de token de deseño actual que estea a usar, mentres resolve tanto o pequeno problema (duplicación de código) como o problema maior (conflitos de alcance global) dunha soa vez. A idea é sinxela: crear unha única fonte de verdade para todas as nosas animacións comúns. Esta folla de estilo compartida contén fotogramas clave coidadosamente elaborados que cobren os patróns de animación que realmente usa o noso proxecto. Xa non hai que adiviñar se xa existe unha animación de fundido nalgún lugar da nosa base de código. Xa non hai que sobrescribir accidentalmente animacións doutros compoñentes. Pero aquí está a clave: non son só animacións estáticas de copiar e pegar. Están deseñados para ser dinámicos e personalizables a través de propiedades personalizadas de CSS, o que nos permite manter a coherencia ao tempo que temos a flexibilidade de adaptar as animacións a casos de uso específicos, como se necesitas unha animación de "pulso" un pouco máis grande nun só lugar. Construíndo o primeiro token de fotogramas clave Un dos primeiros froitos baixos que debemos abordar é a animación "fade-in". Nun dos meus proxectos recentes, atopei máis dunha ducia de definicións de fade-in separadas, e si, todas simplemente animaron a opacidade de 0 a 1. Entón, imos crear unha nova folla de estilo, chamémola kf-tokens.css, importámola ao noso proxecto e coloquemos os nosos fotogramas clave cos comentarios axeitados dentro del. /* keyframes-tokens.css */
/* * Fade In: animación de entrada desvanecida * Uso: animación: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { de { opacidade: 0; } a { opacidade: 1; } }
Esta única declaración @keyframes substitúe todas aquelas animacións de desvanecemento dispersas pola nosa base de código. Limpo, sinxelo e de aplicación global. E agora que temos este token definido, podemos usalo desde calquera compoñente ao longo do noso proxecto: .modal { animación: kf-fade-in 0.3s ease-out; }
.informativa { animación: kf-fade-in 0.2s ease-in-out; }
.notificación { animación: kf-fade-in 0.5s ease-out; }
Vexa as fichas de cadros clave de pluma - Demo 2 [forked] de Amit Sheen. Nota: estamos a usar un prefixo kf- en todos os nosos nomes de @keyframes. Este prefixo serve como espazo de nomes que evita conflitos de nomes coas animacións existentes no proxecto e deixa claro inmediatamente que estes fotogramas clave proceden do noso ficheiro de fichas de fotogramas clave. Facendo unha diapositiva dinámica Os fotogramas clave kf-fade-in funcionan moi ben porque son sinxelos e hai pouco espazo para desordenar as cousas. Noutras animacións, porén, necesitamos ser moito máis dinámicos, e aquí podemos aproveitar o enorme poder das propiedades personalizadas CSS. Aquí é onde os tokens de fotogramas clave realmente brillan en comparación coas animacións estáticas dispersas. Tomemos un escenario común: animacións "deslizantes". Pero deslizarse dende onde? 100px desde a dereita? 50% da esquerda? Debería entrar dende a parte superior da pantalla? Ou quizais flotar dende abaixo? Hai tantas posibilidades, pero en lugar de crear fotogramas clave separados para cada dirección e cada variación, podemos construír un token flexible que se adapte a todos os escenarios: /* * Slide In: animación direccional de diapositivas * Use --kf-slide-from para controlar a dirección * Predeterminado: desliza desde a esquerda (-100%) * Uso: * animación: kf-slide-in 0.3s ease-out; * --kf-slide-de: -100px 0; // desprazar dende a esquerda * --kf-slide-de: 100px 0; // desliza dende a dereita * --kf-slide-de: 0 -50px; // desliza desde arriba */
@keyframes kf-slide-in { de { traducir: var(--kf-slide-from, -100% 0); } a { traducir: 0 0; } }
Agora podemos usar este único token @keyframes para calquera dirección de diapositiva simplemente cambiando a propiedade personalizada --kf-slide-from: .barra lateral { animación: kf-slide-in 0.3s ease-out; /* Usa o valor predeterminado: diapositivas desde a esquerda */ }
.notificación { animación: kf-slide-in 0.4s ease-out; --kf-slide-de: 0 -50px; /* desliza desde arriba */ }
.modal { animación: kf-fade-in 0,5 s, kf-slide-in 0,5 s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-slide-de: 50px 50px; /* desliza desde abaixo á dereita */ }
Este enfoque ofrécenos unha flexibilidade incrible mantendo a coherencia. Unha declaración de fotograma clave, posibilidades infinitas. Vexa as fichas de cadros clave de pluma - Demo 3 [forked] de Amit Sheen. E se queremos facer as nosas animacións aínda máis flexibles, permitindo tamén efectos de "deslizamento", podemossimplemente engade unha propiedade personalizada --kf-slide-to, semellante ao que veremos na seguinte sección. Cadros clave de zoom bidireccional Outra animación común que se duplica en proxectos son os efectos de "zoom". Tanto se se trata dun aumento sutil para as mensaxes de brindis, como un aumento dramático para os modais ou un efecto de redución suave para os títulos, as animacións de zoom están en todas partes. En lugar de crear fotogramas clave separados para cada valor de escala, creemos un conxunto flexible de fotogramas clave kf-zoom:
/* * Zoom - animación a escala * Use --kf-zoom-from e --kf-zoom-to para controlar os valores de escala * Predeterminado: zooms do 80% ao 100% (0,8 a 1) * Uso: * animación: kf-zoom 0.2s ease-out; * --kf-ampliar-desde: 0,5; --kf-ampliar a: 1; // zoom de 50% a 100% * --kf-ampliar-desde: 1; --kf-ampliar a: 0; // zoom de 100% a 0% * --kf-ampliar-desde: 1; --kf-ampliar a: 1.1; // zoom de 100% a 110% */
@keyframes kf-zoom { de { escala: var(--kf-zoom-de, 0,8); } a { escala: var(--kf-ampliar, 1); } }
Cunha definición, podemos conseguir calquera variación de zoom que necesitemos: .torrada { animación: kf-slide-in 0,2 s, kf-zoom 0,4 s ease-out; --kf-slide-de: 0 100 %; /* desliza desde arriba */ /* Usa o zoom predeterminado: escala de 80% a 100% */ }
.modal { animación: kf-zoom 0.3s cubic-bezier (0.34, 1.56, 0.64, 1); --kf-ampliar-desde: 0; /* zoom espectacular de 0% a 100% */ }
.encabezamento { animación: kf-fade-in 2s, kf-zoom 2s ease-in; --kf-ampliar-desde: 1,2; --kf-ampliar a: 0,8; /* redución suave */ }
O valor predeterminado de 0,8 (80 %) funciona perfectamente para a maioría dos elementos da IU, como mensaxes e tarxetas de brindis, aínda que é fácil de personalizar para casos especiais. Vexa as fichas de cadros clave de pluma - Demo 4 [forked] de Amit Sheen. Podes ter notado algo interesante nos exemplos recentes: estivemos combinando animacións. Unha das principais vantaxes de traballar cos tokens @keyframes é que están deseñados para integrarse perfectamente entre si. Esta composición suave é intencionada, non accidental. Máis adiante comentaremos a composición da animación con máis detalle, incluíndo onde poden resultar problemáticas, pero a maioría das combinacións son sinxelas e fáciles de implementar. Nota: mentres escribía este artigo, e quizais por escribilo, atopeime a pensar en toda a idea das animacións de entrada. Con todos os avances recentes en CSS, aínda os necesitamos? Afortunadamente, Adam Argyle explorou as mesmas preguntas e expresounas brillantemente no seu blog. Isto non contradí o que está escrito aquí, pero presenta un enfoque que vale a pena considerar, especialmente se os teus proxectos dependen moito das animacións de entrada. Animacións continuas Mentres que as animacións de entrada, como "desvanecer", "deslizar" e "ampliar" ocorren unha vez e despois detense, as animacións continuas cítanse indefinidamente para chamar a atención ou indicar actividade en curso. As dúas animacións continuas máis comúns que atopo son "spin" (para os indicadores de carga) e "pulse" (para resaltar elementos importantes). Estas animacións presentan desafíos únicos á hora de crear fichas de fotogramas clave. A diferenza das animacións de entrada que adoitan ir dun estado a outro, as animacións continuas deben ser altamente personalizables nos seus patróns de comportamento. O Spin Doctor Cada proxecto parece usar varias animacións de xiro. Algúns xiran no sentido horario, outros no sentido antihorario. Algúns fan unha única rotación de 360 graos, outros fan varias voltas para un efecto máis rápido. En lugar de crear fotogramas clave separados para cada variación, creemos un xiro flexible que xestione todos os escenarios:
/* * Spin - animación de rotación * Use --kf-spin-from e --kf-spin-to para controlar o intervalo de rotación * Use --kf-spin-turns para controlar a cantidade de rotación * Predeterminado: xira de 0 graos a 360 graos (1 rotación completa) * Uso: * animación: kf-spin 1s lineal infinito; * --kf-xiros-xiros: 2; // 2 rotacións completas * --kf-spin-de: 0º; --kf-spin-to: 180º; // media rotación * --kf-spin-de: 0º; --kf-spin-to: -360º; // en sentido antihorario */
@keyframes kf-spin { de { xirar: var(--kf-spin-from, 0deg); } a { xirar: calc(var(--kf-spin-from, 0deg) + var (--kf-spin-to, 360deg) * var(--kf-spin-turns, 1)); } }
Agora podemos crear calquera variación de xiro que nos guste:
.loading-spinner { animación: kf-spin 1s lineal infinito; /* Usa por defecto: xira de 0º a 360º */ }
.cargador rápido { animación: kf-spin 1.2s ease-in-out infinito alternativo; --kf-xiros-xiros: 3; /* 3 rotacións completas para cada sentido por ciclo*/ }
.escalonado-reverso { animación: kf-spin 1.5s pasos(8) infinito; --kf-spin-to: -360º; /* sentido antihorario */ }
.sutil-meneo { animación: kf-spin 2s ease-in-out infinito alternativo; --kf-xirar-desde: -16º; --kf-spin-to: 32º; /* mover 36 graos: entre -18 graos e +18 graos */ }
Vexa as fichas de cadros clave de pluma - Demo 5 [forked] de Amit Sheen. A beleza deste enfoque é que os mesmos fotogramas clave funcionan para cargar xiradoras, iconas rotativas, efectos de movemento e incluso animacións complexas de varias voltas. O paradoxo do pulso As animacións de pulso son máis complicadas porque poden "pulsar" diferentes propiedades. Algúns pulsan a escala, outros pulsan a opacidade e algunhas propiedades da cor pulsan como brillo ou saturación. En lugar de crear fotogramas clave separados para cada propiedade, podemos crear fotogramas clave que funcionen con calquera propiedade CSS. Aquí tes un exemplo de fotograma clave de pulso con opcións de escala e opacidade:
/* * Pulso - animación pulsante * Use --kf-pulse-scale-from e --kf-pulse-scale-to para controlar o rango de escala * Use --kf-pulse-opacity-from e --kf-pulse-opacity-to para controlar o intervalo de opacidade * Predeterminado: sen pulso (todos os valores 1) * Uso: * animación: kf-pulse 2s ease-in-out infinito alternativo; * --kf-escala-pulso-de: 0,95; --kf-pulse-scale-to: 1,05; // escala pulso * --kf-opacidade-pulso-de: 0,7; --kf-opacidade-pulso-a: 1; // pulso de opacidade */
@keyframes kf-pulse { de { escala: var(--kf-pulso-escala-de, 1); opacidade: var(--kf-opacidade-pulso-de, 1); } a { escala: var(--kf-pulse-scale-to, 1); opacidade: var(--kf-opacidade-pulso-to, 1); } }
Isto crea un pulso flexible que pode animar varias propiedades: .chamada á acción { animación: kf-pulse 0,6s alternado infinito; --kf-opacidade-pulso-de: 0,5; /* pulso de opacidade */ }
.notificación-punto { animación: kf-pulse 0.6s ease-in-out infinito alternativo; --kf-escala-pulso-de: 0,9; --kf-pulse-scale-to: 1,1; /* pulso de escala */ }
.text-highlight { animación: kf-pulse 1.5s ease-out infinito; --kf-escala-pulso-de: 0,8; --kf-opacidade-pulso-de: 0,2; /* pulso de escala e opacidade */ }
Vexa as fichas de fotogramas clave de pluma - Demo 6 [forked] de Amit Sheen. Este único fotograma clave de kf-pulse pode xestionar todo, desde atraccións sutís ata os momentos destacados dramáticos, todo ao tempo que é fácil de personalizar. Easing avanzado Unha das boas cousas do uso de tokens de fotogramas clave é o fácil que é expandir a nosa biblioteca de animacións e proporcionar efectos que a maioría dos desenvolvedores non se molestarían en escribir desde cero, como o elástico ou o rebote. Aquí tes un exemplo dun token de fotogramas clave simple de "rebote" que usa unha propiedade personalizada --kf-bounce-from para controlar a altura do salto. /* * Bounce: animación de entrada de rebote * Use --kf-bounce-from para controlar a altura do salto * Predeterminado: salta desde 100vh (fóra da pantalla) * Uso: * animación: kf-bounce 3s ease-in; * --kf-bounce-de: 200px; // saltar desde 200 px de altura */
@keyframes kf-bounce { 0 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0.1); }
85 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99 % { traducir: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22 %, 45 %, 64 %, 79 %, 90 %, 97 %, 100 % { traducir: 0 0; función de temporización de animación: ease-out; } }
Animacións como "elástico" son un pouco máis complicadas debido aos cálculos dentro dos fotogramas clave. Necesitamos definir --kf-elastic-from-X e --kf-elastic-from-Y por separado (ambos son opcionais), e xuntos permítennos crear unha entrada elástica desde calquera punto da pantalla.
/* * Elastic In - animación de entrada elástica * Use --kf-elastic-from-X e --kf-elastic-from-Y para controlar a posición inicial * Predeterminado: entra dende o centro superior (0, -100vh) * Uso: * animación: kf-elastic-in 2s ease-in-out ambos; * --kf-elastic-from-X: -50px; * --kf-elastic-from-Y: -200px; // ingresa desde (-50px, -200px) */
@keyframes kf-elastic-in { 0 % { traducir: calc(var(--kf-elastic-from-X, -50vw) * 1) calc(var(--kf-elastic-from-Y, 0px) * 1); }
16 % { traducir: calc(var(--kf-elástico-de-X, -50vw) * -0,3227) calc(var(--kf-elastic-de-Y, 0px) * -0,3227); }
28 % { traducir: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elástico-de-Y, 0px) * 0,1312); }
44 % { traducir: calc(var(--kf-elastic-de-X, -50vw) * -0,0463) calc(var(--kf-elastic-de-Y, 0px) * -0,0463); }
59 % { traducir: calc(var(--kf-elastic-from-X, -50vw) * 0,0164) calc(var(--kf-elastic-from-Y, 0px) * 0,0164); }
73 % { traducir: calc(var(--kf-elastic-de-X, -50vw) * -0,0058) calc(var(--kf-elastic-de-Y, 0px) * -0,0058); }
88 % { traducir: calc(var(--kf-elastic-from-X, -50vw) * 0,0020) calc(var(--kf-elastic-from-Y, 0px) * 0,0020); }
100 % { traducir: 0 0; } }
Este enfoque facilita a reutilización e a personalización de fotogramas clave avanzados no noso proxecto, só cambiando unha única propiedade personalizada.
.bounce-and-zoom { animación: kf-bounce 3s ease-in, kf-zoom 3s lineal; --kf-ampliar-desde: 0; }
.bounce-and-slide { animación-composición: engadir; /* Ambas animacións usan traducir */ animación: kf-bounce 3s ease-in, kf-slide-in 3s ease-out; --kf-slide-de: -200px; }
.elastic-in { animación: kf-elastic-in 2s ease-in-out ambos; }
Vexa as fichas de cadros clave de pluma - Demo 7 [forked] de Amit Sheen. Ata este punto, vimos como podemos consolidar fotogramas clave dun xeito intelixente e eficiente. Por suposto, pode querer axustar as cousas para adaptarse mellor ás necesidades do seu proxecto, pero cubrimos exemplos de varias animacións comúns e casos de uso cotián. E con estes tokens de fotogramas clave instalados, agora temos poderosos bloques de construción para crear animacións coherentes e mantibles en todo o proxecto. Non máis fotogramas clave duplicados, non máis conflitos de alcance global. Só un xeito limpo e cómodo de xestionar todas as nosas necesidades de animación. Pero a verdadeira pregunta é: como compoñeremos estes bloques de construción xuntos? Reuníndoo todo Vimos que combinar tokens de fotogramas clave básicos é sinxelo. Non necesitamos nada especial senón definir a primeira animación, definir a segunda, configurar as variables segundo sexa necesario, e xa está. /* Fade in + slide in */ .torrada { animación: kf-fade-in 0,4 s, kf-slide-in 0,4 s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-slide-de: 0 40px; }
/* Ampliar + fundir */ .modal { animación: kf-fade-in 0,3 s, kf-zoom 0,3s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-ampliar-desde: 0,7; --kf-ampliar a: 1; }
/* Desliza + pulso */ .notificación { animación: deslizamento kf 0,5 s, kf-pulse 1.2s ease-in-out infinito alternativo; --kf-slide-de: -100px 0; --kf-escala-pulso-de: 0,95; --kf-pulse-scale-to: 1,05; }
Estas combinacións funcionan moi ben porque cada animación ten como obxectivo unha propiedade diferente: opacidade, transformación (traducir/escalar), etc. Pero ás veces hai conflitos, e necesitamos saber por que e como tratar con eles. Cando dúas animacións intentan animar a mesma propiedade (por exemplo, tanto a escala de animación como a opacidade de animación), o resultado non será o esperado. Por defecto, só se aplica a esa propiedade unha das animacións, que é a última da lista de animacións. Esta é unha limitación de como CSS xestiona varias animacións na mesma propiedade. Por exemplo, isto non funcionará como se pretende porque só se aplicará a animación kf-pulse. .mal-combo { animación: kf-zoom 0,5 s cara adiante, kf-pulso 1.2s alternado infinito; --kf-ampliar-desde: 0,5; --kf-ampliar a: 1,2; --kf-escala-pulso-de: 0,8; --kf-pulse-scale-to: 1,1; }
Adición de animación A forma máis sinxela e directa de xestionar varias animacións que afectan á mesma propiedade é usar a propiedade animación-composición. No último exemplo anterior, a animación kf-pulse substitúe a animación kf-zoom, polo que non veremos o zoom inicial e non conseguiremos a escala esperada de 1.2. Ao configurar a animación-composición para engadir, dicímoslle ao navegador que combine ambas animacións. Isto dános o resultado que queremos. .compoñente-dous { animación-composición: engadir; }
Vexa as fichas de fotogramas clave de pluma - Demo 8 [forked] de Amit Sheen. Este enfoque funciona ben na maioría dos casos nos que queremos combinar efectos sobre a mesma propiedade. Tamén é útil cando necesitamos combinar animacións con valores de propiedade estática. Por exemplo, se temos un elemento que usa a propiedade translate para situalo exactamente onde queremos, e despois queremos animalo cos fotogramas clave kf-slide-in, obtemos un desagradable salto visible sen composición de animación. Vexa as fichas de cadros clave de pluma - Demo 9 [forked] de Amit Sheen. Coa composición de animación configurada para engadir, a animación combínase sen problemas coa existentetransformar, polo que o elemento permanece no seu lugar e anima como se esperaba. Escalador de animación Outra forma de xestionar varias animacións é "escalonalas", é dicir, comezar a segunda animación un pouco despois de que remate a primeira. Non é unha solución que funcione para todos os casos, pero é útil cando temos unha animación de entrada seguida dunha animación continua. /* desvanecemento + pulso de opacidade */ .notificación { animación: kf-fade-in 2s ease-out, kf-pulse 0,5s 2s ease-in-out alternante infinito; --kf-opacidade-pulso-a: 0,5; }
Vexa as fichas de cadros clave de pluma - Demo 10 [forked] de Amit Sheen. As cuestións da orde Unha gran parte das animacións coas que traballamos usan a propiedade transform. Na maioría dos casos, isto é simplemente máis cómodo. Tamén ten unha vantaxe de rendemento xa que as animacións de transformación poden ser aceleradas pola GPU. Pero se usamos transformacións, debemos aceptar que a orde na que realizamos as nosas transformacións importa. Moito. Nos nosos fotogramas clave ata agora, usamos transformacións individuais. Segundo as especificacións, estas sempre aplícanse nunha orde fixa: primeiro, o elemento se traduce, despois xira e despois escala. Isto ten sentido e é o que a maioría de nós esperamos. Non obstante, se usamos a propiedade transform, a orde na que se escriben as funcións é a orde na que se aplican. Neste caso, se movemos algo 100 píxeles no eixe X e despois o xiramos 45 graos, non é o mesmo que primeiro xiralo 45 graos e despois movelo 100 píxeles. /* Cadrado rosa: primeiro tradúcese e despois xira */ .exemplo-un { transformar: translateX(100px) rotar(45deg); }
/* Cadrado verde: primeiro xira e despois traslada */ .exemplo-dous { transformar: xirar (45deg) translateX (100px); }
Vexa as fichas de cadros clave de pluma - Demo 11 [forked] de Amit Sheen. Pero segundo a orde de transformación, todas as transformacións individuais (todo o que usamos para as fichas de fotogramas clave) ocorren antes das funcións de transformación. Isto significa que calquera cousa que estableza na propiedade de transformación ocorrerá despois das animacións. Pero se estableces, por exemplo, a tradución xunto cos fotogramas clave kf-spin, a tradución ocorrerá antes da animación. Confundido aínda?! Isto leva a situacións nas que os valores estáticos poden causar resultados diferentes para a mesma animación, como no seguinte caso:
/* Animación común para ambos os xiradores */ .spinner { animación: kf-spin 1s lineal infinito; }
/* Spinner rosa: traducir antes de xirar (transformación individual) */ .spinner-rosa { traducir: 100% 50%; }
/* Spinner verde: xira e despois traduce (orde da función) */ .spinner-verde { transformar: traducir(100%, 50%); }
Vexa as fichas de cadros clave de pluma - Demo 12 [forked] de Amit Sheen. Podes ver que o primeiro xiro (rosa) obtén unha translación que ocorre antes da rotación de kf-spin, polo que primeiro móvese ao seu lugar e despois xira. O segundo xirador (verde) obtén unha función translate() que ocorre despois da transformación individual, polo que o elemento primeiro xira, despois móvese en relación ao seu ángulo actual e obtemos ese efecto de órbita ampla. Non, isto non é un erro. É só unha desas cousas que debemos saber sobre CSS e ter en conta cando traballamos con varias animacións ou varias transformacións. Se é necesario, tamén pode crear un conxunto adicional de fotogramas clave kf-spin-alt que xiren elementos usando a función rotate(). Movemento reducido E mentres falamos de fotogramas clave alternativos, non podemos ignorar a opción "sen animación". Unha das maiores vantaxes do uso de tokens de fotogramas clave é que se pode incorporar a accesibilidade e, en realidade, é bastante fácil de facer. Ao deseñar os nosos fotogramas clave tendo en conta a accesibilidade, podemos garantir que os usuarios que prefiren o movemento reducido teñan unha experiencia máis fluida e menos distraída, sen traballo extra nin duplicación de código. O significado exacto de "Movemento reducido" pode cambiar un pouco dunha animación a outra e dun proxecto a outro, pero aquí tes algúns puntos importantes a ter en conta: Silenciar fotogramas clave Aínda que algunhas animacións pódense suavizar ou ralentizar, hai outras que deberían desaparecer por completo cando se solicita un movemento reducido. As animacións de pulso son un bo exemplo. Para asegurarnos de que estas animacións non se executen en modo de movemento reducido, simplemente podemos envolvelas na consulta multimedia adecuada.
@media (prefers-reduced-motion: sen preferencia) { @keyfrmaes kf-pulse { de { escala: var(--kf-pulso-escala-de, 1); opacidade: var(--kf-opacidade-pulso-de, 1); } a { escala: var(--kf-pulse-scale-to, 1); opacidade:var(--kf-opacidade-pulso-to, 1); } } }
Isto garante que os usuarios que estableceron preferencias de movemento reducido para reducir non verán a animación e terán unha experiencia que coincida coa súa preferencia. Instant In Hai algúns fotogramas clave que non podemos simplemente eliminar, como as animacións de entrada. O valor debe cambiar, debe animarse; se non, o elemento non terá os valores correctos. Pero en movemento reducido, esta transición desde o valor inicial debería ser instantánea. Para conseguilo, definiremos un conxunto extra de fotogramas clave onde o valor salta inmediatamente ao estado final. Estes convértense nos nosos fotogramas clave predeterminados. Despois, engadiremos os fotogramas clave normais dentro dunha consulta multimedia para prefers-reduced-motion definida como sen preferencia, igual que no exemplo anterior. /* aparece ao instante para reducir o movemento */ @keyframes kf-zoom { de, a { escala: var(--kf-ampliar, 1); } }
@media (prefers-reduced-motion: sen preferencia) { /* Cadros clave de zoom orixinais */ @keyframes kf-zoom { de { escala: var(--kf-zoom-de, 0,8); } a { escala: var(--kf-ampliar, 1); } } }
Deste xeito, os usuarios que prefiran o movemento reducido verán o elemento aparecer ao instante no seu estado final, mentres que todos os demais terán a transición animada. O enfoque suave Hai casos nos que queremos manter certo movemento, pero moito máis suave e tranquilo que a animación orixinal. Por exemplo, podemos substituír unha entrada de rebote por un fade-in suave.
@keyframes kf-bounce { /* Fade-in suave para movemento reducido */ }
@media (prefers-reduced-motion: sen preferencia) { @keyframes kf-bounce { /* Cadros clave de rebote orixinais */ } }
Agora, os usuarios con movemento reducido activado aínda teñen unha sensación de aparencia, pero sen o movemento intenso dun rebote ou unha animación elástica. Cos bloques de construción no lugar, a seguinte pregunta é como facelos parte do fluxo de traballo real. Escribir fotogramas clave flexibles é unha cousa, pero facelos fiables nun proxecto grande require unhas cantas estratexias que tiven que aprender ás duras. Estratexias de implantación e boas prácticas Unha vez que teñamos unha sólida biblioteca de tokens de fotogramas clave, o verdadeiro desafío é como incorporalos ao traballo diario.
A tentación é soltar todos os fotogramas clave á vez e declarar o problema resolto, pero na práctica descubrín que os mellores resultados veñen da adopción gradual. Comeza coas animacións máis comúns, como fade ou slide. Estas son vitorias fáciles que mostran un valor inmediato sen necesidade de grandes reescrituras. A denominación é outro punto que merece atención. Un prefixo ou espazo de nomes consistente fai obvio que animacións son fichas e cales son puntuales locais. Tamén evita colisións accidentais e axuda aos novos membros do equipo a recoñecer o sistema compartido dunha ollada. A documentación é tan importante como o propio código. Mesmo un pequeno comentario sobre cada token de fotogramas clave pode aforrar horas de adiviñación máis tarde. Un desenvolvedor debería poder abrir o ficheiro de tokens, buscar o efecto que necesita e copiar o patrón de uso directamente no seu compoñente. A flexibilidade é o que fai que este enfoque valga a pena o esforzo. Ao expoñer propiedades personalizadas sensatas, dámoslle aos equipos espazo para adaptar a animación sen romper o sistema. Ao mesmo tempo, intente non complicarse demasiado. Proporciona os botóns que importan e mantén o resto de opinión. Finalmente, lembra a accesibilidade. Non todas as animacións necesitan unha alternativa de movemento reducido, pero moitas si. Facer estes axustes cedo significa que nunca teremos que adaptalos máis tarde, e mostra un nivel de coidado que os nosos usuarios notarán aínda que nunca o mencionen.
Segundo a miña experiencia, tratar os tokens de fotogramas clave como parte do noso fluxo de traballo de tokens de deseño é o que os fai manter. Unha vez que están no seu lugar, deixan de sentirse como efectos especiais e pasan a formar parte da linguaxe de deseño, unha extensión natural de como o produto se move e responde. Concluíndo As animacións poden ser unha das partes máis alegres da construción de interfaces, pero sen estrutura, tamén poden converterse nunha das maiores fontes de frustración. Ao tratar os fotogramas clave como tokens, toma algo que normalmente é desordenado e difícil de xestionar e convérteo nun sistema claro e previsible. O verdadeiro valor non está só en gardar algunhas liñas de código. Confía en que cando usas un fundido, unha diapositiva, un zoom ou un xiro, sabes exactamente como se comportará no proxecto. Está na flexibilidade que vén das propiedades personalizadas sen o caos de variacións infinitas. E está na accesibilidade integrada na fundación en lugar de engadir comounha reflexión posterior. Vin estas ideas traballar en diferentes equipos e diferentes bases de código, e o patrón é sempre o mesmo. Unha vez que os tokens están no seu lugar, os fotogramas clave deixan de ser unha colección dispersa de trucos e pasan a formar parte da linguaxe de deseño. Fan que o produto se sinta máis intencionado, máis consistente e máis vivo. Se tomas unha cousa deste artigo, que sexa esta: as animacións merecen o mesmo coidado e estrutura que xa lle damos ás cores, á tipografía e ao espazo. Un pequeno investimento en tokens de fotogramas clave compensa cada vez que a túa interface se move.
