Pred kratkim sem osvežil animirano grafiko na svojem spletnem mestu z novo temo in skupino pionirskih likov, s čimer sem v praksi uporabil veliko tehnik, ki sem jih delil v tej seriji. Nekaj mojih animacij spremeni videz, ko nekdo komunicira z njimi ali ob različnih urah dneva.
Barve grafike na straneh mojega bloga se vsak dan spreminjajo od jutra do večera. Potem je tu še snežni način, ki doda hladne barve in zimsko temo, zahvaljujoč prekrivni plasti in načinu mešanja.
Ko sem delal na tem, sem se začel spraševati, ali bi mi relativne barvne vrednosti CSS lahko dale več nadzora in hkrati poenostavile postopek. Opomba: V tej vadnici se bom osredotočil na relativne barvne vrednosti in barvni prostor OKLCH za tematske grafike in animacije. Če se želite poglobiti v relativno barvo, je Ahmad Shadeed ustvaril odličen interaktivni vodnik. Glede barvnih prostorov, lestvic in OKLCH je o njih pisal naš Geoff Graham.
Ponavljajoča se uporaba elementov je bila ključna. Ozadja so bila ponovno uporabljena, kadar koli je bilo to mogoče, s povečavami in prekrivnimi elementi, ki so pomagali sestaviti nove prizore iz istega umetniškega dela. Nastala je iz nuje, hkrati pa je spodbudila razmišljanje v smislu serije in ne posameznih prizorov. Težava pri ročnem posodabljanju barvnih palet Pojdimo naravnost k mojemu izzivu. V Toon Titles, kot je ta - ki temelji na epizodi Yogi Bear Showa iz leta 1959 "Lullabye-Bye Bear" - in mojem delu na splošno, so palete omejene na nekaj izbranih barv.
Ustvarjam odtenke in nianse iz tistega, kar imenujem moja "temeljna" barva, da razširim paleto brez dodajanja več odtenkov.
V programu Sketch delam v barvnem prostoru HSL, zato ta postopek vključuje povečanje ali zmanjšanje vrednosti svetlosti moje osnovne barve. Iskreno povedano, to ni težka naloga - a izbira druge barve podlage zahteva ustvarjanje povsem novega nabora odtenkov in nians. Početi to ročno, znova in znova, hitro postane naporno.
Omenil sem HSL — H (odtenek), S (nasičenost) in L (svetlost) — barvni prostor, vendar je to le eden od več načinov za opisovanje barve. RGB - R (rdeča), G (zelena), B (modra) - je verjetno najbolj poznana, vsaj v svoji šestnajstiški obliki. Obstaja tudi model LAB — L (svetloba), A (zeleno-rdeča), B (modro-rumena) — in novejši, a zdaj široko podprt model LCH — L (svetlost), C (barvnost), H (odtenek) v obliki OKLCH. Z LCH - natančneje OKLCH v CSS - lahko prilagodim vrednost svetlosti svoje osnovne barve.
Lahko pa spremenim barvo. Barvnost LCH in nasičenost HSL opisujeta intenzivnost ali bogastvo barve, vendar to počneta na različne načine. LCH mi daje širši razpon in bolj predvidljivo mešanje barv.
Prav tako lahko spremenim odtenek, da ustvarim paleto barv, ki imajo enake vrednosti svetlosti in barvnosti. Pri HSL in LCH se barvni spekter začne z rdečo, se premika skozi zeleno in modro ter se vrne v rdečo.
Zakaj je OKLCH spremenil moje razmišljanje o barvah Podpora brskalnika za barvni prostor OKLCH je zdaj zelo razširjena, čeprav orodja za oblikovanje – vključno s programom Sketch – niso dohitela. Na srečo vam to ne bi smelo preprečiti uporabe OKLCH. Brskalniki bodo namesto vas z veseljem pretvorili vrednosti Hex, HSL, LAB in RGB v OKLCH. Lastnost CSS po meri z osnovno barvo lahko definirate v katerem koli prostoru, vključno s šestnajstiškim: /* Barva temelja */ --temelj: #5accd6;
Vse barve, izpeljane iz nje, bodo samodejno pretvorjene v OKLCH: --foundation-light: oklch(iz var(--foundation) [...]; } --foundation-mid: oklch(iz var(--foundation) [...]; } --foundation-dark: oklch(iz var(--foundation) [...]; }
Relativna barva kot sistem oblikovanja Pomislite na relativno barvo, kot da pravite: "Vzemite to barvo, jo prilagodite, nato mi dajte rezultat." Obstajata dva načina prilagajanja barve: absolutne spremembe in proporcionalne spremembe. V kodi so videti podobni, vendar se obnašajo zelo različno, ko začnete zamenjati osnovne barve. Razumevanje te razlike je tisto, kar lahko uporabo relativne barve spremeni v sistem. /* Barva temelja */ --temelj: #5accd6;
Na primer, vrednost svetlosti moje osnovne barve je 0,7837, medtem ko ima temnejša različica vrednost 0,5837. Za izračun razlike odštejem nižjo vrednost od višje in uporabim rezultat s funkcijo calc(): --temna podlaga: oklch(iz var(--fundacija) calc(l - 0,20) c h);
Za svetlejšo barvo dodam razliko: --temeljna luč: oklch(iz var(--fundacija) calc(l + 0,10) c h);
Chromaprilagoditve sledijo istemu postopku. Da zmanjšam intenzivnost svoje temeljne barve z 0,1035 na 0,0035, odštejem eno vrednost od druge: oklch(iz var(--fundacija) l izč. (c - 0,10) h);
Za ustvarjanje palete odtenkov izračunam razliko med vrednostjo odtenka moje osnovne barve (200) in mojim novim odtenkom (260): oklch(iz var(--fundacija) l c izč. (h + 60));
Ti izračuni so absolutni. Ko odštejem fiksen znesek, dejansko rečem: "Vedno odštej toliko." Enako velja pri dodajanju fiksnih vrednosti: izračun (c - 0,10) izračun (c + 0,10)
Na težji način sem spoznal meje tega pristopa. Ko sem se zanašal na odštevanje fiksnih barvnih vrednosti, so se barve strnile proti sivi, takoj ko sem spremenil osnovo. Paleta, ki je delovala pri eni barvi, je pri drugi razpadla. Množenje se obnaša drugače. Ko pomnožim barvnost, rečem brskalniku: "Zmanjšajte intenzivnost te barve za določen delež." Razmerje med barvami ostane nedotaknjeno, tudi ko se spremeni osnova: izračun (c * 0,10)
Moja pravila Move It, Scale It, Rotate It
Premakni lahkotnost (dodaj ali odštej), Barvnost lestvice (množenje), Zasukaj odtenek (dodaj ali odštej stopinje).
Barvnost spreminjam, ker želim, da spremembe intenzivnosti ostanejo sorazmerne z osnovno barvo. Razmerja odtenkov so rotacijska, zato množenje odtenkov nima smisla. Lahkotnost je zaznavna in absolutna - njeno pomnoževanje pogosto povzroči čudne rezultate.
Od ene barve do celotne teme Relativna barva mi omogoča, da določim osnovno barvo in iz nje ustvarim vse druge barve, ki jih potrebujem - polnila, poteze, gradientne ustave, sence. Takrat barva preneha biti paleta in začne biti sistem. Ilustracije SVG običajno uporabljajo nekaj istih barv med polnili, potezami in prelivi. Relativna barva vam omogoča, da ta razmerja določite enkrat in jih znova uporabite povsod – podobno kot so animatorji znova uporabili ozadja za ustvarjanje novih prizorov.
Enkrat spremenite osnovno barvo in vsaka izpeljana barva se bo samodejno posodobila, ne da bi karkoli ročno ponovno izračunali. Zunaj animirane grafike bi lahko isti pristop uporabil za definiranje barv za stanja interaktivnih elementov, kot so gumbi in povezave. Osnovna barva, ki sem jo uporabil v svojem naslovu "Lullabye-Bye Bear" Toon Title, je cian modra. Ozadje je radialni preliv med mojo podlago in temnejšo različico.
Če želite ustvariti alternativne različice s popolnoma drugačnimi razpoloženji, moram spremeniti le barvo podlage: --temelj: #5accd6; --grad-end: var(--fundacija); --grad-start: oklch(od var(--fundation) calc(l - 0,2357) calc(c * 0,833) h);
Da bi te lastnosti po meri povezal s svojim gradientom SVG brez podvajanja barvnih vrednosti, sem zamenjal trdo kodirane vrednosti končnih barv z vgrajenimi slogi:
Nato sem moral zagotoviti, da je moj Toon Text vedno v kontrastu s katero koli barvo podlage, ki jo izberem. Zasuk barvnega odtenka za 180 stopinj ustvari komplementarno barvo, ki zagotovo izstopi, vendar lahko neprijetno vibrira: .text-light { izpolni: oklch(od var(--fundacija) l c izč. (h + 180)); }
Premik za 90° ustvari živo sekundarno barvo, ne da bi bila popolnoma komplementarna: .text-light { izpolni: oklch(od var(--fundacija) l c izč. (h - 90)); }
Moja poustvaritev naslova Toon Quick Draw McGrawa iz leta 1959 »El Kabong« uporablja enake tehnike, vendar z bolj raznoliko paleto. Na primer, obstaja še en radialni preliv med osnovno barvo in temnejšim odtenkom.
Stavba in drevo v ozadju sta preprosto različnih odtenkov iste osnovne barve. Za te poti sem potreboval dve dodatni barvi polnila: .bg-mid { izpolni: oklch(od var(--fundacija) calc(l - 0,04) calc(c * 0,91) h); }
.bg-temno { izpolni: oklch(od var(--fundacija) calc(l - 0,12) calc(c * 0,64) h); }
Ko se temelji začnejo premikati Doslej je bilo vse, kar sem pokazal, statično. Tudi ko nekdo z izbirnikom barv spremeni barvo podlage, se ta sprememba zgodi takoj. Toda animirana grafika le redko miruje - namig je v imenu. Torej, če je barva del sistema, ni razloga, da ne bi mogla tudi animirati. Za animacijo osnovne barve jo moram najprej razdeliti na kanale OKLCH— svetlost, barvnost in barvni odtenek. Obstaja pa pomemben dodaten korak: te vrednosti moram registrirati kot vnesene lastnosti po meri. Toda kaj to pomeni? Brskalnik privzeto ne ve, ali vrednost lastnosti po meri CSS predstavlja barvo, dolžino, številko ali kaj povsem drugega. To pogosto pomeni, da jih med animacijo ni mogoče gladko interpolirati in skakati z ene vrednosti na drugo. Registracija lastnosti po meri pove brskalniku vrsto vrednosti, ki jo predstavlja in kako naj se obnaša skozi čas. V tem primeru želim, da brskalnik moje barvne kanale obravnava kot številke, da jih je mogoče gladko animirati. @lastnost --f-l { sintaksa: "<število>"; deduje: true; začetna vrednost: 0,40; }
@lastnost --f-c { sintaksa: "<število>"; deduje: true; začetna vrednost: 0,11; }
@lastnost --f-h { sintaksa: "<število>"; deduje: true; začetna vrednost: 305; }
Ko so enkrat registrirane, se te lastnosti po meri obnašajo kot izvorni CSS. Brskalnik jih lahko interpolira okvir za okvirjem. Nato obnovim osnovno barvo iz teh kanalov: --fundacija: oklch(var(--f-l) var(--f-c) var(--f-h));
Tako osnovna barva postane animirana, tako kot katera koli druga številska vrednost. Tu je preprosta "dihajoča" animacija, ki sčasoma nežno spreminja lahkotnost: @keyframes diha { 0 %, 100 % { --f-l: 0,36; } 50 % { --f-l: 0,46; } }
.toon-title { animacija: dihanje 10s enostavnost v-izhod neskončno; }
Ker vse druge barve v polnilih, prelivih in potezah izhajajo iz --foundation, se vse animirajo skupaj in ničesar ni treba posodobiti ročno. Ena animirana barva, veliko učinkov Na začetku tega procesa sem se spraševal, ali bi relativne barvne vrednosti CSS lahko ponudile več možnosti, hkrati pa jih naredile enostavnejše za implementacijo. Pred kratkim sem na kontaktno stran svojega spletnega mesta dodal novo ozadje rudnika zlata, prva ponovitev pa je vključevala oljenke, ki svetijo in nihajo.
Želel sem raziskati, kako lahko animiranje relativnih barv CSS naredi notranjost rudnika bolj realistično z niansiranjem z barvami iz svetilk. Želel sem, da vplivajo na svet okoli sebe, tako kot prava svetloba. Zato sem namesto animiranja več barv zgradil majhen sistem osvetlitve, ki animira samo eno barvo.
Moja prva naloga je bila vstaviti prekrivni sloj med ozadje in moje svetilke:
Uporabil sem mix-blend-mode: color, ker obarva tisto, kar je pod njim, hkrati pa ohrani osnovno svetilnost. Ker želim, da je prekrivni element viden le, ko so vklopljene animacije, sem prekrivni element omogočil: .svg-mine #overlay { zaslon: brez; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { zaslon: blok; motnost: 0,5; } }
Prevleka je bila nameščena, vendar še ni bila povezana s svetilkami. Potreboval sem vir svetlobe. Moje svetilke so preproste in vsaka vsebuje element kroga, ki sem ga zabrisala s filtrom. Filter ustvari zelo mehko zameglitev celotnega kroga.
Namesto da bi ločeno animiral prekrivanje in svetilke, animiram en sam barvni žeton "plamena" in iz tega izpeljem vse ostalo. Najprej registriram tri vnesene lastnosti po meri za kanale OKLCH: @lastnost --fl-l { sintaksa: "<število>"; deduje: true; začetna vrednost: 0,86; } @lastnost --fl-c { sintaksa: "<število>"; deduje: true; začetna vrednost: 0,12; } @lastnost --fl-h { sintaksa: "<število>"; deduje: true; začetna vrednost: 95; }
Te kanale sem animiral in namerno potisnil nekaj sličic proti oranžni barvi, tako da se utripanje jasno bere kot svetloba ognja:
@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; } }
Nato sem to animacijo razširil na SVG, tako da so spremenljivke v skupni rabi na voljo tako za svetilke kot za mojo prosojnico:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animacija: plamen 3,6s neskončno linearno; izolacija: izolirati;
/* Sestavi barvo plamena iz animiranih kanalov */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Barva svetilke izhaja iz plamena */ --jedro svetilke: oklch(from var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Prekrivni odtenek izhaja iz istega plamena */ --overlay-tint: oklch(od var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Nazadnje sem te izpeljane barve uporabil za žareče luči in prekrivanje, na katerega vplivajo: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > krog, .svg-mine[data-animations=on] #mine-lamp-2 > krog { izpolni: var(--jedro svetilke); }
.svg-mine[data-animations=on] #overlay { zaslon: blok; fill: var(--overlay-tint); motnost: 0,5; } }
Ko se plamen premakne proti oranžni barvi, se svetilke segrejejo in prizorišče se segreje z njimi. Ko se plamen ohladi, se vse skupaj usede. Najboljše pri tem je, da nič ni napisano ročno. Če spremenim osnovno barvo ali prilagodim obsege animacije plamena, se celoten sistem osvetlitve posodobi hkrati. Končni rezultat si lahko ogledate na moji spletni strani. Ponovna uporaba, ponovna uporaba, ponovni ogled Tisti Hanna-Barbera animatorji so bili prisiljeni spremeniti namen elementov zaradi nuje, vendar jaz ponovno uporabljam barve, ker je moje delo bolj dosledno in lažje za vzdrževanje. Relativne barvne vrednosti CSS mi omogočajo:
Določite eno samo temeljno barvo, Opišite, kako se z njim povezujejo druge barve, Ponovno uporabite te odnose povsod in Animirajte sistem tako, da spremenite eno vrednost.
Relativna barva ne olajša le tematizacije. Spodbuja način razmišljanja, kjer je barva, tako kot gibanje, namerna - in kjer lahko sprememba ene vrednosti spremeni celotno sceno, ne da bi prepisali delo pod njo.
