Neseniai savo svetainėje atnaujinau animuotą grafiką nauja tema ir novatoriškų personažų grupe, praktiškai pritaikydamas daugybę metodų, kuriais pasidalinau šioje serijoje. Kai kurios mano animacijos keičia išvaizdą, kai kas nors su jais bendrauja arba skirtingu paros metu.
Mano tinklaraščio puslapių viršuje esančios grafikos spalvos keičiasi kiekvieną dieną nuo ryto iki vakaro. Tada yra sniego režimas, kuris suteikia vėsių spalvų ir žiemiškos temos, naudojant perdangos sluoksnį ir maišymo režimą.
Dirbdamas su tuo pradėjau domėtis, ar santykinės CSS spalvų reikšmės gali suteikti man daugiau kontrolės ir supaprastinti procesą. Pastaba: Šiame vadove daugiausia dėmesio skirsiu santykinėms spalvų reikšmėms ir OKLCH spalvų erdvei, skirtai grafikos ir animacijos tematikai. Jei norite pasinerti į santykinę spalvą, Ahmadas Shadeedas sukūrė puikų interaktyvų vadovą. Kalbant apie spalvų erdves, gamas ir OKLCH, apie juos rašė mūsų pačių Geoffas Grahamas.
Svarbiausia buvo pakartotinis elementų naudojimas. Kai tik įmanoma, fonai buvo naudojami pakartotinai, priartinant ir perdangose, padedant sukurti naujas scenas iš to paties meno kūrinio. Tai gimė iš būtinybės, bet taip pat skatino galvoti apie serialus, o ne atskiras scenas. Problema, susijusi su rankiniu spalvų palečių atnaujinimu Pereikime tiesiai prie mano iššūkio. Tokiuose Toon pavadinimuose kaip šis – remiantis 1959 m. Yogi Bear Show epizodu „Lullabye-Bye Bear“ – ir apskritai mano darbuose paletės apsiriboja keliomis pasirinktomis spalvomis.
Kuriu atspalvius ir atspalvius iš tos, kurią vadinu savo „pagrindo“ spalva, kad praplėsčiau paletę nepridedant daugiau atspalvių.
„Sketch“ dirbu HSL spalvų erdvėje, todėl šis procesas apima mano pagrindo spalvos šviesumo vertės padidinimą arba sumažinimą. Sąžiningai, tai nėra sudėtinga užduotis, tačiau norint pasirinkti kitą pagrindo spalvą, reikia sukurti visiškai naują atspalvių ir atspalvių rinkinį. Tai daryti rankiniu būdu vėl ir vėl greitai tampa sudėtinga.
Paminėjau HSL – H (atspalvis), S (sotumas) ir L (šviesumas) – spalvų erdvę, bet tai tik vienas iš kelių spalvų apibūdinimo būdų. RGB – R (raudona), G (žalia), B (mėlyna) – turbūt labiausiai pažįstamas, bent jau šešioliktaine forma. Taip pat yra LAB – L (šviesumas), A (žalia – raudona), B (mėlyna – geltona) – ir naujesnis, bet dabar plačiai palaikomas LCH – L (šviesumas), C (chroma), H (atspalvis) – modelis OKLCH forma. Naudodamas LCH – konkrečiai OKLCH CSS – galiu reguliuoti savo pagrindo spalvos šviesumo vertę.
Arba galiu pakeisti jo chromą. LCH chroma ir HSL sodrumas apibūdina spalvos intensyvumą arba sodrumą, tačiau jie tai daro skirtingai. LCH suteikia man platesnį diapazoną ir labiau nuspėjamą spalvų maišymą.
Taip pat galiu pakeisti atspalvį, kad sukurčiau spalvų paletę, kuriai būdingos tos pačios šviesumo ir spalvingumo reikšmės. Tiek HSL, tiek LCH atspalvių spektras prasideda nuo raudonos spalvos, pereina per žalią ir mėlyną spalvą ir grįžta į raudoną.
Kodėl OKLCH pakeitė tai, kaip aš galvoju apie spalvą Naršyklės palaikymas OKLCH spalvų erdvei dabar plačiai paplitęs, net jei projektavimo įrankiai, įskaitant Sketch, nepasivijo. Laimei, tai neturėtų trukdyti naudoti OKLCH. Naršyklės su malonumu konvertuos Hex, HSL, LAB ir RGB reikšmes į OKLCH už jus. Galite apibrėžti pasirinktinę CSS ypatybę su pagrindo spalva bet kurioje erdvėje, įskaitant šešioliktainę: /* Pagrindo spalva */ --pamatai: #5accd6;
Visos iš jo gautos spalvos bus automatiškai konvertuojamos į OKLCH: --foundation-light: oklch(iš var(--foundation) [...]; } --foundation-mid: oklch(iš var(--foundation) [...]; } --foundation-dark: oklch(iš var(--foundation) [...]; }
Santykinė spalva kaip dizaino sistema Pagalvokite apie santykinę spalvą sakydami: „Paimkite šią spalvą, pakoreguokite ją, tada pateikite rezultatą“. Yra du būdai reguliuoti spalvą: absoliutūs ir proporcingi pokyčiai. Jie atrodo panašiai pagal kodą, bet elgiasi labai skirtingai, kai pradedate keisti pagrindo spalvas. Šio skirtumo supratimas yra tai, kas santykinę spalvą gali paversti sistema. /* Pagrindo spalva */ --pamatai: #5accd6;
Pavyzdžiui, mano pagrindo spalvos šviesumo reikšmė yra 0,7837, o tamsesnės versijos – 0,5837. Norėdami apskaičiuoti skirtumą, atėmiau mažesnę reikšmę iš didesnės ir taikau rezultatą naudodamas calc() funkciją: --pamatai-tamsus: oklch(iš var(--fondas) skaičiuot(l - 0,20) c h);
Norėdami gauti šviesesnę spalvą, pridedu skirtumą: --pagrindo šviesa: oklch(iš var(--fondas) skaičiuot(l + 0,10) c h);
Chromakoregavimas vyksta tuo pačiu procesu. Kad sumažinčiau pagrindo spalvos intensyvumą nuo 0,1035 iki 0,0035, vieną reikšmę atimu iš kitos: oklch(iš var(--fondas) l skaičiuot(c - 0,10) h);
Norėdami sukurti atspalvių paletę, apskaičiuoju skirtumą tarp pagrindo spalvos atspalvio vertės (200) ir naujo atspalvio (260): oklch(iš var(--fondas) l c skaičiuot(h + 60));
Tie skaičiavimai yra absoliutūs. Kai atimu fiksuotą sumą, veiksmingai sakau: „Visada atimk tiek“. Tas pats pasakytina ir pridedant fiksuotas vertes: skaičiuoti (c – 0,10) calc (c + 0,10)
Šio požiūrio ribas išmokau sunkiai. Kai pasikliaudavau fiksuotų spalvų reikšmių atėmimu, spalvos subyrėjo link pilkos spalvos, kai tik pakeičiau pagrindą. Vienai spalvai tinkanti paletė subyrėjo kitai. Daugyba elgiasi skirtingai. Kai padauginu chromą, sakau naršyklei: „Sumažinkite šios spalvos intensyvumą dalimi“. Ryšys tarp spalvų išlieka nepakitęs, net kai pasikeičia pagrindas: calc (c * 0,10)
Mano judėjimo, mastelio, pasukimo taisyklės
Perkelti lengvumą (pridėti arba atimti), Mastelio chroma (padauginti), Pasukti atspalvį (pridėti arba atimti laipsnius).
Keičiu spalvų mastelį, nes noriu, kad intensyvumo pokyčiai išliktų proporcingi bazinei spalvai. Atspalvių santykiai yra rotaciniai, todėl atspalvių dauginimas nėra prasmės. Lengvumas yra suvokiamas ir absoliutus – jo padauginimas dažnai duoda keistų rezultatų.
Nuo vienos spalvos iki visos temos Santykinė spalva leidžia man apibrėžti pagrindo spalvą ir iš jos generuoti visas kitas reikalingas spalvas – užpildus, potėpius, gradiento stabdžius, šešėlius. Tuo metu spalva nustoja būti palete ir pradeda būti sistema. SVG iliustracijose dažniausiai pakartotinai naudojamos tos pačios kelios spalvos užpildams, potėpiams ir gradientams. Santykinė spalva leidžia vieną kartą apibrėžti tuos ryšius ir pakartotinai juos naudoti visur – panašiai kaip animatoriai pakartotinai panaudojo foną kurdami naujas scenas.
Vieną kartą pakeiskite pagrindo spalvą ir kiekviena išvestinė spalva atnaujinama automatiškai, nieko neperskaičiuojant ranka. Be animuotos grafikos, galėčiau naudoti tą patį metodą interaktyvių elementų, pvz., mygtukų ir nuorodų, būsenų spalvoms apibrėžti. Pagrindo spalva, kurią naudojau savo "Lullabye-Bye Bear" Toon Title, yra žalsvai mėlyna. Fonas yra radialinis gradientas tarp mano pagrindo ir tamsesnės versijos.
Norint sukurti alternatyvias versijas su visiškai skirtingomis nuotaikomis, tereikia pakeisti pagrindo spalvą: --pamatai: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(iš var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Norėdamas susieti šias pasirinktines ypatybes su savo SVG gradientu nedubliuodamas spalvų reikšmių, pakeičiau užkoduotas stabdymo spalvos reikšmes eilutiniais stiliais:
Tada turėjau užtikrinti, kad mano Toon tekstas visada kontrastuotų su bet kokia pasirinkta pagrindo spalva. 180 laipsnių atspalvių pasukimas sukuria papildomą spalvą, kuri tikrai išryškėja, bet gali nepatogiai vibruoti: .text-light { užpildyti: oklch(iš var(--fondas) l c skaičiuot(h + 180)); }
90° poslinkis sukuria ryškią antrinę spalvą, tačiau ji visiškai nepapildo: .text-light { užpildyti: oklch(iš var(--fondas) l c skaičiuot(h - 90)); }
Mano atkūrimas Quick Draw McGraw 1959 m. Toon pavadinimu „El Kabong“ naudoja tuos pačius metodus, bet įvairesnė paletė. Pavyzdžiui, tarp pagrindo spalvos ir tamsesnio atspalvio yra dar vienas radialinis gradientas.
Pastatas ir medis fone yra tiesiog skirtingų tos pačios pamatų spalvos atspalvių. Šiems keliams man reikėjo dviejų papildomų užpildo spalvų: .bg-mid { užpildyti: oklch(iš var(--fondas) skaičiuok(l - 0,04) calc(c * 0,91) h); }
.bg-dark { užpildyti: oklch(iš var(--fondas) calc(l - 0,12) calc(c * 0,64) h); }
Kai pamatai pradeda judėti
Iki šiol viskas, ką rodžiau, buvo statiška. Net kai kas nors naudoja spalvų parinkiklį, kad pakeistų pagrindo spalvą, tas pasikeitimas įvyksta akimirksniu. Tačiau animuota grafika retai stovi vietoje – raktas slypi pavadinime. Taigi, jei spalva yra sistemos dalis, nėra jokios priežasties, kodėl ji taip pat negali animuoti.
Norėdami pagyvinti pagrindo spalvą, pirmiausia turiu padalyti ją į OKLCH kanalus- šviesumas, spalvingumas ir atspalvis. Tačiau yra svarbus papildomas veiksmas: turiu užregistruoti tas reikšmes kaip įvestas pasirinktines ypatybes. Bet ką tai reiškia?
Pagal numatytuosius nustatymus naršyklė nežino, ar CSS tinkintos ypatybės reikšmė reiškia spalvą, ilgį, skaičių ar visiškai ką nors kita. Tai dažnai reiškia, kad animacijos metu jų negalima sklandžiai interpoliuoti ir pereiti nuo vienos reikšmės prie kitos.
Užregistravus tinkintą ypatybę, naršyklė nurodo, kokio tipo vertę ji atstovauja ir kaip ji turėtų veikti laikui bėgant. Šiuo atveju noriu, kad naršyklė mano spalvų kanalus traktuotų kaip skaičius, kad juos būtų galima sklandžiai animuoti.
@savybė --f-l {
sintaksė: "
@savybė --f-c {
sintaksė: "
@nuosavybė --f-h {
sintaksė: "
Užregistravus šios tinkintos ypatybės veikia kaip vietinis CSS. Naršyklė gali juos interpoliuoti po kadrą. Tada atstatau pagrindo spalvą iš šių kanalų: --pagrindas: oklch(var(--f-l) var(--f-c) var(--f-h));
Dėl to pagrindo spalva tampa animacinė, kaip ir bet kuri kita skaitinė reikšmė. Štai paprasta „kvėpuojanti“ animacija, kuri laikui bėgant švelniai keičia šviesumą: @keyframes kvėpuoja { 0%, 100% { --f-l: 0,36; } 50 % { --f-l: 0,46; } }
.toon-title { animacija: kvėpuokite 10 s lengvo įėjimo-išėjimo begalybės; }
Kadangi visos kitos užpildų, gradientų ir potėpių spalvos yra gaunamos iš --foundation, jos visos animuojasi kartu ir nieko nereikia atnaujinti rankiniu būdu. Viena animuota spalva, daug efektų Šio proceso pradžioje galvojau, ar santykinės CSS spalvų reikšmės gali pasiūlyti daugiau galimybių, tuo pačiu palengvindamos jas įgyvendinimą. Neseniai savo svetainės kontaktų puslapyje pridėjau naują aukso kasyklos foną, o pirmoji iteracija apėmė švytinčias ir siūbuojančias alyvos lempas.
Norėjau ištirti, kaip CSS santykinių spalvų pagyvinimas galėtų padaryti kasyklos interjerą tikroviškesnį, tonuojant jį lempų spalvomis. Norėjau, kad jie paveiktų juos supantį pasaulį, kaip tai daro tikroji šviesa. Taigi, užuot animavęs kelias spalvas, sukūriau nedidelę apšvietimo sistemą, kuri animuoja tik vieną spalvą.
Mano pirmoji užduotis buvo įdėti perdangos sluoksnį tarp fono ir lempų:
Naudojau maišymo ir maišymo režimą: spalvą, nes tai nuspalvina tai, kas yra po juo, išsaugant pagrindinį skaistį. Kadangi noriu, kad perdanga būtų matoma tik įjungus animaciją, pasirinkau perdangą: .svg-mine #overlay { ekranas: nėra; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { ekranas: blokas; neskaidrumas: 0,5; } }
Perdanga buvo vietoje, bet dar neprijungta prie lempų. Man reikėjo šviesos šaltinio. Mano lempos yra paprastos ir kiekvienoje yra apskritimo elementas, kurį suliejau filtru. Filtras sukuria labai švelnų neryškumą visame apskritime.
Užuot animavęs perdangą ir lempas atskirai, aš animuoju vieną „liepsnos“ spalvos ženklą ir iš to gaunu visa kita. Pirmiausia užregistruoju tris įvestas pasirinktines ypatybes OKLCH kanalams:
@property --fl-l {
sintaksė: "
Animavau tuos kanalus, tyčia nustumdamas kelis kadrus į oranžinę spalvą, kad mirgėjimas būtų aiškiai matomas kaip ugnies šviesa:
@keyframes liepsna { 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; } }
Tada aš įtraukiau tą animaciją į SVG, todėl bendrinami kintamieji yra prieinami ir lempoms, ir mano perdangai:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animacija: liepsna 3.6s begalinė linijinė; izoliacija: izoliuoti;
/* Sukurkite liepsnos spalvą iš animuotų kanalų */ --liepsna: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lempos spalva gauta iš liepsnos */ --lamp-core: oklch(iš var(--liepsna) calc(l + 0,05) calc(c * 0,70) h);
/* Perdangos atspalvis, gautas iš tos pačios liepsnos */ --perdangos atspalvis: oklch(iš var(--liepsna) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Galiausiai šias gautas spalvas pritaikiau šviečiančioms lempoms ir jų paveiktai perdangai: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > circle, .svg-mine[data-animations=on] #mine-lamp-2 > circle { užpildyti: var(--lempos šerdis); }
.svg-mine[data-animations=on] #overlay { ekranas: blokas; užpildyti: var(--overlay-tint); neskaidrumas: 0,5; } }
Kai liepsna pasislenka oranžinės spalvos link, lempos įšyla, o scena sušyla su jomis. Kai liepsna atvės, viskas susidėlioja. Geriausia tai, kad niekas neparašyta rankiniu būdu. Jei pakeičiau pagrindo spalvą arba pakeičiau liepsnos animacijos diapazonus, visa apšvietimo sistema atnaujinama vienu metu. Galutinį rezultatą galite pamatyti mano svetainėje. Pakartotinis naudojimas, pakartotinis panaudojimas, peržiūrėtas Tie Hanna-Barbera animatoriai buvo priversti pakeisti elementus iš būtinybės, bet aš pakartotinai naudoju spalvas, nes tai daro mano darbą nuoseklesnį ir lengviau prižiūrimą. CSS santykinės spalvų reikšmės leidžia man:
Apibrėžkite vieną pagrindo spalvą, Apibūdinkite, kaip su juo susijusios kitos spalvos, Pakartotinai naudokite tuos santykius visur ir Animuokite sistemą pakeisdami vieną reikšmę.
Santykinė spalva ne tik palengvina temą. Tai skatina mąstymą, kai spalva, kaip ir judesys, yra apgalvota, o vienos vertės pakeitimas gali pakeisti visą sceną neperrašant po ja esančio kūrinio.
