Olen äskettäin päivittänyt verkkosivuni animoitua grafiikkaa uudella teemalla ja joukolla uraauurtavia hahmoja ja soveltanut käytännössä monia tässä sarjassa jakamiani tekniikoita. Jotkut animaatioistani muuttavat ulkonäköä, kun joku on vuorovaikutuksessa niiden kanssa tai eri vuorokaudenaikoina.
Blogini sivuilla olevan grafiikan värit vaihtelevat aamusta iltaan joka päivä. Sitten on lumitila, joka lisää kylmiä värejä ja talvisen teeman peittokerroksen ja sekoitustilan ansiosta.
Työstäessäni tätä aloin miettimään, voisivatko CSS:n suhteelliset väriarvot antaa minulle enemmän hallintaa ja samalla yksinkertaistaa prosessia. Huomautus: Tässä opetusohjelmassa keskityn suhteellisiin väriarvoihin ja OKLCH-väriavaruuteen teemagrafiikkaa ja animaatioita varten. Jos haluat sukeltaa syvälle suhteellisiin väreihin, Ahmad Shadeed loi upean interaktiivisen oppaan. Mitä tulee väriavaroihin, gamuihin ja OKLCH:hen, oma Geoff Graham kirjoitti niistä.
Elementtien toistuva käyttö oli avainasemassa. Taustat käytettiin uudelleen aina kun mahdollista, ja zoomaukset ja peittokuvat auttoivat rakentamaan uusia kohtauksia samasta taideteoksesta. Se syntyi välttämättömyydestä, mutta rohkaisi myös ajattelemaan sarjoja yksittäisten kohtausten sijaan. Ongelma väripalettien manuaalisessa päivityksessä Mennään suoraan haasteeseeni. Tämän kaltaisissa Toon-nimikkeissä - joka perustuu vuoden 1959 Yogi Bear Show -jaksoon "Lullabye-Bye Bear" - ja työssäni yleensä paletit rajoittuvat muutamaan valittuun väriin.
Luon sävyjä ja sävyjä siitä, mitä kutsun "perusväriksi" laajentaakseni palettia lisäämättä sävyjä.
Sketchissä työskentelen HSL-väriavaruudessa, joten tähän prosessiin kuuluu meikkivärini vaaleusarvon lisääminen tai vähentäminen. Rehellisesti sanottuna se ei ole vaivalloinen tehtävä – mutta erilaisen meikkivärin valitseminen edellyttää kokonaan uuden sävysarjan luomista. Sen tekeminen manuaalisesti yhä uudelleen ja uudelleen käy nopeasti työlästä.
Mainitsin HSL - H (sävy), S (kylläisyys) ja L (vaaleus) - väriavaruuden, mutta se on vain yksi monista tavoista kuvata väriä. RGB - R (punainen), G (vihreä), B (sininen) - on luultavasti tutuin, ainakin Hex-muodossaan. Mukana on myös LAB – L (vaaleus), A (vihreä – punainen), B (sininen – keltainen) – ja uudempi, mutta nyt laajalti tuettu LCH – L (vaaleus), C (kroma), H (sävy) – malli OKLCH-muodossaan. LCH:lla – erityisesti OKLCH:lla CSS:ssä – voin säätää meikkivärini vaaleutta.
Tai voin muuttaa sen väriä. LCH-kroma ja HSL-kylläisyys kuvaavat molemmat värin voimakkuutta tai rikkautta, mutta ne tekevät sen eri tavoin. LCH antaa minulle laajemman valikoiman ja ennustettavamman värien sekoituksen.
Voin myös muuttaa sävyä luodakseni väripaletin, jolla on samat vaaleus- ja väriarvot. Sekä HSL:ssä että LCH:ssa sävyspektri alkaa punaisesta, siirtyy vihreän ja sinisen läpi ja palaa punaiseen.
Miksi OKLCH muutti ajatteluani väreistä Selaimen tuki OKLCH-väriavaruudelle on nyt laajalle levinnyt, vaikka suunnittelutyökalut - mukaan lukien Sketch - eivät ole saavuttaneet sitä. Onneksi sen ei pitäisi estää sinua käyttämästä OKLCH:ta. Selaimet muuntavat mielellään Hex-, HSL-, LAB- ja RGB-arvot OKLCH:ksi puolestasi. Voit määrittää mukautetun CSS-ominaisuuden perusvärillä missä tahansa tilassa, mukaan lukien Hex: /* Perusväri */ --säätiö: #5accd6;
Kaikki siitä johdetut värit muunnetaan OKLCH:ksi automaattisesti: --foundation-light: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation) [...]; } --foundation-dark: oklch(var(--foundation) [...]; }
Suhteellinen väri suunnittelujärjestelmänä Ajattele suhteellista väriä sanomalla: "Ota tämä väri, säädä sitä ja anna sitten tulos." On kaksi tapaa säätää väriä: absoluuttiset muutokset ja suhteelliset muutokset. Ne näyttävät samanlaisilta koodiltaan, mutta käyttäytyvät hyvin eri tavalla, kun alat vaihtaa meikkivärejä. Tämän eron ymmärtäminen voi muuttaa suhteellisen värin käytön järjestelmäksi. /* Perusväri */ --säätiö: #5accd6;
Esimerkiksi meikkivärini vaaleusarvo on 0,7837, kun taas tummemman version arvo on 0,5837. Eron laskemiseksi vähennän pienemmän arvon korkeammasta ja käytän tulosta calc()-funktiolla: --pohja-tumma: oklch(var(--säätiöstä) laskettu (l - 0,20) c h);
Vaaleamman värin saavuttamiseksi lisään sen sijaan eron: --perustusvalo: oklch(var(--säätiöstä) lask. (l + 0,10) c h);
Chromasäädöt noudattavat samaa prosessia. Vähentääkseni meikkivoidevärini intensiteettiä arvosta 0,1035 arvoon 0,0035, vähennän yhden arvon toisesta: oklch(var(--säätiöstä) l lask. (c - 0,10) h);
Sävypaletin luomiseksi lasken meikkivärini (200) ja uuden sävyni (260) sävyarvon välisen eron: oklch(var(--säätiöstä) lc lask.(h + 60));
Nuo laskelmat ovat ehdottomia. Kun vähennän kiinteän summan, sanon tehokkaasti: "Vähennä aina näin paljon." Sama koskee kiinteiden arvojen lisäämistä: laskenta (c - 0,10) laskenta (c + 0,10)
Opin tämän lähestymistavan rajat kovalla tavalla. Kun luotin kiinteiden värikylläisyysarvojen vähentämiseen, värit romahtivat kohti harmaata heti, kun vaihdoin perustan. Yhdelle värille toiminut paletti hajosi toiselle. Kertominen toimii eri tavalla. Kun kerron värin, sanon selaimelle: "Vähennä tämän värin voimakkuutta suhteessa." Värien välinen suhde säilyy, vaikka perusta muuttuu: laskenta (c * 0,10)
Move It, Scale It, Rotate It Rules
Siirrä vaaleutta (lisää tai vähennä), Skaalaväri (kerroin), Kierrä sävyä (lisää tai vähennä asteita).
Skaalaan värin, koska haluan intensiteetin muutosten pysyvän suhteessa perusväriin. Sävysuhteet pyörivät, joten sävyn kertomisessa ei ole mitään järkeä. Keveys on havainnollistavaa ja ehdotonta – sen kertominen tuottaa usein outoja tuloksia.
Yhdestä väristä koko teemaan Suhteellisen värin avulla voin määrittää pohjavärin ja luoda siitä kaikki muut tarvitsemani värit - täytteet, vedot, liukuvärit, varjot. Siinä vaiheessa väri lakkaa olemasta paletti ja alkaa olla järjestelmä. SVG-kuvitukset käyttävät usein samoja värejä täytöissä, viivoissa ja liukuväreissä. Suhteellisen värin avulla voit määrittää nämä suhteet kerran ja käyttää niitä uudelleen kaikkialla – aivan kuten animaattorit käyttivät taustoja uudelleen luodakseen uusia kohtauksia.
Vaihda pohjaväri kerran, ja jokainen johdettu väri päivittyy automaattisesti ilman, että mitään käsin lasketaan uudelleen. Animoidun grafiikan ulkopuolella voisin käyttää samaa lähestymistapaa värien määrittämiseen interaktiivisten elementtien, kuten painikkeiden ja linkkien, tiloihin. Perusväri, jota käytin "Lullabye-Bye Bear" Toon -nimikkeessäni, on syaanin näköinen sininen. Tausta on säteittäinen gradientti perustani ja tummemman version välillä.
Jos haluat luoda vaihtoehtoisia versioita täysin erilaisilla tunnelmilla, minun tarvitsee vain vaihtaa pohjaväri: --säätiö: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--säätiö) laskettu (l - 0,2357) laskettu (c * 0,833) h);
Sitotakseni mukautetut ominaisuudet SVG-gradienttiini kopioimatta väriarvoja, korvasin kovakoodatut stop-väriarvot tekstin sisäisillä tyyleillä:
Seuraavaksi minun piti varmistaa, että Toon-tekstini erottuu aina valitsemastani pohjaväristä. 180 asteen sävyn kierto tuottaa täydentävän värin, joka varmasti pomppaa – mutta voi väriseä epämiellyttävästi: .text-light { täyttö: oklch(var(--säätiö) lc lask.(h + 180)); }
90° siirto tuottaa eloisan toissijaisen värin ilman, että se täydentää täysin: .text-light { täyttö: oklch(var(--säätiö) lc lask.(h - 90)); }
Quick Draw McGraw'n vuoden 1959 Toon-nimikkeen "El Kabong" uudelleenluominen käyttää samoja tekniikoita, mutta monipuolisemmalla paletilla. Esimerkiksi pohjavärin ja tummemman sävyn välillä on toinen säteittäinen gradientti.
Taustalla oleva rakennus ja puu ovat yksinkertaisesti saman perusvärin eri sävyjä. Näitä polkuja varten tarvitsin kaksi lisätäyttöväriä: .bg-mid { täyttö: oklch(var(--säätiö) laskettu (l - 0,04) laskettu (c * 0,91) h); }
.bg-dark { täyttö: oklch(var(--säätiö) laskettu (l - 0,12) lask. (c * 0,64) h); }
Kun perustukset alkavat liikkua
Tähän mennessä kaikki, mitä olen näyttänyt, on ollut staattista. Vaikka joku muuttaisi meikkivoiteen väriä värinvalitsimella, muutos tapahtuu välittömästi. Mutta animoitu grafiikka pysyy harvoin paikallaan - vihje on nimessä. Joten jos väri on osa järjestelmää, ei ole mitään syytä, miksi se ei myöskään voi animoida.
Animoidakseni pohjavärin, minun on ensin jaettava se OKLCH-kanaviinsa- vaaleus, värimaailma ja sävy. Mutta on tärkeä lisävaihe: minun on rekisteröitävä nämä arvot kirjoitetuiksi mukautetuiksi ominaisuuksiksi. Mutta mitä se tarkoittaa?
Oletuksena selain ei tiedä, edustaako mukautettu CSS-ominaisuuden arvo väriä, pituutta, numeroa vai jotain muuta kokonaan. Tämä tarkoittaa usein sitä, että niitä ei voida interpoloida sujuvasti animaation aikana ja siirtyä arvosta toiseen.
Muokatun ominaisuuden rekisteröiminen kertoo selaimelle, minkä tyyppistä arvoa se edustaa ja miten sen pitäisi toimia ajan myötä. Tässä tapauksessa haluan selaimen käsittelevän värikanaviani numeroina, jotta ne voidaan animoida sujuvasti.
@omaisuus --f-l {
syntaksi: "
@omaisuus --f-c {
syntaksi: "
@omaisuus --f-h {
syntaksi: "
Rekisteröitymisen jälkeen nämä mukautetut ominaisuudet toimivat alkuperäisen CSS:n tavoin. Selain voi interpoloida ne kehys kehykseltä. Sitten rakensin pohjavärin uudelleen näistä kanavista: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Tämä tekee pohjaväristä animoitavan, kuten mistä tahansa muusta numeerisesta arvosta. Tässä on yksinkertainen "hengittävä" animaatio, joka muuttaa kevyesti vaaleutta ajan myötä: @keyframes hengitä { 0 %, 100 % { --f-l: 0,36; } 50 % {-f-l: 0,46; } }
.toon-title { animaatio: hengitä 10s easy-in-out ääretön; }
Koska kaikki muut värit täytteissä, liukuväreissä ja viivoissa ovat peräisin --foundationista, ne kaikki animoituvat yhdessä, eikä mitään tarvitse päivittää manuaalisesti. Yksi animoitu väri, monta tehostetta Tämän prosessin alussa mietin, voisivatko CSS:n suhteelliset väriarvot tarjota enemmän mahdollisuuksia ja samalla tehdä niistä helpompi toteuttaa. Lisäsin äskettäin uuden kultakaivoksen taustan verkkosivustoni yhteystietosivulle, ja ensimmäinen iteraatio sisälsi öljylamput, jotka hehkuvat ja heiluvat.
Halusin tutkia, kuinka CSS:n suhteellisten värien animointi voisi tehdä kaivoksen sisustuksesta realistisemman sävyttämällä sen lamppujen väreillä. Halusin niiden vaikuttavan ympäröivään maailmaan, kuten todellinen valo tekee. Joten useiden värien animoinnin sijaan rakensin pienen valaistusjärjestelmän, joka animoi vain yhden värin.
Ensimmäinen tehtäväni oli asettaa peittokerros taustan ja lamppujeni väliin:
Käytin mix-blend-mode: väriä, koska se sävyttää sen alla olevan luminanssin säilyttäen. Koska haluan peittokuvan näkyvän vain, kun animaatiot ovat käytössä, valitsin peittokuvan: .svg-mine #overlay { näyttö: ei mitään; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { näyttö: lohko; opasiteetti: 0,5; } }
Päällys oli paikallaan, mutta ei vielä kytketty lamppuihin. Tarvitsin valonlähteen. Valaisimeni ovat yksinkertaisia, ja jokainen sisältää ympyräelementin, jonka sumensin suodattimella. Suodatin tuottaa erittäin pehmeän epäterävyyden koko ympyrän yli.
Sen sijaan, että animoisin peiton ja lamput erikseen, animoin yhden "liekki"-värimerkin ja johdan kaiken muun siitä. Ensin rekisteröin kolme kirjoitettua mukautettua ominaisuutta OKLCH-kanaville:
@omaisuus --fl-l {
syntaksi: "
Animoin ne kanavat, työnsin tarkoituksella muutaman ruudun kohti oranssia, jotta välkkyminen kuuluu selkeästi tulenvaloon:
@keyframes liekki { 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; } }
Sitten laajensin animaation SVG:hen, joten jaetut muuttujat ovat saatavilla sekä lampuille että peittokuvalleni:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animaatio: liekki 3.6s ääretön lineaarinen; eristäminen: eristää;
/* Rakenna liekkiväriä animoiduista kanavista */ --liekki: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* liekistä johdettu lampun väri */ --lampun ydin: oklch(var(--liekistä) calc(l + 0,05) calc(c * 0,70) h);
/* Päällystyssävy samasta liekistä */ --overlay-tint: oklch(var(--flame) lask. (l + 0,06) lask. (c * 0,65) lask. (h - 10)); } }
Lopuksi laitoin nämä johdetut värit hehkuviin lamppuihin ja peittoon, johon ne vaikuttavat: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > circle, .svg-mine[data-animations=on] #mine-lamp-2 > circle { täyttö: var(--lampun ydin); }
.svg-mine[data-animations=on] #overlay { näyttö: lohko; fill: var(--overlay-tint); opasiteetti: 0,5; } }
Kun liekki siirtyy kohti oranssia, lamput lämpenevät ja kohtaus lämpenee niiden mukana. Kun liekki jäähtyy, kaikki asettuu yhteen. Parasta on, että mitään ei kirjoiteta manuaalisesti. Jos vaihdan pohjaväriä tai säädän liekin animaatioalueita, koko valaistusjärjestelmä päivittyy samanaikaisesti. Lopputuloksen näet nettisivuiltani. Uudelleenkäyttö, uudelleenkäyttö, uudelleenkäynti Ne Hanna-Barbera-animaattorit joutuivat pakottamaan elementtejä uudelleenkäyttöön, mutta käytän värejä uudelleen, koska se tekee työstäni johdonmukaisemman ja helpompia ylläpitää. CSS:n suhteelliset väriarvot antavat minulle mahdollisuuden:
Määritä yksi perusväri, Kuvaile, miten muut värit liittyvät siihen, Käytä näitä suhteita uudelleen kaikkialla ja Animoi järjestelmä muuttamalla yhtä arvoa.
Suhteellinen väri ei vain tee teemoista helpompaa. Se kannustaa ajatteluun, jossa värit, kuten liike, ovat tarkoituksellisia – ja jossa yhden arvon muuttaminen voi muuttaa koko kohtauksen kirjoittamatta sen alla olevaa teosta uudelleen.
