Imagineu-vos això: us uniu a un projecte nou, us submergiu a la base de codis i, en les primeres hores, descobriu alguna cosa frustrantment familiar. Escampats pels fulls d'estil, trobareu diverses definicions de @keyframes per a les mateixes animacions bàsiques. Tres efectes d'esvaïment diferents, dues o tres variacions de diapositives, un grapat d'animacions de zoom i almenys dues animacions de gir diferents perquè, bé, per què no? @keyframes pols { de { escala: 1; } a { escala: 1,1; } }
@keyframes bigger-pulse { 0%, 20%, 100% { escala: 1; } 10%, 40% { escala: 1,2; } }
Si aquest escenari us sembla familiar, no esteu sols. Segons la meva experiència en diversos projectes, una de les victòries ràpides més consistents que puc oferir és consolidar i estandarditzar fotogrames clau. S'ha convertit en un patró tan fiable que ara espero aquesta neteja com una de les meves primeres tasques en qualsevol base de codi nova. La lògica darrere del caos Aquesta redundància té molt sentit quan hi penses. Tots fem servir les mateixes animacions fonamentals en el nostre dia a dia: esvaïments, diapositives, zooms, girs i altres efectes habituals. Aquestes animacions són bastant senzilles i és fàcil crear una definició ràpida de @keyframes per fer la feina. Sense un sistema d'animació centralitzat, els desenvolupadors escriuen naturalment aquests fotogrames clau des de zero, sense saber que ja existeixen animacions similars en altres llocs de la base de codi. Això és especialment comú quan es treballa en arquitectures basades en components (cosa que la majoria de nosaltres fem en aquests dies), ja que els equips sovint treballen en paral·lel a diferents parts de l'aplicació. El resultat? Caos d'animació. El petit problema Els problemes més evidents amb la duplicació de fotogrames clau són la pèrdua de temps de desenvolupament i la inflació de codi innecessària. Les definicions de fotogrames clau múltiples signifiquen diversos llocs per actualitzar quan canvien els requisits. Necessites ajustar la sincronització de la teva animació d'esvaïment? Haureu de buscar totes les instàncies de la vostra base de codi. Voleu estandarditzar les funcions d'alleujament? Molta sort per trobar totes les variacions. Aquesta multiplicació de punts de manteniment fa que fins i tot les actualitzacions d'animació senzilles siguin una tasca que requereixi molt de temps. El problema més gran Aquesta duplicació de fotogrames clau crea un problema molt més insidios que s'amaga sota la superfície: la trampa d'abast global. Fins i tot quan es treballa amb arquitectures basades en components, els fotogrames clau CSS sempre es defineixen a l'àmbit global. Això significa que tots els fotogrames clau s'apliquen a tots els components. Sempre. Sí, la vostra animació no necessàriament utilitza els fotogrames clau que heu definit al vostre component. Utilitza els últims fotogrames clau que coincideixen exactament amb el mateix nom que es van carregar a l'àmbit global. Sempre que tots els vostres fotogrames clau siguin idèntics, pot semblar un problema menor. Però en el moment que vulgueu personalitzar una animació per a un cas d'ús específic, teniu problemes o, pitjor, seràs qui els provoqui. La vostra animació no funcionarà perquè s'ha carregat un altre component després del vostre, sobreescriu els vostres fotogrames clau, o el vostre component es carrega per darrer i canvia accidentalment el comportament de l'animació de tots els altres component que utilitzen el nom d'aquest fotograma clau, i potser ni tan sols us n'adoneu. Aquí teniu un exemple senzill que demostra el problema: .component-one { /* estils de components */ animació: pols 1s ease-in-out infinit alternatiu; }
/* aquesta definició de @keyframes no funcionarà */ @keyframes pols { de { escala: 1; } a { escala: 1,1; } }
/* més endavant al codi... */
.component-dos { /* estils de components */ animació: pols 1s facilitat d'entrada-sort infinit; }
/* aquests fotogrames clau s'aplicaran als dos components */ @keyframes pols { 0%, 20%, 100% { escala: 1; } 10%, 40% { escala: 1,2; } }
Els dos components utilitzen el mateix nom d'animació, però la segona definició @keyframes sobreescriu la primera. Ara tant el component-un com el component-dos utilitzaran els segons fotogrames clau, independentment de quin component hagi definit quins fotogrames clau. Vegeu les fitxes de fotogrames clau del llapis - Demo 1 [forked] d'Amit Sheen. La pitjor part? Això sovint funciona perfectament en el desenvolupament local, però es trenca misteriosament en la producció quan els processos de creació canvien l'ordre de càrrega dels vostres fulls d'estil. Acabeu amb animacions que es comporten de manera diferent segons quins components es carreguen i en quina seqüència. La solució: fotogrames clau unificats La resposta a aquest caos és sorprenentment simple: fotogrames clau dinàmics predefinits emmagatzemats en un full d'estil compartit. En lloc de deixar que cada component defineixi les seves pròpies animacions, creem fotogrames clau centralitzats ben documentats i fàcils de fer.ús, mantenible i adaptat a les necessitats específiques del vostre projecte. Penseu en això com a fitxes de fotogrames clau. De la mateixa manera que fem servir fitxes per als colors i l'espaiat, i molts de nosaltres ja utilitzem fitxes per a les propietats d'animació, com ara les funcions de durada i d'alleujament, per què no utilitzar fitxes també per a fotogrames clau? Aquest enfocament es pot integrar de manera natural amb qualsevol flux de treball de testimoni de disseny actual que utilitzeu, alhora que resol tant el petit problema (duplicació de codi) com el problema més gran (conflictes d'abast global) d'una vegada. La idea és senzilla: crear una única font de veritat per a totes les nostres animacions comunes. Aquest full d'estil compartit conté fotogrames clau dissenyats amb cura que cobreixen els patrons d'animació que realment utilitza el nostre projecte. Ja no cal endevinar si una animació esvaïda ja existeix en algun lloc de la nostra base de codi. No més sobreescriure accidentalment animacions d'altres components. Però aquí està la clau: no només són animacions estàtiques de copiar-enganxar. Estan dissenyats per ser dinàmics i personalitzables mitjançant propietats personalitzades CSS, cosa que ens permet mantenir la coherència tot i tenir la flexibilitat d'adaptar les animacions a casos d'ús específics, com si necessiteu una animació de "pols" una mica més gran en un sol lloc. Creació del primer testimoni de fotogrames clau Una de les primeres fruites baixes que hauríem d'abordar és l'animació "esvaint-se". En un dels meus projectes recents, vaig trobar més d'una dotzena de definicions separades i, sí, totes simplement animaven l'opacitat de 0 a 1. Per tant, creem un nou full d'estil, anomenem-lo kf-tokens.css, importem-lo al nostre projecte i col·loquem els nostres fotogrames clau amb els comentaris adequats. /* keyframes-tokens.css */
/* * Fade In - esvaeix l'animació d'entrada * Ús: animació: kf-fade-in 0.3s ease-out; */ @keyframes kf-fade-in { de { opacitat: 0; } a { opacitat: 1; } }
Aquesta declaració única de @keyframes substitueix totes aquelles animacions disperses per la nostra base de codi. Net, senzill i aplicable a tot el món. I ara que tenim aquest testimoni definit, el podem utilitzar des de qualsevol component al llarg del nostre projecte: .modal { animació: kf-fade-in 0.3s facilitat; }
.tooltip { animació: kf-fade-in 0,2 s facilitat d'entrada i sortida; }
.notificació { animació: kf-fade-in 0.5s facilitat; }
Vegeu les fitxes de fotogrames clau de ploma - Demo 2 [forked] d'Amit Sheen. Nota: Estem utilitzant un prefix kf- a tots els nostres noms @keyframes. Aquest prefix serveix com a espai de noms que evita conflictes de noms amb les animacions existents al projecte i deixa clar immediatament que aquests fotogrames clau provenen del nostre fitxer de fitxes de fotogrames clau. Fer una diapositiva dinàmica Els fotogrames clau de kf-fade-in funcionen molt bé perquè són senzills i hi ha poc espai per desordenar les coses. En altres animacions, però, hem de ser molt més dinàmics, i aquí podem aprofitar l'enorme poder de les propietats personalitzades CSS. Aquí és on les fitxes de fotogrames clau brillen realment en comparació amb les animacions estàtiques disperses. Prenem un escenari comú: les animacions "slide-in". Però lliscar des d'on? 100 píxels de la dreta? 50% de l'esquerra? Hauria d'entrar des de la part superior de la pantalla? O potser surar des del fons? Tantes possibilitats, però en lloc de crear fotogrames clau separats per a cada direcció i cada variació, podem crear un testimoni flexible que s'adapti a tots els escenaris: /* * Slide In: animació de diapositives direccionals * Utilitzeu --kf-slide-from per controlar la direcció * Per defecte: llisca des de l'esquerra (-100%) * Ús: * animació: kf-slide-in 0.3s easeout; * --kf-slide-from: -100px 0; // llisca des de l'esquerra * --kf-slide-de: 100px 0; // llisca des de la dreta * --kf-diapositiva-des de: 0 -50px; // llisca des de dalt */
@keyframes kf-slide-in { de { traduir: var(--kf-slide-from, -100% 0); } a { traduir: 0 0; } }
Ara podem utilitzar aquest únic testimoni @keyframes per a qualsevol direcció de la diapositiva simplement canviant la propietat personalitzada --kf-slide-from: .sidebar { animació: kf-slide-in 0.3s easeout; /* Utilitza el valor predeterminat: llisca des de l'esquerra */ }
.notificació { animació: kf-slide-in 0.4s easeout; --kf-diapositiva-des de: 0 -50px; /* llisca des de dalt */ }
.modal { animació: kf-fade-in 0,5 s, kf-slide-in 0,5 s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-diapositiva-des de: 50px 50px; /* llisca des de la part inferior dreta */ }
Aquest enfocament ens proporciona una flexibilitat increïble mantenint la coherència. Una declaració de fotograma clau, infinites possibilitats. Vegeu les fitxes de fotogrames clau del llapis - Demo 3 [forked] d'Amit Sheen. I si volem que les nostres animacions siguin encara més flexibles, permetent també efectes de "lliscant", podemsimplement afegiu una propietat personalitzada --kf-slide-to, similar al que veurem a la secció següent. Fotogrames clau de zoom bidireccional Una altra animació habitual que es duplica a través dels projectes són els efectes de "zoom". Tant si es tracta d'una subtil ampliació per als missatges de brindis, d'un zoom espectacular per als modals o d'un suau efecte de reducció d'escala per als encapçalaments, les animacions de zoom estan a tot arreu. En lloc de crear fotogrames clau separats per a cada valor d'escala, creem un conjunt flexible de fotogrames clau de kf-zoom:
/* * Zoom - animació a escala * Utilitzeu --kf-zoom-from i --kf-zoom-to per controlar els valors d'escala * Per defecte: zoom del 80% al 100% (de 0,8 a 1) * Ús: * animació: kf-zoom 0.2s easeout; * --kf-zoom-des de: 0,5; --kf-amplia-a: 1; // zoom del 50% al 100% * --kf-amplia-des de: 1; --kf-amplia a: 0; // zoom del 100% al 0% * --kf-amplia-des de: 1; --kf-zoom-to: 1.1; // zoom del 100% al 110% */
@keyframes kf-zoom { de { escala: var(--kf-zoom-de, 0,8); } a { escala: var(--kf-ampliar-a, 1); } }
Amb una definició, podem aconseguir qualsevol variació de zoom que necessitem: .torrada { animació: kf-slide-in 0,2 s, kf-zoom 0.4s facilitat; --kf-slide-de: 0 100%; /* llisca des de dalt */ /* Utilitza el zoom predeterminat: escala del 80% al 100% */ }
.modal { animació: kf-zoom 0,3s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-amplia-des de: 0; /* zoom espectacular del 0% al 100% */ }
.encapçalament { animació: kf-fade-in 2s, kf-zoom 2s facilitat d'entrada; --kf-zoom-des de: 1,2; --kf-amplia a: 0,8; /* escala suaument baixa */ }
El valor predeterminat de 0,8 (80%) funciona perfectament per a la majoria d'elements de la interfície d'usuari, com ara missatges i targetes de brindis, tot i que és fàcil de personalitzar per a casos especials. Vegeu les fitxes de fotogrames clau del llapis - Demo 4 [forked] d'Amit Sheen. Potser heu notat alguna cosa interessant en els exemples recents: hem estat combinant animacions. Un dels avantatges clau de treballar amb fitxes @keyframes és que estan dissenyats per integrar-se perfectament entre ells. Aquesta composició suau és intencionada, no accidental. Més endavant parlarem de la composició de l'animació amb més detall, inclòs on poden ser problemàtiques, però la majoria de combinacions són senzilles i fàcils d'implementar. Nota: mentre escrivia aquest article, i potser per haver-lo escrit, em vaig trobar repensant tota la idea de les animacions d'entrada. Amb tots els avenços recents en CSS, encara els necessitem? Afortunadament, Adam Argyle va explorar les mateixes preguntes i les va expressar de manera brillant al seu bloc. Això no contradiu el que s'escriu aquí, però presenta un enfocament que val la pena tenir en compte, sobretot si els vostres projectes depenen molt de les animacions d'entrada. Animacions contínues Mentre que les animacions d'entrada, com ara "esvair", "lliscar" i "ampliar" es produeixen una vegada i després s'aturen, les animacions contínues es fan en bucle indefinidament per cridar l'atenció o indicar activitat en curs. Les dues animacions contínues més habituals que trobo són "gir" (per a indicadors de càrrega) i "pols" (per ressaltar elements importants). Aquestes animacions presenten reptes únics a l'hora de crear fitxes de fotogrames clau. A diferència de les animacions d'entrada que solen anar d'un estat a un altre, les animacions contínues han de ser molt personalitzables en els seus patrons de comportament. El Doctor Spin Cada projecte sembla utilitzar múltiples animacions de gir. Alguns giren en sentit horari, altres en sentit contrari. Alguns fan una única rotació de 360 graus, d'altres fan diverses voltes per obtenir un efecte més ràpid. En lloc de crear fotogrames clau separats per a cada variació, creem un gir flexible que gestioni tots els escenaris:
/* * Girar - animació de rotació * Utilitzeu --kf-spin-from i --kf-spin-to per controlar el rang de rotació * Utilitzeu --kf-spin-turns per controlar la quantitat de rotació * Per defecte: gira de 0 graus a 360 graus (1 rotació completa) * Ús: * animació: kf-spin 1s lineal infinit; * --kf-gir-girs: 2; // 2 rotacions completes * --kf-spin-de: 0deg; --kf-spin-to: 180 graus; // mitja rotació * --kf-spin-de: 0deg; --kf-spin-to: -360 graus; // en sentit contrari a les agulles del rellotge */
@keyframes kf-spin { de { girar: var (--kf-spin-from, 0deg); } a { rotació: calc(var(--kf-spin-de, 0deg) + var (--kf-spin-to, 360deg) * var (--kf-spin-girs, 1)); } }
Ara podem crear qualsevol variació de gir que ens agradi:
.loading-spinner { animació: kf-spin 1s lineal infinit; /* Utilitza per defecte: gira de 0 graus a 360 graus */ }
.carregador ràpid { animació: kf-spin 1.2s ease-in-out infinit alternatiu; --kf-gir-girs: 3; /* 3 rotacions completes per a cada sentit per cicle*/ }
.gradós-revers { animació: kf-spin 1.5s passos(8) infinit; --kf-spin-to: -360 graus; /* en sentit contrari a les agulles del rellotge */ }
.meneu-subtil { animació: kf-spin 2s ease-in-out infinit alternatiu; --kf-gir-des de: -16 graus; --kf-spin-to: 32 graus; /* moure 36 graus: entre -18 graus i +18 graus */ }
Vegeu les fitxes de fotogrames clau del llapis - Demo 5 [forked] d'Amit Sheen. La bellesa d'aquest enfocament és que els mateixos fotogrames clau funcionen per carregar spinners, icones giratòries, efectes de moviment i fins i tot animacions complexes de múltiples voltes. La paradoxa del pols Les animacions de pols són més complicades perquè poden "impulsar" diferents propietats. Alguns pulsa l'escala, d'altres l'opacitat i algunes propietats de color pols com la brillantor o la saturació. En lloc de crear fotogrames clau separats per a cada propietat, podem crear fotogrames clau que funcionin amb qualsevol propietat CSS. Aquí teniu un exemple d'un fotograma clau de pols amb opcions d'escala i opacitat:
/* * Animació de pols * Utilitzeu --kf-pulse-scale-from i --kf-pulse-scale-to per controlar el rang d'escala * Utilitzeu --kf-pulse-opacity-from i --kf-pulse-opacity-to per controlar el rang d'opacitat * Per defecte: sense pols (tots els valors 1) * Ús: * animació: kf-pulse 2s ease-in-out infinit alternate; * --kf-escala-pols-des de: 0,95; --kf-pulse-scale-to: 1,05; // escala pols * --kf-opacitat-pols-de: 0,7; --kf-opacitat-pols-a: 1; // pols d'opacitat */
@keyframes kf-pulse { de { escala: var(--kf-pols-escala-des de, 1); opacitat: var(--kf-opacitat-pols-de, 1); } a { escala: var(--kf-pulse-scale-to, 1); opacitat: var(--kf-opacitat-pols-a, 1); } }
Això crea un pols flexible que pot animar múltiples propietats: .crida a l'acció { animació: kf-pulse 0.6s infinit alternatiu; --kf-opacitat-pols-des de: 0,5; /* pols d'opacitat */ }
.notification-dot { animació: kf-pulse 0,6 s ease-in-out infinit alternatiu; --kf-escala-pols-des de: 0,9; --kf-pulse-scale-to: 1,1; /* pols d'escala */ }
.text-highlight { animació: kf-pulse 1.5s ease-out infinit; --kf-escala-pols-des de: 0,8; --kf-opacitat-pols-de: 0,2; /* pols d'escala i opacitat */ }
Vegeu les fitxes de fotogrames clau del llapis - Demo 6 [forked] d'Amit Sheen. Aquest fotograma clau de kf-pulse únic pot gestionar tot, des de subtils captacions d'atenció fins a moments destacats dramàtics, tot alhora que és fàcil de personalitzar. Reducció avançada Una de les millors coses de l'ús de fitxes de fotogrames clau és la facilitat que és ampliar la nostra biblioteca d'animacions i proporcionar efectes que la majoria de desenvolupadors no es molestarien a escriure des de zero, com ara elàstics o rebots. Aquí teniu un exemple d'un testimoni de fotogrames clau de "rebot" senzill que utilitza una propietat personalitzada --kf-bounce-from per controlar l'alçada del salt. /* * Rebot: animació d'entrada rebot * Utilitzeu --kf-bounce-from per controlar l'alçada del salt * Per defecte: salta des de 100vh (fora de la pantalla) * Ús: * animació: kf-bounce 3s ease-in; * --kf-bounce-de: 200px; // salta des de 200 píxels d'alçada */
@keyframes kf-bounce { 0% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -1); }
34% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -0,4); }
55% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -0,2); }
72% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -0,1); }
85% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -0,05); }
94% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -0,025); }
99% { traduir: 0 calc(var(--kf-bounce-from, 100vh) * -0,0125); }
22%, 45%, 64%, 79%, 90%, 97%, 100% { traduir: 0 0; funció de temporització d'animació: facilitat; } }
Les animacions com "elàstiques" són una mica més complicades a causa dels càlculs dins dels fotogrames clau. Hem de definir --kf-elastic-from-X i --kf-elastic-from-Y per separat (tots dos són opcionals), i junts ens permeten crear una entrada elàstica des de qualsevol punt de la pantalla.
/* * Elastic In - animació d'entrada elàstica * Utilitzeu --kf-elastic-from-X i --kf-elastic-from-Y per controlar la posició inicial * Per defecte: entra des del centre superior (0, -100vh) * Ús: * animació: kf-elastic-in 2s ease-in-out ambdues; * --kf-elastic-de-X: -50px; * --kf-elastic-de-Y: -200px; // introdueix des de (-50px, -200px) */
@keyframes kf-elastic-in { 0% { traduir: calc(var(--kf-elastic-de-X, -50vw) * 1) calc(var(--kf-elastic-de-Y, 0px) * 1); }
16% { tradueix: calc(var(--kf-elastic-de-X, -50vw) * -0,3227) calc(var(--kf-elastic-de-Y, 0px) * -0,3227); }
28% { tradueix: calc(var(--kf-elastic-from-X, -50vw) * 0,1312)calc(var(--kf-elastic-from-Y, 0px) * 0,1312); }
44% { tradueix: calc(var(--kf-elastic-de-X, -50vw) * -0,0463) calc(var(--kf-elastic-de-Y, 0px) * -0,0463); }
59% { traduir: calc(var(--kf-elastic-de-X, -50vw) * 0,0164) calc(var(--kf-elastic-de-Y, 0px) * 0,0164); }
73% { traduir: calc(var(--kf-elastic-de-X, -50vw) * -0,0058) calc(var(--kf-elastic-de-Y, 0px) * -0,0058); }
88% { traduir: calc(var(--kf-elastic-de-X, -50vw) * 0,0020) calc(var(--kf-elastic-de-Y, 0px) * 0,0020); }
100% { traduir: 0 0; } }
Aquest enfocament facilita la reutilització i la personalització de fotogrames clau avançats al nostre projecte, només canviant una única propietat personalitzada.
.botar-i-ampliar { animació: kf-bounce 3s facilitat d'entrada, kf-zoom 3s lineal; --kf-amplia-des de: 0; }
.botar-i-lliscar { animació-composició: afegir; /* Les dues animacions utilitzen traducció */ animació: kf-bounce 3s facilitat d'entrada, kf-slide-in 3s facilitat de sortida; --kf-diapositiva-des de: -200px; }
.elastic-in { animació: kf-elastic-in 2s ease-in-out ambdós; }
Vegeu les fitxes de fotogrames clau del llapis - Demo 7 [forked] d'Amit Sheen. Fins a aquest punt, hem vist com podem consolidar fotogrames clau d'una manera intel·ligent i eficient. Per descomptat, potser voldreu ajustar les coses per adaptar-se millor a les necessitats del vostre projecte, però hem cobert exemples de diverses animacions habituals i casos d'ús quotidià. I amb aquests testimonis de fotogrames clau al seu lloc, ara tenim potents blocs de construcció per crear animacions coherents i que es puguin mantenir a tot el projecte. No més fotogrames clau duplicats, ni conflictes d'abast global. Només una manera neta i còmoda de gestionar totes les nostres necessitats d'animació. Però la veritable pregunta és: com componem junts aquests blocs de construcció? Posant-ho tot junt Hem vist que combinar fitxes de fotogrames clau bàsics és senzill. No necessitem res especial sinó definir la primera animació, definir la segona, configurar les variables segons calgui, i ja està. /* Esvaeix + llisca cap */ .torrada { animació: kf-fade-in 0,4 s, kf-slide-in 0,4 s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-diapositiva-des de: 0 40px; }
/* Apropa + esvaeix */ .modal { animació: kf-fade-in 0,3 s, kf-zoom 0,3s cubic-bezier (0,34, 1,56, 0,64, 1); --kf-zoom-des de: 0,7; --kf-amplia-a: 1; }
/* Llisca cap a dins + pols */ .notificació { animació: kf-slide-in 0,5 s, kf-pulse 1.2s facilitat d'entrada-sort infinit alternatiu; --kf-diapositiva-des de: -100px 0; --kf-escala-pols-des de: 0,95; --kf-pulse-scale-to: 1,05; }
Aquestes combinacions funcionen molt bé perquè cada animació té com a objectiu una propietat diferent: opacitat, transformació (traduir/escala), etc. Però de vegades hi ha conflictes, i hem de saber per què i com tractar-los. Quan dues animacions intenten animar la mateixa propietat, per exemple, ambdues animant l'escala o ambdues animant l'opacitat, el resultat no serà el que espereu. De manera predeterminada, només s'aplica una de les animacions a aquesta propietat, que és l'última de la llista d'animacions. Aquesta és una limitació de com CSS gestiona diverses animacions a la mateixa propietat. Per exemple, això no funcionarà com es pretenia perquè només s'aplicarà l'animació kf-pulse. .bad-combo { animació: kf-zoom 0,5 s cap endavant, kf-pols 1,2 s altern infinit; --kf-zoom-des de: 0,5; --kf-amplia a: 1,2; --kf-escala-pols-des de: 0,8; --kf-pulse-scale-to: 1,1; }
Addició d'animació La manera més senzilla i directa de gestionar diverses animacions que afecten la mateixa propietat és utilitzar la propietat animació-composició. En l'últim exemple anterior, l'animació kf-pulse substitueix l'animació kf-zoom, de manera que no veurem el zoom inicial i no aconseguirem l'escala esperada a 1,2. En establir l'animació-composició per afegir, diem al navegador que combini ambdues animacions. Això ens dóna el resultat que volem. .component-dos { animació-composició: afegir; }
Vegeu les fitxes de fotogrames clau de ploma - Demo 8 [forked] d'Amit Sheen. Aquest enfocament funciona bé per a la majoria dels casos en què volem combinar efectes sobre la mateixa propietat. També és útil quan necessitem combinar animacions amb valors de propietat estàtica. Per exemple, si tenim un element que utilitza la propietat translate per posicionar-lo exactament on volem, i després volem animar-lo amb els fotogrames clau de l'entrada kf, obtenim un salt visible desagradable sense composició d'animació. Vegeu les fitxes de fotogrames clau del llapis - Demo 9 [forked] d'Amit Sheen. Amb la composició d'animació configurada per afegir, l'animació es combina sense problemes amb l'existenttransforma, de manera que l'element es manté al seu lloc i s'animi com s'esperava. Escalador d'animació Una altra manera de gestionar diverses animacions és "escalonar-les", és a dir, començar la segona animació una mica després que acabi la primera. No és una solució que funcioni per a tots els casos, però és útil quan tenim una animació d'entrada seguida d'una animació contínua. /* desaparició + pols d'opacitat */ .notificació { animació: kf-fade-in 2s ease-out, kf-polse 0,5s 2s facilitat d'entrada-sort infinit alternatiu; --kf-opacitat-pols-a: 0,5; }
Vegeu les fitxes de fotogrames clau del llapis - Demo 10 [forked] d'Amit Sheen. L'ordre importa Una gran part de les animacions amb les quals treballem utilitzen la propietat transform. En la majoria dels casos, això és simplement més convenient. També té un avantatge de rendiment, ja que les animacions de transformació es poden accelerar amb la GPU. Però si fem servir les transformacions, hem d'acceptar que l'ordre en què realitzem les nostres transformacions és important. Molts. En els nostres fotogrames clau fins ara, hem utilitzat transformacions individuals. Segons les especificacions, sempre s'apliquen en un ordre fix: primer, l'element es tradueix, després gira i després escala. Això té sentit i és el que la majoria de nosaltres esperem. Tanmateix, si fem servir la propietat transform, l'ordre en què s'escriuen les funcions és l'ordre en què s'apliquen. En aquest cas, si movem una cosa 100 píxels a l'eix X i després la girem 45 graus, no és el mateix que primer girar-la 45 graus i després moure-la 100 píxels. /* Quadrat rosa: primer tradueix i després gira */ .exemple-un { transformar: translateX(100px) rotar(45deg); }
/* Quadrat verd: primer gira i després tradueix */ .exemple-dos { transformar: girar(45deg) translateX(100px); }
Vegeu les fitxes de fotogrames clau del llapis - Demo 11 [forked] d'Amit Sheen. Però d'acord amb l'ordre de transformació, totes les transformacions individuals (tot el que hem utilitzat per als testimonis de fotogrames clau) es produeixen abans de les funcions de transformació. Això vol dir que qualsevol cosa que establiu a la propietat de transformació passarà després de les animacions. Però si configureu, per exemple, la traducció juntament amb els fotogrames clau kf-spin, la traducció es produirà abans de l'animació. Encara estàs confós?! Això condueix a situacions en què els valors estàtics poden provocar resultats diferents per a la mateixa animació, com en el cas següent:
/* Animació comuna per a tots dos spinners */ .spinner { animació: kf-spin 1s lineal infinit; }
/* Spinner rosa: tradueix abans de girar (transformació individual) */ .spinner-rosa { traduir: 100% 50%; }
/* Girador verd: gira i tradueix (ordre de funció) */ .spinner-verd { transformar: traduir(100%, 50%); }
Vegeu les fitxes de fotogrames clau del llapis - Demo 12 [forked] d'Amit Sheen. Podeu veure que el primer spinner (rosa) obté una translació que passa abans de la rotació de kf-spin, de manera que primer es mou al seu lloc i després gira. El segon girador (verd) obté una funció translate() que es produeix després de la transformació individual, de manera que l'element gira primer, després es mou en relació al seu angle actual i obtenim aquest efecte d'òrbita àmplia. No, això no és un error. És només una d'aquestes coses que hem de saber sobre CSS i que hem de tenir en compte quan treballem amb diverses animacions o transformacions múltiples. Si cal, també podeu crear un conjunt addicional de fotogrames clau kf-spin-alt que giren elements mitjançant la funció rotate(). Moviment reduït I mentre estem parlant de fotogrames clau alternatius, no podem ignorar l'opció "sense animació". Un dels avantatges més importants d'utilitzar fitxes de fotogrames clau és que es pot incorporar l'accessibilitat i, de fet, és bastant fàcil de fer. Si dissenyem els nostres fotogrames clau tenint en compte l'accessibilitat, ens podem garantir que els usuaris que prefereixen el moviment reduït tinguin una experiència més fluida i menys distractora, sense treball addicional ni duplicació de codi. El significat exacte de "Moviment reduït" pot canviar una mica d'una animació a una altra i d'un projecte a un altre, però aquí teniu alguns punts importants a tenir en compte: Silenciar fotogrames clau Tot i que algunes animacions es poden suavitzar o alentir, n'hi ha d'altres que haurien de desaparèixer completament quan es demana un moviment reduït. Les animacions de pols en són un bon exemple. Per assegurar-nos que aquestes animacions no s'executen en mode de moviment reduït, simplement podem embolicar-les a la consulta multimèdia adequada.
@media (prefers-reduced-motion: sense preferència) { @keyfrmaes kf-pulse { de { escala: var(--kf-pols-escala-des de, 1); opacitat: var(--kf-opacitat-pols-de, 1); } a { escala: var(--kf-pulse-scale-to, 1); opacitat:var(--kf-opacitat-pols-a, 1); } } }
Això garanteix que els usuaris que hagin establert preferències-reduït-moviment per reduir no veuran l'animació i tindran una experiència que coincideixi amb les seves preferències. Instant In Hi ha alguns fotogrames clau que no podem eliminar simplement, com ara les animacions d'entrada. El valor ha de canviar, ha d'animar; en cas contrari, l'element no tindrà els valors correctes. Però en moviment reduït, aquesta transició des del valor inicial hauria de ser instantània. Per aconseguir-ho, definirem un conjunt addicional de fotogrames clau on el valor salti immediatament a l'estat final. Aquests es converteixen en els nostres fotogrames clau predeterminats. Aleshores, afegirem els fotogrames clau habituals dins d'una consulta de mitjans per a prefers-reduced-motion configurat com a sense preferència, igual que a l'exemple anterior. /* apareix a l'instant per reduir el moviment */ @keyframes kf-zoom { de, a { escala: var(--kf-ampliar-a, 1); } }
@media (prefers-reduced-motion: sense preferència) { /* Fotogrames clau de zoom originals */ @keyframes kf-zoom { de { escala: var(--kf-zoom-de, 0,8); } a { escala: var(--kf-ampliar-a, 1); } } }
D'aquesta manera, els usuaris que prefereixen el moviment reduït veuran l'element aparèixer a l'instant en el seu estat final, mentre que tots els altres obtindran la transició animada. L'enfocament suau Hi ha casos en què volem mantenir una mica de moviment, però molt més suau i tranquil que l'animació original. Per exemple, podem substituir una entrada de rebot per un suau esvaït.
@keyframes kf-bounce { /* Esvaïment suau per reduir el moviment */ }
@media (prefers-reduced-motion: sense preferència) { @keyframes kf-bounce { /* Fotogrames clau de rebot originals */ } }
Ara, els usuaris amb el moviment reduït activat encara tenen una sensació d'aparença, però sense el moviment intens d'un rebot o animació elàstica. Amb els blocs de construcció al seu lloc, la següent pregunta és com fer-los part del flux de treball real. Escriure fotogrames clau flexibles és una cosa, però fer-los fiables en un projecte gran requereix algunes estratègies que vaig haver d'aprendre de la manera més difícil. Estratègies d'implementació i bones pràctiques Un cop tenim una biblioteca sòlida de fitxes de fotogrames clau, el veritable repte és com incorporar-los al treball diari.
La temptació és deixar anar tots els fotogrames clau alhora i declarar el problema resolt, però a la pràctica he trobat que els millors resultats provenen d'una adopció gradual. Comenceu amb les animacions més habituals, com ara esvair o lliscar. Es tracta de guanys fàcils que mostren un valor immediat sense requerir grans reescriptures. El nom és un altre punt que mereix atenció. Un prefix o espai de noms coherent fa que sigui obvi quines animacions són fitxes i quines són puntuals locals. També evita col·lisions accidentals i ajuda els nous membres de l'equip a reconèixer el sistema compartit d'un cop d'ull. La documentació és tan important com el codi en si. Fins i tot un breu comentari a sobre de cada testimoni de fotogrames clau pot estalviar hores d'endevinar més tard. Un desenvolupador hauria de poder obrir el fitxer de fitxes, buscar l'efecte que necessita i copiar el patró d'ús directament al seu component. La flexibilitat és el que fa que aquest enfocament valgui la pena l'esforç. En exposar propietats personalitzades sensibles, donem als equips espai per adaptar l'animació sense trencar el sistema. Al mateix temps, intenta no complicar-te massa. Proporcioneu els botons que importen i mantingueu la resta opinió. Finalment, recordeu l'accessibilitat. No totes les animacions necessiten una alternativa de moviment reduït, però moltes sí. Fer aquests ajustos abans d'hora vol dir que mai els haurem de readaptar més tard, i mostra un nivell de cura que els nostres usuaris notaran encara que mai no ho mencionin.
Segons la meva experiència, tractar els testimonis de fotogrames clau com a part del nostre flux de treball de fitxes de disseny és el que els fa que es mantinguin. Un cop al seu lloc, deixen de sentir-se com a efectes especials i passen a formar part del llenguatge de disseny, una extensió natural de com es mou i respon el producte. Embolcallant Les animacions poden ser una de les parts més alegres de la construcció d'interfícies, però sense estructura, també poden convertir-se en una de les principals fonts de frustració. En tractar els fotogrames clau com a testimonis, agafeu quelcom que sol ser desordenat i difícil de gestionar i el convertiu en un sistema clar i previsible. El valor real no és només estalviar unes quantes línies de codi. És en la confiança que quan utilitzeu un esvaïment, una llisca, un zoom o un gir, sabeu exactament com es comportarà al llarg del projecte. És en la flexibilitat que prové de les propietats personalitzades sense el caos de variacions infinites. I és en l'accessibilitat integrada a la base en lloc d'afegir-launa reflexió posterior. He vist que aquestes idees funcionen en diferents equips i bases de codi diferents, i el patró sempre és el mateix. Una vegada que els fitxes estan al seu lloc, els fotogrames clau deixen de ser una col·lecció dispersa de trucs i passen a formar part del llenguatge de disseny. Fan que el producte se senti més intencionat, més coherent i més viu. Si agafeu una cosa d'aquest article, que sigui aquesta: les animacions mereixen la mateixa cura i estructura que ja donem als colors, la tipografia i l'espaiat. Una petita inversió en fitxes de fotogrames clau paga els seus fruits cada vegada que la vostra interfície es mou.
