Recentment he actualitzat els gràfics animats del meu lloc web amb un tema nou i un grup de personatges pioners, posant en pràctica moltes de les tècniques que he compartit en aquesta sèrie. Algunes de les meves animacions canvien d'aparença quan algú interactua amb elles o en diferents moments del dia.
Els colors del gràfic de les pàgines del meu bloc canvien cada dia des del matí fins a la nit. Després, hi ha el mode de neu, que afegeix colors freds i un tema hivernal, cortesia d'una capa de superposició i un mode de fusió.
Mentre treballava en això, vaig començar a preguntar-me si els valors de color relatius CSS podrien donar-me més control alhora que simplificaven el procés. Nota: En aquest tutorial, em centraré en els valors de color relatius i l'espai de color OKLCH per a la temàtica de gràfics i animacions. Si voleu submergir-vos en el color relatiu, Ahmad Shadeed va crear una guia interactiva excel·lent. Pel que fa als espais de color, les gammes i l'OKLCH, el nostre propi Geoff Graham va escriure sobre ells.
L'ús repetit d'elements va ser clau. Els fons es van reutilitzar sempre que era possible, amb zooms i superposicions que ajudaven a construir noves escenes a partir de la mateixa obra d'art. Va néixer de la necessitat, però també va animar a pensar en termes de sèries més que d'escenes individuals. El problema amb l'actualització manual de les paletes de colors Anem directament al meu repte. A Títols de Toon com aquest, basat en l'episodi "Lullabye-Bye Bear" del 1959, i el meu treball en general, les paletes es limiten a uns quants colors seleccionats.
Creo matisos i tints a partir del que anomeno el meu color de "fonamentació" per ampliar la paleta sense afegir més matisos.
A Sketch, treballo a l'espai de color HSL, de manera que aquest procés implica augmentar o disminuir el valor de lluminositat del meu color de base. Sincerament, no és una tasca ardua, però triar un color de base diferent requereix crear un conjunt de matisos i matisos completament nou. Fer-ho manualment, una i altra vegada, ràpidament es fa laboriós.
He esmentat l'espai de color HSL - H (tonalitat), S (saturació) i L (lluminositat), però aquesta és només una de les diverses maneres de descriure el color. RGB - R (vermell), G (verd), B (blau) - és probablement el més familiar, almenys en la seva forma hexadecimal. També hi ha LAB - L (lleugeresa), A (verd-vermell), B (blau-groc) - i el model LCH més nou, però ara àmpliament admès: L (lleugeresa), C (croma), H (matilitat) en la seva forma OKLCH. Amb LCH, específicament OKLCH en CSS, puc ajustar el valor de lluminositat del meu color de base.
O puc alterar el seu croma. La croma LCH i la saturació HSL descriuen la intensitat o la riquesa d'un color, però ho fan de diferents maneres. LCH m'ofereix un ventall més ampli i una barreja de colors més previsible.
També puc modificar la tonalitat per crear una paleta de colors que comparteixin els mateixos valors de lluminositat i croma. Tant en HSL com en LCH, l'espectre de tonalitat comença al vermell, es mou pel verd i el blau i torna al vermell.
Per què OKLCH va canviar com penso sobre el color El suport del navegador per a l'espai de color OKLCH ara està molt estès, fins i tot si les eines de disseny, inclòs Sketch, no s'han posat al dia. Afortunadament, això no us hauria d'impedir utilitzar OKLCH. Els navegadors convertiran els valors Hex, HSL, LAB i RGB en OKLCH per a vosaltres. Podeu definir una propietat personalitzada CSS amb un color de base en qualsevol espai, inclòs Hex: /* Color de base */ --fundació: #5accd6;
Qualsevol color que se'n derivi es convertirà automàticament en OKLCH: --foundation-light: oklch(de var (--fundació) [...]; } --fundació-mid: oklch(de var (--fundació) [...]; } --fundació-fosc: oklch(de var(--fundació) [...]; }
El color relatiu com a sistema de disseny Penseu en el color relatiu com dient: "Agafa aquest color, retoca'l i després dóna'm el resultat". Hi ha dues maneres d'ajustar un color: canvis absoluts i canvis proporcionals. Semblen en codi, però es comporten de manera molt diferent un cop comenceu a canviar els colors de base. Entendre aquesta diferència és el que pot convertir l'ús del color relatiu en un sistema. /* Color de base */ --fundació: #5accd6;
Per exemple, el valor de lluminositat del meu color de base és 0,7837, mentre que una versió més fosca té un valor de 0,5837. Per calcular la diferència, resta el valor més baix del més alt i aplico el resultat mitjançant una funció calc(): --fonament-fosc: oklch(de var(--fundació) calc(l - 0,20) c h);
Per aconseguir un color més clar, afegeixo la diferència: --llum-fonamentació: oklch(de var(--fundació) calc(l + 0,10) c h);
Cromaels ajustos segueixen el mateix procés. Per reduir la intensitat del meu color de base de 0,1035 a 0,0035, resta un valor de l'altre: oklch(de var(--fundació) l calc(c - 0,10) h);
Per crear una paleta de tonalitats, calculo la diferència entre el valor de tonalitat del meu color de base (200) i el meu nou to (260): oklch(de var(--fundació) l c calc(h + 60));
Aquests càlculs són absoluts. Quan resta una quantitat fixa, dic efectivament: "Resta sempre aquesta quantitat". El mateix s'aplica quan s'afegeixen valors fixos: calc(c - 0,10) calc(c + 0,10)
Vaig aprendre els límits d'aquest enfocament de la manera difícil. Quan em vaig basar en restar valors de croma fixats, els colors es van col·lapsar cap al gris tan bon punt vaig canviar la base. Una paleta que funcionava per a un color es va trencar per a un altre. La multiplicació es comporta de manera diferent. Quan multiplico la croma, li dic al navegador: "Redueix la intensitat d'aquest color en una proporció". La relació entre colors es manté intacta, fins i tot quan canvia la base: calc(c * 0,10)
Les meves regles per moure'l, escalar-lo, girar-lo
Moure la lleugeresa (sumar o restar), Escala de croma (multiplicar), Gira la tonalitat (sumar o restar graus).
Escalo la croma perquè vull que els canvis d'intensitat siguin proporcionals al color base. Les relacions de to són rotacionals, de manera que multiplicar la tonalitat no té sentit. La lleugeresa és perceptiva i absoluta; multiplicar-la sovint produeix resultats estranys.
D'un color a tot un tema El color relatiu em permet definir un color de base i generar tots els altres colors que necessito: farciments, traços, parades de degradat, ombres. En aquest moment, el color deixa de ser una paleta i comença a ser un sistema. Les il·lustracions SVG solen reutilitzar els mateixos pocs colors en farciments, traços i degradats. El color relatiu us permet definir aquestes relacions una vegada i reutilitzar-les a tot arreu, de la mateixa manera que els animadors reutilitzaven fons per crear noves escenes.
Canvieu el color de base una vegada i tots els colors derivats s'actualitzen automàticament, sense tornar a calcular res a mà. Fora dels gràfics animats, podria utilitzar aquest mateix enfocament per definir colors per als estats d'elements interactius com ara botons i enllaços. El color de base que vaig utilitzar al meu títol de Toon "Lullabye-Bye Bear" és un blau d'aspecte cian. El fons és un degradat radial entre la meva base i una versió més fosca.
Per crear versions alternatives amb estats d'ànim completament diferents, només necessito canviar el color de base: --fundació: #5accd6; --grad-end: var(--fundació); --grad-start: oklch(de var(--fundació) calc(l - 0,2357) calc(c * 0,833) h);
Per lligar aquestes propietats personalitzades al meu degradat SVG sense duplicar els valors de color, vaig substituir els valors de color de parada codificats en dur per estils en línia:
A continuació, havia d'assegurar-me que el meu Toon Text sempre contrastés amb qualsevol color de base que triés. Una rotació de to de 180 graus produeix un color complementari que sens dubte apareix, però que pot vibrar incòmode: .text-light { omplir: oklch (de var (--fundació) l c calc(h + 180)); }
Un desplaçament de 90° produeix un color secundari viu sense ser totalment complementari: .text-light { omplir: oklch (de var (--fundació) l c calc(h - 90)); }
La meva recreació del títol Toon de Quick Draw McGraw de 1959 "El Kabong" utilitza les mateixes tècniques però amb una paleta més variada. Per exemple, hi ha un altre degradat radial entre el color de base i un to més fosc.
L'edifici i l'arbre del fons són simplement diferents tons del mateix color de base. Per a aquests camins, necessitava dos colors de farciment addicionals: .bg-mid { omplir: oklch (de var (--fundació) calc(l - 0,04) calc(c * 0,91) h); }
.bg-fosc { omplir: oklch (de var (--fundació) calc(l - 0,12) calc(c * 0,64) h); }
Quan els fonaments comencen a moure's
Fins ara, tot el que he mostrat ha estat estàtic. Fins i tot quan algú utilitza un selector de color per canviar el color de base, aquest canvi es produeix a l'instant. Però els gràfics animats poques vegades es queden quiets: la pista està al nom. Per tant, si el color forma part del sistema, no hi ha cap raó perquè també no pugui animar-se.
Per animar el color de base, primer he de dividir-lo en els seus canals OKLCH- Lluminositat, croma i tonalitat. Però hi ha un pas addicional important: he de registrar aquests valors com a propietats personalitzades escrites. Però què vol dir això?
De manera predeterminada, un navegador no sap si un valor de propietat personalitzada CSS representa un color, una longitud, un nombre o una altra cosa completament. Això sovint significa que no es poden interpolar sense problemes durant l'animació i saltar d'un valor a un altre.
El registre d'una propietat personalitzada indica al navegador el tipus de valor que representa i com s'ha de comportar al llarg del temps. En aquest cas, vull que el navegador tracti els meus canals de color com a números perquè es puguin animar sense problemes.
@propietat --f-l {
sintaxi: "
@propietat --f-c {
sintaxi: "
@propietat --f-h {
sintaxi: "
Un cop registrades, aquestes propietats personalitzades es comporten com a CSS natiu. El navegador pot interpolar-los fotograma per fotograma. A continuació, reconstrueixo el color de base a partir d'aquests canals: --fundació: oklch(var(--f-l) var(--f-c) var(--f-h));
Això fa que el color de base es torni animable, igual que qualsevol altre valor numèric. Aquí hi ha una senzilla animació de "respiració" que canvia suaument la lleugeresa amb el temps: @keyframes respiren { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animació: respira 10s facilitat d'entrada-expiració infinita; }
Com que tots els altres colors de farciments, degradats i traços es deriven de --foundation, tots s'animen junts i no cal actualitzar res manualment. Un color animat, molts efectes Al començament d'aquest procés, em vaig preguntar si els valors de color relatius de CSS podrien oferir més possibilitats alhora que fer-los més senzills d'implementar. Recentment he afegit un nou fons de mina d'or a la pàgina de contacte del meu lloc web, i la primera iteració incloïa làmpades d'oli que brillaven i oscil·laven.
Volia explorar com l'animació de colors relatius CSS podria fer que l'interior de la mina fos més realista tenint-lo amb els colors dels llums. Volia que afectessin el món que els envoltava, com ho fa la llum real. Per tant, en comptes d'animar diversos colors, vaig construir un petit sistema d'il·luminació que anima només un color.
La meva primera tasca va ser col·locar una capa de superposició entre el fons i els meus llums:
Vaig utilitzar el mode de barreja: color perquè tenyeix el que hi ha a sota alhora que conserva la lluminositat subjacent. Com que només vull que la superposició sigui visible quan les animacions estiguin activades, he activat la superposició: .svg-mine #overlay { pantalla: cap; }
@media (prefers-reduced-motion: sense preferència) { .svg-mine[data-animations=on] #overlay { visualització: bloc; opacitat: 0,5; } }
La superposició estava al seu lloc, però encara no estava connectada a les làmpades. Necessitava una font de llum. Les meves làmpades són senzilles i cadascuna conté un element circular que vaig difuminar amb un filtre. El filtre produeix un desenfocament molt suau a tot el cercle.
En lloc d'animar la superposició i les làmpades per separat, animo un únic testimoni de color "flama" i en derivo tota la resta. Primer, registre tres propietats personalitzades escrites per als canals OKLCH:
@propietat --fl-l {
sintaxi: "
Vaig animar aquests canals, empenyent deliberadament uns quants fotogrames cap al taronja perquè el parpelleig es llegeixi clarament com a llum de foc:
@keyframes flame { 0%, 100% { --fl-l: 0,86; --fl-c: 0,12; --fl-h: 95; } 6% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 92; } 12% { --fl-l: 0,83; --fl-c: 0,14; --fl-h: 100; } 18% { --fl-l: 0,88; --fl-c: 0,11; --fl-h: 94; } 24% { --fl-l: 0,82; --fl-c: 0,16; --fl-h: 82; } 30% { --fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36% { --fl-l: 0,79; --fl-c: 0,17; --fl-h: 76; } 44% { --fl-l: 0,87; --fl-c: 0,12; --fl-h: 96; } 52% { --fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60% { --fl-l: 0,89; --fl-c: 0,11; --fl-h: 93; } 68% { --fl-l: 0,83; --fl-c: 0,16; --fl-h: 85; } 76% { --fl-l: 0,91; --fl-c: 0,10; --fl-h: 91; } 84% { --fl-l: 0,85; --fl-c: 0,14; --fl-h: 98; } 92% {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
A continuació, vaig adaptar aquesta animació al SVG, de manera que les variables compartides estan disponibles tant per als llums com per a la meva superposició:
@media (prefers-reduced-motion: sense preferència) { .svg-mine[data-animations=on] { animació: flama 3.6s lineal infinit; aïllament: aïllar;
/* Crea un color de flama a partir de canals animats */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Color del llum derivat de la flama */ --lamp-core: oklch(de var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Tint de superposició derivat de la mateixa flama */ --overlay-tint: oklch (de var (--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Finalment, vaig aplicar aquests colors derivats a les làmpades brillants i la superposició que afecten: @media (prefers-reduced-motion: sense preferència) { .svg-mine[data-animations=on] #mine-lamp-1 > cercle, .svg-mine[data-animations=on] #mine-lamp-2 > cercle { omplir: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { visualització: bloc; farciment: var(--overlay-tint); opacitat: 0,5; } }
Quan la flama es desplaça cap al taronja, els llums s'escalfen i l'escena s'escalfa amb ells. Quan la flama es refreda, tot s'acomoda. La millor part és que no s'escriu res manualment. Si canvio el color de base o modifico els intervals d'animació de la flama, tot el sistema d'il·luminació s'actualitza simultàniament. Podeu veure el resultat final a la meva web. Reutilitzar, reutilitzar, revisar Aquells animadors de Hanna-Barbera es van veure obligats a reutilitzar elements per necessitat, però reutilitze els colors perquè fa que el meu treball sigui més consistent i més fàcil de mantenir. Els valors de color relatius CSS em permeten:
Definiu un únic color de base, Descriu com hi relacionen altres colors, Reutilitza aquestes relacions a tot arreu i Animeu el sistema canviant un valor.
El color relatiu no només facilita la temàtica. Fomenta una manera de pensar on el color, com el moviment, és intencionat, i on canviar un valor pot transformar una escena sencera sense reescriure l'obra que hi ha sota.
