Nedávno som obnovil animovanú grafiku na svojej webovej stránke o novú tému a skupinu priekopníckych postáv, pričom som uviedol do praxe množstvo techník, ktoré som zdieľal v tejto sérii. Niekoľko mojich animácií mení vzhľad, keď s nimi niekto interaguje alebo v rôznych časoch dňa.
Farby v grafike na stránkach môjho blogu sa menia od rána do noci každý deň. Potom je tu režim sneženia, ktorý pridáva chladné farby a zimnú tému, vďaka prekryvnej vrstve a režimu prelínania.
Pri práci na tom som začal uvažovať, či by mi relatívne hodnoty farieb CSS mohli poskytnúť väčšiu kontrolu a zároveň zjednodušiť proces. Poznámka: V tomto návode sa zameriam na relatívne hodnoty farieb a farebný priestor OKLCH pre tematickú grafiku a animácie. Ak sa chcete ponoriť hlboko do relatívnej farby, Ahmad Shadeed vytvoril vynikajúceho interaktívneho sprievodcu. Čo sa týka farebných priestorov, gamutov a OKLCH, písal o nich náš Geoff Graham.
Kľúčové bolo opakované použitie prvkov. Pozadia sa znova použili vždy, keď to bolo možné, s priblížením a prekrytím, ktoré pomáhali vytvárať nové scény z rovnakého umeleckého diela. Zrodila sa z nutnosti, no zároveň podnecovala k premýšľaniu skôr v rámci série ako jednotlivých scén. Problém s manuálnou aktualizáciou farebných paliet Poďme rovno k mojej výzve. V tituloch Toon, ako je tento – na základe epizódy Yogi Bear Show z roku 1959 „Lullabye-Bye Bear“ – a vo všeobecnosti v mojej práci sú palety obmedzené na niekoľko vybraných farieb.
Vytváram odtiene a odtiene z toho, čo nazývam svojou „základnou“ farbou, aby som rozšíril paletu bez pridania ďalších odtieňov.
V aplikácii Sketch pracujem vo farebnom priestore HSL, takže tento proces zahŕňa zvýšenie alebo zníženie hodnoty svetlosti mojej základnej farby. Úprimne povedané, nie je to náročná úloha – ale výber inej základnej farby si vyžaduje vytvorenie úplne novej sady odtieňov a odtieňov. Robiť to znova a znova ručne sa rýchlo stáva pracným.
Spomenul som farebný priestor HSL – H (odtieň), S (sýtosť) a L (svetlosť), ale to je len jeden z niekoľkých spôsobov, ako opísať farbu. RGB - R (červená), G (zelená), B (modrá) - je pravdepodobne najznámejšia, aspoň vo svojej Hex forme. K dispozícii je tiež LAB - L (svetlosť), A (zelená-červená), B (modrá-žltá) - a novší, ale teraz široko podporovaný model LCH - L (svetlosť), C (chroma), H (odtieň) - vo forme OKLCH. Pomocou LCH – konkrétne OKLCH v CSS – môžem upraviť hodnotu svetlosti mojej podkladovej farby.
Alebo môžem zmeniť jeho sýtosť. LCH chroma a HSL sýtosť opisujú intenzitu alebo sýtosť farby, ale robia to rôznymi spôsobmi. LCH mi poskytuje širší rozsah a predvídateľnejšie miešanie farieb.
Môžem tiež zmeniť odtieň, aby som vytvoril paletu farieb, ktoré zdieľajú rovnaké hodnoty svetlosti a sýtosti. V HSL aj LCH spektrum odtieňov začína červenou farbou, prechádza cez zelenú a modrú a vracia sa k červenej.
Prečo OKLCH zmenil môj názor na farbu Podpora prehliadača pre farebný priestor OKLCH je teraz rozšírená, aj keď dizajnové nástroje – vrátane Sketch – to ešte nedohnali. Našťastie by vám to nemalo brániť v používaní OKLCH. Prehliadače za vás ochotne prevedú hodnoty Hex, HSL, LAB a RGB do OKLCH. Vlastnú vlastnosť CSS môžete definovať so základnou farbou v akomkoľvek priestore vrátane Hex: /* Farba základu */ --nadácia: #5accd6;
Všetky farby odvodené z neho budú automaticky prevedené na OKLCH: --foundation-light: oklch(from var(--fundation) [...]; } --fundation-mid: oklch(from var(--fundation) [...]; } --foundation-dark: oklch(from var(--fundation) [...]; }
Relatívna farba ako dizajnový systém Predstavte si relatívnu farbu ako výrok: „Vezmi túto farbu, uprav ju a potom mi daj výsledok. Existujú dva spôsoby, ako upraviť farbu: absolútne zmeny a proporcionálne zmeny. Vyzerajú podobne v kóde, ale správajú sa veľmi odlišne, keď začnete vymieňať základné farby. Pochopenie tohto rozdielu je to, čo sa pomocou relatívnej farby môže zmeniť na systém. /* Farba základu */ --nadácia: #5accd6;
Napríklad hodnota svetlosti mojej podkladovej farby je 0,7837, zatiaľ čo tmavšia verzia má hodnotu 0,5837. Na výpočet rozdielu odpočítam nižšiu hodnotu od vyššej a použijem výsledok pomocou funkcie calc(): --základ-tmavý: oklch(z var(--fundation) calc(1 - 0,20) c h);
Na dosiahnutie svetlejšej farby pridávam namiesto toho rozdiel: --základové-svetlo: oklch(z var(--fundation) calc (1 + 0,10) c h);
Chromaúpravy prebiehajú rovnakým postupom. Aby som znížil intenzitu mojej základnej farby z 0,1035 na 0,0035, odpočítam jednu hodnotu od druhej: oklch(z var(--fundation) l vypočítané (c - 0,10) h);
Na vytvorenie palety odtieňov vypočítam rozdiel medzi hodnotou odtieňa mojej základnej farby (200) a môjho nového odtieňa (260): oklch(z var(--fundation) lc vypočítané (h + 60));
Tie výpočty sú absolútne. Keď odpočítam pevnú sumu, efektívne hovorím: „Vždy odpočítajte toľko“. To isté platí pri pridávaní pevných hodnôt: calc(c - 0,10) calc(c + 0,10)
Spoznal som limity tohto prístupu tvrdou cestou. Keď som sa spoliehal na odčítanie pevných hodnôt sýtosti, farby sa zrútili smerom k sivej hneď, ako som zmenil základ. Paleta, ktorá fungovala pre jednu farbu, sa rozpadla na druhú. Násobenie sa správa inak. Keď znásobím sýtosť, hovorím prehliadaču: „Znížte intenzitu tejto farby proporčne.“ Vzťah medzi farbami zostáva nedotknutý, aj keď sa základ zmení: calc(c * 0,10)
My Move It, Scale It, Rotate It Rules
Presuňte ľahkosť (pridajte alebo odčítajte), farebnosť stupnice (násobenie), Otočiť odtieň (pridať alebo odčítať stupne).
Zmenšujem farebnosť, pretože chcem, aby zmeny intenzity zostali úmerné základnej farbe. Vzťahy odtieňov sú rotačné, takže násobenie odtieňa nemá zmysel. Ľahkosť je vnímavá a absolútna – jej násobenie často vedie k zvláštnym výsledkom.
Od jednej farby k celej téme Relatívna farba mi umožňuje definovať základnú farbu a generovať z nej každú ďalšiu farbu, ktorú potrebujem – výplne, ťahy, prechody, tiene. V tomto bode farba prestáva byť paletou a začína byť systémom. Ilustrácie SVG majú tendenciu opakovane používať niekoľko rovnakých farieb vo výplniach, ťahoch a prechodoch. Relatívna farba vám umožňuje definovať tieto vzťahy raz a znova ich použiť všade – podobne ako animátori znova použili pozadie na vytvorenie nových scén.
Zmeňte základnú farbu raz a každá odvodená farba sa aktualizuje automaticky bez toho, aby ste museli čokoľvek prepočítavať ručne. Okrem animovanej grafiky by som mohol použiť rovnaký prístup na definovanie farieb pre stavy interaktívnych prvkov, ako sú tlačidlá a odkazy. Základná farba, ktorú som použil vo svojom Toon Title „Lullabye-Bye Bear“ je azúrová modrá. Pozadie je radiálny gradient medzi mojím základom a tmavšou verziou.
Aby som vytvoril alternatívne verzie s úplne odlišnými náladami, potrebujem zmeniť iba základnú farbu: --nadácia: #5accd6; --grad-end: var(--fundation); --grad-start: oklch(from var(--fundation) calc(1 - 0,2357) calc(c* 0,833) h);
Aby som naviazal tieto vlastné vlastnosti na môj prechod SVG bez duplikovania hodnôt farieb, nahradil som pevne zakódované hodnoty stop-farby vloženými štýlmi:
Ďalej som potreboval zabezpečiť, aby môj Toon Text vždy kontrastoval s akoukoľvek podkladovou farbou, ktorú si vyberiem. Otočenie o 180 stupňov vytvára doplnkovú farbu, ktorá určite vyskočí – ale môže nepríjemne vibrovať: .text-light { výplň: oklch(z var(--základ) lc vypočítané (h + 180)); }
Posun o 90° vytvára živú sekundárnu farbu bez toho, aby bola plne komplementárna: .text-light { výplň: oklch(z var(--základ) lc vypočítané (h - 90)); }
Moja rekreácia titulu Toon Title „El Kabong“ Quick Draw McGraw z roku 1959 používa rovnaké techniky, ale s pestrejšou paletou. Napríklad medzi základnou farbou a tmavším odtieňom je ďalší radiálny gradient.
Budova a strom v pozadí sú jednoducho rôzne odtiene rovnakej základnej farby. Pre tieto cesty som potreboval dve ďalšie farby výplne: .bg-mid { výplň: oklch(z var(--základ) calc(1 - 0,04) calc(c* 0,91) h); }
.bg-dark { výplň: oklch(z var(--základ) calc(1 - 0,12) calc(c* 0,64) h); }
Keď sa základy začnú pohybovať Zatiaľ všetko, čo som ukázal, bolo statické. Dokonca aj keď niekto použije nástroj na výber farby na zmenu základnej farby, táto zmena nastane okamžite. Ale animovaná grafika len zriedka stojí - kľúč je v názve. Ak je teda farba súčasťou systému, nie je dôvod, aby nemohla byť animovaná. Aby som animoval základnú farbu, najprv ju potrebujem rozdeliť na jej OKLCH kanály— svetlosť, sýtosť a odtieň. Je tu však dôležitý krok navyše: Tieto hodnoty musím zaregistrovať ako napísané vlastné vlastnosti. Ale čo to znamená? V predvolenom nastavení prehliadač nevie, či hodnota vlastnej vlastnosti CSS predstavuje farbu, dĺžku, číslo alebo niečo úplne iné. To často znamená, že ich nemožno počas animácie hladko interpolovať a preskakovať z jednej hodnoty na druhú. Registrácia vlastnej vlastnosti informuje prehliadač o type hodnoty, ktorú predstavuje a ako by sa mala správať v priebehu času. V tomto prípade chcem, aby prehliadač zaobchádzal s mojimi farebnými kanálmi ako s číslami, aby sa mohli plynulo animovať. @property --f-l { syntax: "<číslo>"; dedí: pravda; počiatočná hodnota: 0,40; }
@property --f-c { syntax: "<číslo>"; dedí: pravda; počiatočná hodnota: 0,11; }
@property --f-h { syntax: "<číslo>"; dedí: pravda; počiatočná hodnota: 305; }
Po zaregistrovaní sa tieto vlastné vlastnosti správajú ako natívny CSS. Prehliadač ich môže interpolovať snímku po snímke. Potom znovu vytvorím základnú farbu z týchto kanálov: --zaklad: oklch(var(--f-l) var(--f-c) var(--f-h));
Vďaka tomu sa základná farba stane animovateľnou, rovnako ako akákoľvek iná číselná hodnota. Tu je jednoduchá animácia „dýchania“, ktorá v priebehu času jemne posúva svetlosť: @keyframes dýchať { 0 %, 100 % {-f-l: 0,36; } 50 % {-f-l: 0,46; } }
.toon-title { animácia: dýchanie 10s nekonečno; }
Pretože každá ďalšia farba vo výplniach, prechodoch a ťahoch je odvodená od --foundation, všetky sa animujú spolu a nič nie je potrebné aktualizovať ručne. Jedna animovaná farba, veľa efektov Na začiatku tohto procesu ma zaujímalo, či by relatívne hodnoty farieb CSS mohli ponúknuť viac možností a zároveň zjednodušiť ich implementáciu. Nedávno som pridal nové pozadie zlatej bane na kontaktnú stránku môjho webu a prvá iterácia zahŕňala olejové lampy, ktoré svietia a hojdajú sa.
Chcel som preskúmať, ako by animácia relatívnych farieb CSS mohla urobiť interiér bane realistickejším jeho tónovaním farbami z lámp. Chcel som, aby ovplyvnili svet okolo seba tak, ako to robí skutočné svetlo. Takže namiesto animácie viacerých farieb som vytvoril malý osvetľovací systém, ktorý animuje iba jednu farbu.
Mojou prvou úlohou bolo umiestniť prekryvnú vrstvu medzi pozadie a lampy:
Použil som mix-blend-mode: color, pretože to zafarbí to, čo je pod ním, a zároveň zachová jas. Keďže chcem, aby bolo prekrytie viditeľné iba pri zapnutých animáciách, prihlásil som sa na prekrytie: .svg-mine #overlay { displej: žiadny; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { displej: blok; nepriehľadnosť: 0,5; } }
Prekrytie bolo na mieste, ale ešte nebolo pripojené k lampám. Potreboval som zdroj svetla. Moje lampy sú jednoduché a každá obsahuje kruhový prvok, ktorý som rozmazal filtrom. Filter vytvára veľmi jemné rozmazanie po celom kruhu.
Namiesto toho, aby som animoval prekrytie a lampy oddelene, animujem jeden farebný token „plameňa“ a z toho odvodzujem všetko ostatné. Najprv zaregistrujem tri napísané vlastné vlastnosti pre kanály OKLCH: @property --fl-l { syntax: "<číslo>"; dedí: pravda; počiatočná hodnota: 0,86; } @property --fl-c { syntax: "<číslo>"; dedí: pravda; počiatočná hodnota: 0,12; } @property --fl-h { syntax: "<číslo>"; dedí: pravda; počiatočná hodnota: 95; }
Animoval som tieto kanály a zámerne som posunul niekoľko snímok smerom k oranžovej, aby blikanie jasne vyzeralo ako svetlo ohňa:
@keyframes flame { 0 %, 100 % {-fl-1: 0,86; --fl-c: 0,12; --fl-h: 95; } 6 % {-fl-1: 0,91; --fl-c: 0,10; --fl-h: 92; } 12 % {-fl-1: 0,83; --fl-c: 0,14; --fl-h: 100; } 18 % {-fl-1: 0,88; --fl-c: 0,11; --fl-h: 94; } 24 % {-fl-1: 0,82; --fl-c: 0,16; --fl-h: 82; } 30 % {-fl-l: 0,90; --fl-c: 0,12; --fl-h: 90; } 36 % {-fl-1: 0,79; --fl-c: 0,17; --fl-h: 76; } 44 % {-fl-1: 0,87; --fl-c: 0,12; --fl-h: 96; } 52 % {-fl-l: 0,81; --fl-c: 0,15; --fl-h: 102; } 60 % {-fl-1: 0,89; --fl-c: 0,11; --fl-h: 93; } 68 % {-fl-1: 0,83; --fl-c: 0,16; --fl-h: 85; } 76 % {-fl-1: 0,91; --fl-c: 0,10; --fl-h: 91; } 84 % {-fl-1: 0,85; --fl-c: 0,14; --fl-h: 98; } 92 % {--fl-l: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Potom som túto animáciu upravil na SVG, takže zdieľané premenné sú dostupné pre lampy aj pre moje prekrytie:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animácia: plameň 3,6s nekonečný lineárny; izolácia: izolovať;
/* Vytvorenie farby plameňa z animovaných kanálov */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Farba lampy odvodená od plameňa */ --jadro lampy: oklch(z var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Prekryvný odtieň pochádzajúci z rovnakého plameňa */ --overlay-tint: oklch(z var(--flame) calc(l + 0,06) calc(c*0,65) calc(h - 10)); } }
Nakoniec som tieto odvodené farby aplikoval na žiariace lampy a prekrytie, ktoré ovplyvňujú: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > kruh, .svg-mine[data-animations=on] #mine-lamp-2 > circle { fill: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { displej: blok; fill: var(--overlay-tint); nepriehľadnosť: 0,5; } }
Keď sa plameň posunie smerom k oranžovej, lampy sa zahrejú a scéna sa ohreje spolu s nimi. Keď plameň vychladne, všetko sa usadí. Najlepšie na tom je, že sa nič nepíše ručne. Ak zmením základnú farbu alebo upravím rozsahy animácie plameňa, súčasne sa aktualizuje celý systém osvetlenia. Konečný výsledok si môžete pozrieť na mojej stránke. Opätovné použitie, opätovné použitie, prehodnotené Títo animátori Hanna-Barbera boli nútení zmeniť účel prvkov z nutnosti, ale ja znovu používam farby, pretože vďaka nim je moja práca konzistentnejšia a ľahšie sa udržiava. Hodnoty relatívnej farby CSS mi umožňujú:
Definujte jednu základnú farbu, Popíšte, ako s tým súvisia ostatné farby, Znovu použite tieto vzťahy všade a Oživte systém zmenou jednej hodnoty.
Relatívna farba nielenže uľahčuje vytváranie motívov. Podporuje spôsob myslenia, kde je farba, podobne ako pohyb, zámerná – a kde zmena jednej hodnoty môže zmeniť celú scénu bez prepisovania diela pod ňou.
