Nedavno sam osvježio animiranu grafiku na svojoj web stranici novom temom i grupom pionirskih likova, stavljajući u praksu mnoge tehnike koje sam podijelio u ovoj seriji. Nekoliko mojih animacija mijenja izgled kada netko s njima komunicira ili u različito doba dana.
Boje u grafici na vrhu mojih blog stranica mijenjaju se od jutra do mraka svaki dan. Zatim, tu je snježni način rada, koji dodaje hladne boje i zimsku temu, zahvaljujući sloju preklapanja i načinu miješanja.
Dok sam radio na ovome, počeo sam se pitati mogu li mi CSS relativne vrijednosti boja dati više kontrole, a istovremeno pojednostaviti proces. Napomena: u ovom vodiču usredotočit ću se na relativne vrijednosti boja i OKLCH prostor boja za tematske grafike i animacije. Ako želite zaroniti duboko u relativne boje, Ahmad Shadeed stvorio je vrhunski interaktivni vodič. Što se tiče prostora boja, gamuta i OKLCH-a, o njima je pisao naš Geoff Graham.
Ponovljena upotreba elemenata bila je ključna. Pozadine su ponovno korištene kad god je to bilo moguće, sa zumiranjem i preklapanjem koji su pomogli konstruirati nove scene iz istog umjetničkog djela. Rođena je iz nužde, ali je također potaknula razmišljanje u smislu serija, a ne pojedinačnih scena. Problem s ručnim ažuriranjem paleta boja Prijeđimo odmah na moj izazov. U Toon Titles kao što je ovaj — temeljen na epizodi Yogi Bear Showa iz 1959. “Lullabye-Bye Bear” — i općenito u mom radu, palete su ograničene na nekoliko odabranih boja.
Stvaram nijanse i nijanse od onoga što nazivam svojom "temeljnom" bojom kako bih proširio paletu bez dodavanja više nijansi.
U Sketchu radim u HSL prostoru boja, tako da ovaj proces uključuje povećanje ili smanjenje vrijednosti svjetline moje temeljne boje. Iskreno, to nije težak zadatak - ali odabir druge temeljne boje zahtijeva stvaranje potpuno novog skupa nijansi i nijansi. Raditi to ručno, uvijek iznova, brzo postaje naporno.
Spomenuo sam HSL — H (nijansa), S (zasićenost) i L (svjetlina) — prostor boja, ali to je samo jedan od nekoliko načina za opisivanje boje. RGB — R (crveno), G (zeleno), B (plavo) — vjerojatno je najpoznatiji, barem u svom Hex obliku. Tu je i LAB — L (svjetlina), A (zeleno-crveno), B (plavo-žuto) — i noviji, ali sada naširoko podržan LCH — L (svjetlina), C (boja), H (boja) — model u obliku OKLCH. Pomoću LCH-a — posebno OKLCH-a u CSS-u — mogu prilagoditi vrijednost svjetline svoje temeljne boje.
Ili mogu promijeniti njegovu boju. LCH boja i HSL zasićenost opisuju intenzitet ili bogatstvo boje, ali to čine na različite načine. LCH mi daje širi raspon i predvidljivije miješanje boja.
Također mogu promijeniti nijansu kako bih stvorio paletu boja koje dijele istu svjetlinu i zasićenost. I u HSL-u i u LCH-u spektar nijansi počinje od crvene, kreće se kroz zelenu i plavu i vraća se u crvenu.
Zašto je OKLCH promijenio način na koji razmišljam o bojama Podrška preglednika za OKLCH prostor boja sada je raširena, čak i ako alati za dizajn — uključujući Sketch — nisu sustigli korak. Srećom, to vas ne bi trebalo spriječiti da koristite OKLCH. Preglednici će za vas rado pretvoriti Hex, HSL, LAB i RGB vrijednosti u OKLCH. Možete definirati CSS prilagođeno svojstvo s temeljnom bojom u bilo kojem prostoru, uključujući Hex: /* Boja temelja */ --temelj: #5accd6;
Sve boje izvedene iz njega automatski će se pretvoriti u OKLCH: --foundation-light: oklch(from var(--foundation) [...]; } --temelj-mid: oklch(from var(--temelj) [...]; } --foundation-dark: oklch(from var(--foundation) [...]; }
Relativna boja kao sustav dizajna Zamislite relativnu boju kao da kažete: "Uzmite ovu boju, prilagodite je, a zatim mi dajte rezultat." Postoje dva načina za podešavanje boje: apsolutne promjene i proporcionalne promjene. Izgledaju slično u kodu, ali se ponašaju vrlo različito nakon što počnete mijenjati temeljne boje. Razumijevanje te razlike je ono što korištenje relativne boje može pretvoriti u sustav. /* Boja temelja */ --temelj: #5accd6;
Na primjer, vrijednost svjetline moje temeljne boje je 0,7837, dok tamnija verzija ima vrijednost 0,5837. Da bih izračunao razliku, oduzimam nižu vrijednost od veće i primjenjujem rezultat pomoću funkcije calc(): --tamni puder: oklch(od var(--temelj) kalc(l - 0,20) c h);
Za postizanje svjetlije boje, umjesto toga dodajem razliku: --temeljno svjetlo: oklch(od var(--temelj) izr. (l + 0,10) c h);
Chromaprilagodbe slijede isti proces. Kako bih smanjio intenzitet svoje temeljne boje s 0,1035 na 0,0035, oduzimam jednu vrijednost od druge: oklch(od var(--temelj) l izr. (c - 0,10) h);
Kako bih stvorio paletu nijansi, izračunavam razliku između vrijednosti tona moje osnovne boje (200) i moje nove nijanse (260): oklch(od var(--temelj) lc izračunato (h + 60));
Ti izračuni su apsolutni. Kad oduzimam fiksni iznos, zapravo govorim: "Uvijek oduzmi ovoliko." Isto vrijedi i za dodavanje fiksnih vrijednosti: kalc(c - 0,10) kalc(c + 0,10)
Naučio sam granice ovog pristupa na teži način. Kad sam se oslanjao na oduzimanje fiksnih vrijednosti boje, boje su se smanjivale prema sivoj čim sam promijenio osnovu. Paleta koja je funkcionirala za jednu boju raspala se za drugu. Množenje se ponaša drugačije. Kada umnožim chroma, govorim pregledniku: "Smanji intenzitet ove boje za određeni udio." Odnos između boja ostaje netaknut, čak i kada se temelj promijeni: kalc(c * 0,10)
Moja pravila za pomicanje, skaliranje, rotiranje
Pomakni lakoću (dodaj ili oduzmi), Razina boje (množenje), Rotirajte nijansu (dodajte ili oduzmite stupnjeve).
Ja skaliram boju jer želim da promjene intenziteta ostanu proporcionalne osnovnoj boji. Odnosi nijansi su rotacijski, tako da množenje nijansi nema smisla. Lakoća je opažajna i apsolutna — njezino umnožavanje često daje čudne rezultate.
Od jedne boje do cijele teme Relativna boja mi omogućuje da definiram temeljnu boju i iz nje generiram svaku drugu boju koja mi je potrebna - ispune, poteze, gradijentne stope, sjene. U tom trenutku boja prestaje biti paleta i počinje biti sustav. SVG ilustracije imaju tendenciju ponovnog korištenja istih nekoliko boja u ispunama, potezima i prijelazima. Relativna boja vam omogućuje da te odnose definirate jednom i svugdje ih ponovno koristite — slično kao što su animatori ponovno koristili pozadine za stvaranje novih scena.
Jednom promijenite osnovnu boju i svaka izvedena boja ažurira se automatski, bez ponovnog ručnog izračunavanja. Izvan animirane grafike, mogao bih koristiti isti pristup za definiranje boja za stanja interaktivnih elemenata kao što su gumbi i veze. Temeljna boja koju sam koristio u naslovu filma "Lullabye-Bye Bear" plava je cijan izgleda. Pozadina je radijalni gradijent između moje podloge i tamnije verzije.
Za stvaranje alternativnih verzija s potpuno različitim raspoloženjima, trebam samo promijeniti boju temelja: --temelj: #5accd6; --grad-end: var(--temelj); --grad-start: oklch(od var(--temelj) calc(l - 0,2357) calc(c * 0,833) h);
Za vezanje tih prilagođenih svojstava na moj SVG gradijent bez dupliciranja vrijednosti boja, zamijenio sam tvrdo kodirane vrijednosti zaustavne boje s ugrađenim stilovima:
Zatim, morao sam osigurati da moj Toon Text uvijek bude u kontrastu s bilo kojom bojom podloge koju odaberem. Rotacija nijanse od 180 stupnjeva proizvodi komplementarnu boju koja svakako iskače — ali može neugodno vibrirati: .text-light { ispuni: oklch(od var(--temelj) lc izračunato (h + 180)); }
Pomak od 90° proizvodi živopisnu sekundarnu boju, a da nije u potpunosti komplementarna: .text-light { ispuni: oklch(od var(--temelj) lc kalc(h - 90)); }
Moja rekreacija Quick Draw McGrawovog Toon naslova iz 1959. "El Kabong" koristi iste tehnike, ali s raznolikijom paletom. Na primjer, postoji još jedan radijalni gradijent između temeljne boje i tamnije nijanse.
Zgrada i stablo u pozadini jednostavno su različite nijanse iste temeljne boje. Za te staze trebale su mi dvije dodatne boje ispune: .bg-sredina { ispuni: oklch(od var(--temelj) kalc(l - 0,04) kalc(c * 0,91) h); }
.bg-dark { ispuni: oklch(od var(--temelj) kalc(l - 0,12) kalc(c * 0,64) h); }
Kada se temelji počnu pomicati
Do sada je sve što sam pokazao bilo statično. Čak i kada netko upotrijebi alat za odabir boje za promjenu temeljne boje, ta se promjena događa trenutno. Ali animirana grafika rijetko stoji - ključ je u imenu. Dakle, ako je boja dio sustava, nema razloga da ne može i animirati.
Da bih animirao temeljnu boju, prvo je moram podijeliti na OKLCH kanale— svjetlina, obojenost i nijansa. Ali postoji važan dodatni korak: moram registrirati te vrijednosti kao unesena prilagođena svojstva. Ali što to znači?
Prema zadanim postavkama preglednik ne zna predstavlja li vrijednost CSS prilagođenog svojstva boju, duljinu, broj ili nešto sasvim drugo. To često znači da se ne mogu glatko interpolirati tijekom animacije i skakati s jedne vrijednosti na drugu.
Registriranje prilagođenog svojstva govori pregledniku vrstu vrijednosti koju ono predstavlja i kako bi se trebalo ponašati tijekom vremena. U ovom slučaju, želim da preglednik moje kanale boja tretira kao brojeve kako bi se mogli glatko animirati.
@property --f-l {
sintaksa: "
@property --f-c {
sintaksa: "
@property --f-h {
sintaksa: "
Nakon registracije, ova prilagođena svojstva ponašaju se kao izvorni CSS. Preglednik ih može interpolirati okvir po okvir. Zatim obnavljam temeljnu boju iz tih kanala: --temelj: oklch(var(--f-l) var(--f-c) var(--f-h));
Time temeljna boja postaje animirana, baš kao i svaka druga numerička vrijednost. Evo jednostavne animacije "disanja" koja lagano mijenja svjetlost tijekom vremena: @keyframes disati { 0%, 100% { --f-l: 0,36; } 50% {-f-l: 0,46; } }
.toon-title { animacija: udahni 10 s lakoća ulaska-izlaska beskonačno; }
Budući da je svaka druga boja u ispunama, prijelazima i potezima izvedena iz --foundation, sve se one animiraju zajedno i ništa se ne mora ažurirati ručno. Jedna animirana boja, mnogo efekata Na početku ovog procesa pitao sam se mogu li CSS relativne vrijednosti boja ponuditi više mogućnosti, a istovremeno ih učiniti jednostavnijima za implementaciju. Nedavno sam dodao novu pozadinu rudnika zlata na kontakt stranicu svoje web stranice, a prva iteracija uključivala je uljane lampe koje svijetle i njišu se.
Želio sam istražiti kako animiranje relativnih CSS boja može učiniti unutrašnjost rudnika realističnijom nijansiranjem bojama iz lampi. Želio sam da utječu na svijet oko sebe, kao što to čini pravo svjetlo. Dakle, umjesto da animiram više boja, napravio sam maleni sustav osvjetljenja koji animira samo jednu boju.
Moj prvi zadatak bio je postaviti sloj preklapanja između pozadine i mojih lampi:
Upotrijebio sam mix-blend-mode: boju jer to nijansira ono što je ispod, a istovremeno čuva temeljnu svjetlinu. Kako želim da preklapanje bude vidljivo samo kada su animacije uključene, uključio sam preklapanje: .svg-mine #overlay { prikaz: nijedan; }
@media (preferira-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { prikaz: blok; neprozirnost: 0,5; } }
Prekrivač je bio na mjestu, ali još nije spojen na svjetiljke. Trebao mi je izvor svjetla. Moje lampe su jednostavne, a svaka sadrži element kruga koji sam zamutila filterom. Filtar proizvodi vrlo blago zamućenje preko cijelog kruga.
Umjesto da odvojeno animiram preklapanje i svjetiljke, animiram jedan token boje "plamena" i iz toga izvodim sve ostalo. Prvo registriram tri unesena prilagođena svojstva za OKLCH kanale:
@property --fl-l {
sintaksa: "
Animirao sam te kanale, namjerno gurajući nekoliko okvira prema narančastoj tako da se treperenje jasno čita kao svjetlo vatre:
@keyframes plamen { 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; } }
Zatim sam tu animaciju prebacio u SVG, tako da su zajedničke varijable dostupne i lampama i mom sloju:
@media (preferira-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animacija: plamen 3.6s beskonačno linearno; izolacija: izolirati;
/* Izgradite boju plamena od animiranih kanala */ --plamen: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Boja svjetiljke izvedena iz plamena */ --jezgra svjetiljke: oklch(od var(--plamen) calc(l + 0,05) calc(c * 0,70) h);
/* Nijansa sloja izvedena iz istog plamena */ --overlay-tint: oklch(from var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Konačno, primijenio sam te izvedene boje na svjetleće lampe i sloj na koji one utječu: @media (preferira-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > krug, .svg-mine[data-animations=on] #mine-lamp-2 > krug { ispuna: var(--jezgra svjetiljke); }
.svg-mine[data-animations=on] #overlay { prikaz: blok; ispuna: var(--overlay-tint); neprozirnost: 0,5; } }
Kad se plamen pomakne prema narančastom, svjetiljke se zagrijavaju, a s njima i scena. Kad se plamen ohladi, sve se skupa slegne. Najbolji dio je što ništa nije napisano ručno. Ako promijenim boju temelja ili prilagodim raspone animacije plamena, cijeli sustav osvjetljenja ažurira se istovremeno. Konačni rezultat možete vidjeti na mojoj web stranici. Ponovna upotreba, prenamjena, ponovno posjećivanje Ti Hanna-Barbera animatori bili su prisiljeni promijeniti namjenu elemenata iz nužde, ali ja ponovno koristim boje jer to čini moj rad dosljednijim i lakšim za održavanje. CSS relativne vrijednosti boja omogućuju mi sljedeće:
Definirajte jednu temeljnu boju, Opišite kako se druge boje odnose na to, Ponovno upotrijebite te odnose posvuda i Animirajte sustav promjenom jedne vrijednosti.
Relativna boja ne olakšava samo tematiziranje. Potiče način razmišljanja u kojem je boja, kao i pokret, namjerna - i gdje promjena jedne vrijednosti može transformirati cijelu scenu bez ponovnog pisanja djela ispod nje.
