Am reîmprospătat de curând grafica animată de pe site-ul meu cu o temă nouă și un grup de personaje de pionierat, punând în practică multe dintre tehnicile pe care le-am împărtășit în această serie. Câteva dintre animațiile mele își schimbă aspectul atunci când cineva interacționează cu ele sau în diferite momente ale zilei.
Culorile din graficul de pe paginile blogului meu se schimbă de dimineața până seara în fiecare zi. Apoi, există modul zăpadă, care adaugă culori reci și o temă de iarnă, datorită unui strat de suprapunere și a unui mod de amestecare.
În timp ce lucram la asta, am început să mă întreb dacă valorile relative ale culorii CSS îmi pot oferi mai mult control, simplificând și procesul. Notă: În acest tutorial, mă voi concentra pe valorile relative ale culorilor și pe spațiul de culoare OKLCH pentru tematica grafică și animații. Dacă doriți să vă scufundați adânc în culoarea relativă, Ahmad Shadeed a creat un ghid interactiv superb. În ceea ce privește spațiile de culoare, gamele și OKLCH, Geoff Graham a scris despre ele.
Utilizarea repetată a elementelor a fost cheia. Fundalurile au fost refolosite ori de câte ori a fost posibil, cu zoom-uri și suprapuneri ajutând la construirea de noi scene din aceeași opera de artă. S-a născut din necesitate, dar a încurajat și gândirea în termeni de serie, mai degrabă decât de scene individuale. Problema cu actualizarea manuală a paletelor de culori Să trecem direct la provocarea mea. În Titluri Toon ca acesta – bazat pe episodul „Lullabye-Bye Bear” din 1959 – și munca mea în general, paletele sunt limitate la câteva culori selectate.
Creez nuanțe și nuanțe din ceea ce eu numesc culoarea mea „de bază” pentru a extinde paleta fără a adăuga mai multe nuanțe.
În Sketch, lucrez în spațiul de culoare HSL, așa că acest proces implică creșterea sau scăderea valorii de luminozitate a culorii mele de fond. Sincer, nu este o sarcină grea, dar alegerea unei culori de fond de ten diferită necesită crearea unui set complet nou de nuanțe și nuanțe. A face asta manual, din nou și din nou, devine rapid laborios.
Am menționat spațiul de culoare HSL - H (nuanță), S (saturație) și L (luminozitate), dar acesta este doar una dintre câteva moduri de a descrie culoarea. RGB - R (roșu), G (verde), B (albastru) - este probabil cel mai familiar, cel puțin în forma sa Hex. Există, de asemenea, LAB - L (luminozitate), A (verde-roșu), B (albastru-galben) - și modelul LCH mai nou, dar acum larg acceptat - L (luminozitate), C (croma), H (nuanță) - în forma sa OKLCH. Cu LCH - în special OKLCH în CSS - pot ajusta valoarea luminozității culorii mele de fond.
Sau îi pot modifica croma. Croma LCH și saturația HSL descriu ambele intensitatea sau bogăția unei culori, dar fac acest lucru în moduri diferite. LCH îmi oferă o gamă mai largă și o amestecare mai previzibilă între culori.
De asemenea, pot modifica nuanța pentru a crea o paletă de culori care împărtășesc aceleași valori de luminozitate și croma. Atât în HSL, cât și în LCH, spectrul de nuanțe începe de la roșu, trece prin verde și albastru și revine la roșu.
De ce OKLCH a schimbat modul în care mă gândesc la culoare Suportul de browser pentru spațiul de culoare OKLCH este acum larg răspândit, chiar dacă instrumentele de proiectare – inclusiv Sketch – nu au ajuns din urmă. Din fericire, asta nu ar trebui să vă împiedice să utilizați OKLCH. Browserele vor converti cu plăcere valorile Hex, HSL, LAB și RGB în OKLCH pentru dvs. Puteți defini o proprietate personalizată CSS cu o culoare de bază în orice spațiu, inclusiv Hex: /* Culoare de fond */ --fond de ten: #5accd6;
Orice culori derivate din acesta vor fi convertite automat în OKLCH: --fundație-lumină: oklch(din var(--fundație) [...]; } --fundație-mid: oklch(din var(--fundație) [...]; } --fundație-întunecată: oklch(din var(--fundație) [...]; }
Culoarea relativă ca sistem de design Gândiți-vă la culoarea relativă ca spunând: „Ia această culoare, modifică-o, apoi dă-mi rezultatul”. Există două moduri de a ajusta o culoare: modificări absolute și modificări proporționale. Ele arată similar în cod, dar se comportă foarte diferit odată ce începeți să schimbați culorile de fond. Înțelegerea acestei diferențe este ceea ce se poate transforma folosind culoarea relativă într-un sistem. /* Culoare de fond */ --fond de ten: #5accd6;
De exemplu, valoarea luminozității culorii mele de fond este de 0,7837, în timp ce o versiune mai închisă are o valoare de 0,5837. Pentru a calcula diferența, scad valoarea inferioară din cea mai mare și aplic rezultatul folosind o funcție calc(): --fond de ten-întunecat: oklch(din var(--fundatie) calc(l - 0,20) c h);
Pentru a obține o culoare mai deschisă, adaug diferența: --lumina-fond de ten: oklch(din var(--fundatie) calc(l + 0,10) c h);
Chromaajustările urmează același proces. Pentru a reduce intensitatea culorii fondului de ten de la 0,1035 la 0,0035, scad o valoare din cealaltă: oklch(din var(--fundatie) 1 calc(c - 0,10) h);
Pentru a crea o paletă de nuanțe, calculez diferența dintre valoarea nuanței culorii mele de fond (200) și noua mea nuanță (260): oklch(din var(--fundatie) lc calc(h + 60));
Aceste calcule sunt absolute. Când scad o sumă fixă, spun efectiv: „Scădeți întotdeauna atât de mult”. Același lucru se aplică la adăugarea valorilor fixe: calc(c - 0,10) calc(c + 0,10)
Am învățat limitele acestei abordări pe calea grea. Când m-am bazat pe scăderea valorilor cromatice fixe, culorile s-au prăbușit spre gri de îndată ce am schimbat fondul de ten. O paletă care a funcționat pentru o culoare s-a destramat pentru alta. Înmulțirea se comportă diferit. Când înmulțesc croma, îi spun browserului: „Reduceți intensitatea acestei culori cu o proporție”. Relația dintre culori rămâne intactă, chiar și atunci când fondul de ten se schimbă: calc(c * 0,10)
Regulile mele pentru mutarea, scalarea, rotirea
Mutați luminozitatea (adăugați sau scădeți), Scala cromatică (înmulțire), Rotiți nuanța (adăugați sau scădeți grade).
Scalez croma pentru că vreau ca schimbările de intensitate să rămână proporționale cu culoarea de bază. Relațiile de nuanță sunt de rotație, așa că înmulțirea nuanței nu are sens. Lejeritatea este perceptivă și absolută - înmulțirea ei produce adesea rezultate ciudate.
De la o culoare la o temă întreagă Culoarea relativă îmi permite să definesc o culoare de bază și să generez orice altă culoare de care am nevoie - umpleri, linii, opriri de gradient, umbre - din ea. În acel moment, culoarea încetează să mai fie o paletă și începe să fie un sistem. Ilustrațiile SVG tind să refolosească aceleași câteva culori pentru umpleri, linii și degrade. Culoarea relativă vă permite să definiți acele relații o dată și să le refolosiți peste tot - așa cum animatorii au reutilizat fundalurile pentru a crea scene noi.
Schimbați culoarea fondului de ten o dată și fiecare culoare derivată se actualizează automat, fără a recalcula nimic manual. În afara graficelor animate, aș putea folosi aceeași abordare pentru a defini culorile pentru stările elementelor interactive, cum ar fi butoanele și linkurile. Culoarea de fond pe care am folosit-o în titlul meu „Lullabye-Bye Bear” Toon este un albastru cu aspect de cyan. Fundalul este un gradient radial între fondul de ten și o versiune mai întunecată.
Pentru a crea versiuni alternative cu stări complet diferite, trebuie doar să schimb culoarea fondului de ten: --fond de ten: #5accd6; --grad-end: var(--fundatie); --grad-start: oklch(din var(--fundație) calc(l - 0,2357) calc(c * 0,833) h);
Pentru a lega acele proprietăți personalizate la gradientul meu SVG fără a duplica valorile de culoare, am înlocuit valorile stop-color codificate cu stiluri inline:
În continuare, trebuia să mă asigur că textul meu Toon contrastează întotdeauna cu orice culoare de fond de ten aleg. O rotație a nuanței de 180 de grade produce o culoare complementară care cu siguranță iese în evidență – dar poate vibra inconfortabil: .text-light { umplere: oklch(din var(--fundatie) lc calc(h + 180)); }
O deplasare de 90° produce o culoare secundară vie, fără a fi complet complementară: .text-light { umplere: oklch(din var(--fundatie) lc calc(h - 90)); }
Recrearea mea a titlului Toon din 1959 al lui Quick Draw McGraw „El Kabong“ folosește aceleași tehnici, dar cu o paletă mai variată. De exemplu, există un alt gradient radial între culoarea fondului de ten și o nuanță mai închisă.
Clădirea și copacul din fundal sunt pur și simplu nuanțe diferite ale aceleiași culori de fundație. Pentru acele căi, aveam nevoie de două culori de umplere suplimentare: .bg-mid { umplere: oklch(din var(--fundatie) calc(l - 0,04) calc(c * 0,91) h); }
.bg-dark { umplere: oklch(din var(--fundatie) calc(l - 0,12) calc(c * 0,64) h); }
Când Fundațiile Încep să Se Miște
Până acum, tot ce am arătat a fost static. Chiar și atunci când cineva folosește un selector de culoare pentru a schimba culoarea fondului de ten, schimbarea are loc instantaneu. Dar grafica animată rareori sta pe loc - indiciul se află în nume. Deci, dacă culoarea face parte din sistem, nu există niciun motiv pentru care să nu poată anima.
Pentru a anima culoarea fondului de ten, trebuie mai întâi să o împart în canalele sale OKLCH— luminozitate, croma și nuanță. Dar există un pas important în plus: trebuie să înregistrez acele valori ca proprietăți personalizate tastate. Dar ce înseamnă asta?
În mod implicit, un browser nu știe dacă o valoare de proprietate personalizată CSS reprezintă o culoare, lungime, număr sau cu totul altceva. Asta înseamnă adesea că nu pot fi interpolate fără probleme în timpul animației și să sară de la o valoare la alta.
Înregistrarea unei proprietăți personalizate spune browserului tipul de valoare pe care o reprezintă și cum ar trebui să se comporte în timp. În acest caz, vreau ca browserul să trateze canalele mele de culoare ca numere, astfel încât să poată fi animate fără probleme.
@proprietate --f-l {
sintaxă: „
@proprietate --f-c {
sintaxă: „
@proprietate --f-h {
sintaxă: „
Odată înregistrate, aceste proprietăți personalizate se comportă ca CSS nativ. Browserul le poate interpola cadru cu cadru. Apoi reconstruiesc culoarea de fundație din acele canale: --fundatie: oklch(var(--f-l) var(--f-c) var(--f-h));
Acest lucru face ca culoarea de bază să devină animabilă, la fel ca orice altă valoare numerică. Iată o animație simplă de „respirație” care schimbă ușor luminozitatea în timp: @keyframes respiră { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animație: respirație 10s ease-in-out infinit; }
Deoarece orice altă culoare din umpleri, degrade și linii sunt derivate din --foundation, toate se animă împreună și nimic nu trebuie actualizat manual. O culoare animată, multe efecte La începutul acestui proces, m-am întrebat dacă valorile relative ale culorii CSS ar putea oferi mai multe posibilități, făcându-le și mai ușor de implementat. Am adăugat recent un nou fundal pentru mine de aur pe pagina de contact a site-ului meu, iar prima iterație a inclus lămpi cu ulei care strălucesc și se balansează.
Am vrut să explorez modul în care animarea culorilor relative CSS ar putea face interiorul minei mai realist, colorându-l cu culorile de la lămpi. Am vrut ca ele să afecteze lumea din jurul lor, așa cum o face lumina reală. Deci, în loc să animez mai multe culori, am construit un sistem de iluminat minuscul care animează o singură culoare.
Prima mea sarcină a fost să plasez un strat de suprapunere între fundal și lămpile mele:
Am folosit modul mix-blend-mode: culoare pentru că nuanțează ceea ce se află dedesubt, păstrând în același timp luminanța de bază. Deoarece vreau ca suprapunerea să fie vizibilă numai atunci când animațiile sunt activate, am activat suprapunerea: .svg-mine #overlay { afișaj: niciunul; }
@media (preferă-mișcare redusă: fără preferințe) { .svg-mine[data-animations=on] #overlay { afisare: bloc; opacitate: 0,5; } }
Suprapunerea era la locul ei, dar nu era încă conectată la lămpi. Aveam nevoie de o sursă de lumină. Lămpile mele sunt simple și fiecare conține un element cerc pe care l-am estompat cu un filtru. Filtrul produce o estompare foarte fină pe întregul cerc.
În loc să animez suprapunerea și lămpile separat, animez un singur simbol de culoare „flacără” și obțin orice altceva din asta. În primul rând, înregistrez trei proprietăți personalizate tastate pentru canalele OKLCH:
@property --fl-l {
sintaxă: „
Am animat acele canale, împingând în mod deliberat câteva cadre spre portocaliu, astfel încât pâlpâirea să citească clar ca lumina focului:
@keyframes flacără { 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; } }
Apoi am adaptat acea animație la SVG, astfel încât variabilele partajate sunt disponibile atât pentru lămpi, cât și pentru suprapunerea mea:
@media (preferă-mișcare redusă: fără preferințe) { .svg-mine[data-animations=on] { animație: flacără 3.6s liniar infinit; izolare: izolare;
/* Creați o culoare de flacără din canalele animate */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Culoarea lămpii derivată din flacără */ --lamp-core: oklch(din var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Nuanță de suprapunere derivată din aceeași flacără */ --overlay-tint: oklch(din var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
În cele din urmă, am aplicat acele culori derivate lămpilor strălucitoare și suprapunerii pe care le afectează: @media (preferă-mișcare redusă: fără preferințe) { .svg-mine[data-animations=on] #mine-lamp-1 > cerc, .svg-mine[data-animations=on] #mine-lamp-2 > cerc { umplere: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { afisare: bloc; umplere: var(--overlay-tint); opacitate: 0,5; } }
Când flacăra se schimbă spre portocaliu, lămpile se încălzesc, iar scena se încălzește odată cu ele. Când flacăra se răcește, totul se stabilește împreună. Cea mai bună parte este că nimic nu este scris manual. Dacă schimb culoarea fundației sau modific intervalele de animație a flăcării, întregul sistem de iluminare se actualizează simultan. Rezultatul final îl puteți vedea pe site-ul meu. Reutilizare, reutilizare, revizuită Acei animatori Hanna-Barbera au fost forțați să refolosească elemente din necesitate, dar reutilizam culorile pentru că îmi face munca mai consistentă și mai ușor de întreținut. Valorile relative de culoare CSS îmi permit să:
Definiți o singură culoare de fond de ten, Descrieți modul în care alte culori se leagă de el, Reutilizați acele relații peste tot și Animați sistemul prin schimbarea unei valori.
Culoarea relativă nu face doar tematica mai ușoară. Încurajează un mod de gândire în care culoarea, cum ar fi mișcarea, este intenționată - și în care schimbarea unei valori poate transforma o întreagă scenă fără a rescrie lucrarea de sub ea.
