Nedávno jsem obnovil animovanou grafiku na svých webových stránkách o nové téma a skupinu průkopnických postav a uvedl do praxe spoustu technik, které jsem sdílel v této sérii. Několik mých animací mění vzhled, když s nimi někdo interaguje nebo v různých denních dobách.
Barvy v grafice na stránkách mého blogu se každý den mění od rána do noci. Pak je tu režim sněhu, který přidává chladné barvy a zimní téma, díky překryvné vrstvě a režimu prolnutí.
Při práci na tom jsem začal přemýšlet, zda mi relativní hodnoty barev CSS mohou poskytnout větší kontrolu a zároveň zjednodušit proces. Poznámka: V tomto tutoriálu se zaměřím na relativní hodnoty barev a barevný prostor OKLCH pro motivovou grafiku a animace. Pokud se chcete ponořit hluboko do relativních barev, Ahmad Shadeed vytvořil skvělého interaktivního průvodce. Co se týče barevných prostorů, gamutů a OKLCH, psal o nich náš Geoff Graham.
Klíčové bylo opakované použití prvků. Pozadí bylo znovu použito, kdykoli to bylo možné, se zoomy a překryvy pomáhaly vytvářet nové scény ze stejného uměleckého díla. Zrodila se z nutnosti, ale také povzbuzovala k přemýšlení spíše v rámci série než jednotlivých scén. Problém s ruční aktualizací palet barev Pojďme rovnou k mé výzvě. V Toon Titles, jako je tento – založený na epizodě Yogi Bear Show z roku 1959 „Lullabye-Bye Bear“ – a v mé práci obecně jsou palety omezeny na několik vybraných barev.
Vytvářím odstíny a odstíny z toho, čemu říkám „základní“ barva, abych rozšířil paletu bez přidávání dalších odstínů.
V aplikaci Sketch pracuji v barevném prostoru HSL, takže tento proces zahrnuje zvýšení nebo snížení hodnoty světlosti mé základní barvy. Upřímně řečeno, není to náročný úkol – ale výběr jiné základní barvy vyžaduje vytvoření zcela nové sady odstínů a odstínů. Dělat to znovu a znovu ručně se rychle stává pracným.
Zmínil jsem barevný prostor HSL – H (odstín), S (sytost) a L (světlost), ale to je jen jeden z několika způsobů, jak barvu popsat. RGB — R (červená), G (zelená), B (modrá) — je pravděpodobně nejznámější, alespoň ve své hexadecimální formě. K dispozici je také LAB — L (světlost), A (zeleno-červená), B (modrá-žlutá) — a novější, ale nyní široce podporovaný model LCH — L (světlost), C (chroma), H (odstín) — ve formě OKLCH. Pomocí LCH – konkrétně OKLCH v CSS – mohu upravit hodnotu světlosti mé základní barvy.
Nebo mohu změnit jeho sytost. LCH chroma a HSL saturace popisují intenzitu nebo sytost barvy, ale dělají to různými způsoby. LCH mi poskytuje širší rozsah a předvídatelnější prolínání barev.
Mohu také změnit odstín a vytvořit paletu barev, které sdílejí stejné hodnoty světlosti a sytosti. U HSL i LCH začíná spektrum odstínů na červené, pohybuje se přes zelenou a modrou a vrací se k červené.
Proč OKLCH změnil způsob, jakým přemýšlím o barvách Podpora prohlížeče pro barevný prostor OKLCH je nyní rozšířená, i když návrhářské nástroje – včetně Sketch – ještě nestačily. Naštěstí by vám to nemělo bránit v používání OKLCH. Prohlížeče za vás ochotně převedou hodnoty Hex, HSL, LAB a RGB do OKLCH. Můžete definovat vlastní vlastnost CSS se základní barvou v libovolném prostoru, včetně Hex: /* Barva základu */ --nadace: #5accd6;
Všechny barvy odvozené z něj budou automaticky převedeny do OKLCH: --foundation-light: oklch(from var(--fundation) [...]; } --foundation-mid: oklch(from var(--fundation) [...]; } --foundation-dark: oklch(from var(--fundation) [...]; }
Relativní barva jako designový systém Přemýšlejte o relativní barvě jako o tom, že říkáte: „Vezmi tuto barvu, vylaď ji a pak mi dej výsledek. Existují dva způsoby, jak upravit barvu: absolutní změny a proporcionální změny. Vypadají podobně v kódu, ale chovají se velmi odlišně, jakmile začnete vyměňovat základní barvy. Pochopení tohoto rozdílu je to, co se může pomocí relativní barvy proměnit v systém. /* Barva základu */ --nadace: #5accd6;
Například hodnota světlosti mé základní barvy je 0,7837, zatímco tmavší verze má hodnotu 0,5837. Pro výpočet rozdílu odečítám nižší hodnotu od vyšší a výsledek aplikuji pomocí funkce calc(): --nadace-tmavá: oklch(z var(--nadace) calc(1 - 0,20) c h);
Pro dosažení světlejší barvy přidávám místo toho rozdíl: --založení-světlo: oklch(z var(--nadace) calc(1 + 0,10) c h);
Chromaúpravy probíhají stejným procesem. Abych snížil intenzitu mé základní barvy z 0,1035 na 0,0035, odečítám jednu hodnotu od druhé: oklch(z var(--nadace) l vypočteno (c - 0,10) h);
Abych vytvořil paletu odstínů, vypočítám rozdíl mezi hodnotou odstínu mé základní barvy (200) a mým novým odstínem (260): oklch(z var(--nadace) lc vypočteno (h + 60));
Ty výpočty jsou absolutní. Když odečítám pevnou částku, v podstatě říkám: "Vždy odečtěte tolik." Totéž platí při přidávání pevných hodnot: calc(c – 0,10) calc(c + 0,10)
Obtížným způsobem jsem poznal limity tohoto přístupu. Když jsem se spoléhal na odečítání pevných hodnot sytosti, barvy se zhroutily směrem k šedé, jakmile jsem změnil základ. Paleta, která fungovala pro jednu barvu, se rozpadla na jinou. Násobení se chová jinak. Když násobím barevnost, říkám prohlížeči: "Snižte intenzitu této barvy o poměr." Vztah mezi barvami zůstává nedotčen, i když se základ změní: calc(c * 0,10)
My Move It, Scale It, Rotate It Rules
Posunout lehkost (přidat nebo odečíst), Stupnice sytosti (násobení), Otočit odstín (přidat nebo odečíst stupně).
Změním barevnost, protože chci, aby změny intenzity zůstaly úměrné základní barvě. Vztahy odstínů jsou rotační, takže násobení odstínu nemá smysl. Lehkost je vnímavá a absolutní – její násobení často vede k podivným výsledkům.
Od jedné barvy k celému tématu Relativní barva mi umožňuje definovat základní barvu a generovat z ní každou další barvu, kterou potřebuji – výplně, tahy, přechody, stíny. V tomto okamžiku barva přestává být paletou a začíná být systémem. Ilustrace SVG mají tendenci opakovaně používat stejný počet barev pro výplně, tahy a přechody. Relativní barva vám umožňuje definovat tyto vztahy jednou a znovu je použít všude – podobně jako animátoři znovu používali pozadí k vytváření nových scén.
Jednou změňte základní barvu a každá odvozená barva se automaticky aktualizuje, aniž byste museli cokoliv ručně přepočítávat. Kromě animované grafiky bych mohl použít stejný přístup k definování barev pro stavy interaktivních prvků, jako jsou tlačítka a odkazy. Základní barva, kterou jsem použil ve svém Toon Title „Lullabye-Bye Bear“ je azurově vypadající modrá. Pozadí je radiální přechod mezi mou nadací a tmavší verzí.
Abych vytvořil alternativní verze se zcela odlišnými náladami, stačí změnit základní barvu: --nadace: #5accd6; --grad-end: var(--fundation); --grad-start: oklch(z var(--fundation) calc(l - 0,2357) calc(c* 0,833) h);
Abych svázal tyto uživatelské vlastnosti s mým přechodem SVG bez duplikace hodnot barev, nahradil jsem pevně zakódované hodnoty stop-color vloženými styly:
Dále jsem potřeboval zajistit, aby můj Toon Text vždy kontrastoval s jakoukoli základní barvou, kterou si zvolím. Otočení odstínu o 180 stupňů vytváří doplňkovou barvu, která jistě praská – ale může nepříjemně vibrovat: .text-light { fill: oklch(z var(--fundation) lc vypočteno (h + 180)); }
Posun o 90° vytváří živou sekundární barvu, aniž by se plně doplňoval: .text-light { fill: oklch(z var(--fundation) lc calc(h - 90)); }
Moje rekreace Quick Draw McGraw's Toon Title „El Kabong“ z roku 1959 používá stejné techniky, ale s pestřejší paletou. Mezi základní barvou a tmavším odstínem je například další radiální přechod.
Budova a strom v pozadí jsou prostě různé odstíny stejné základní barvy. Pro tyto cesty jsem potřeboval dvě další barvy výplně: .bg-mid { výplň: oklch(z var(--základ) calc(l - 0,04) calc(c* 0,91) h); }
.bg-dark { výplň: oklch(z var(--základ) calc(l - 0,12) calc(c* 0,64) h); }
Když se základy začnou pohybovat Doposud bylo vše, co jsem ukázal, statické. I když někdo použije výběr barvy ke změně základní barvy, tato změna nastane okamžitě. Ale animovaná grafika málokdy stojí na místě – vodítko je v názvu. Pokud je tedy barva součástí systému, není důvod, aby nemohla být animována. Abych animoval základní barvu, musím ji nejprve rozdělit na její OKLCH kanály— světlost, sytost a odstín. Je tu však důležitý krok navíc: Potřebuji tyto hodnoty zaregistrovat jako zadané uživatelské vlastnosti. Ale co to znamená? Ve výchozím nastavení prohlížeč neví, zda hodnota vlastní vlastnosti CSS představuje barvu, délku, číslo nebo něco úplně jiného. To často znamená, že je nelze během animace plynule interpolovat a přeskakovat z jedné hodnoty na druhou. Registrace vlastní vlastnosti sdělí prohlížeči, jaký typ hodnoty představuje a jak se má chovat v průběhu času. V tomto případě chci, aby prohlížeč zacházel s mými barevnými kanály jako s čísly, aby mohly být plynule animovány. @property --f-l { syntaxe: "<číslo>"; dědí: pravda; počáteční-hodnota: 0,40; }
@property --f-c { syntaxe: "<číslo>"; dědí: pravda; počáteční-hodnota: 0,11; }
@property --f-h { syntaxe: "<číslo>"; dědí: pravda; počáteční hodnota: 305; }
Po zaregistrování se tyto uživatelské vlastnosti chovají jako nativní CSS. Prohlížeč je může interpolovat snímek po snímku. Poté znovu vytvořím základní barvu z těchto kanálů: --zaklad: oklch(var(--f-l) var(--f-c) var(--f-h));
Díky tomu se základní barva stane animovatelnou, stejně jako jakákoli jiná číselná hodnota. Zde je jednoduchá animace „dýchání“, která v průběhu času jemně posouvá lehkost: @klíčové snímky dýchají { 0 %, 100 % {-f-l: 0,36; } 50 % {-f-l: 0,46; } }
.toon-title { animace: nádech 10s nekonečno-in-out; }
Protože každá další barva ve výplních, přechodech a tahech je odvozena od --foundation, všechny se animují společně a nic není třeba aktualizovat ručně. Jedna animovaná barva, mnoho efektů Na začátku tohoto procesu jsem přemýšlel, zda by relativní hodnoty barev CSS mohly nabídnout více možností a zároveň je zjednodušit na implementaci. Nedávno jsem na kontaktní stránku svého webu přidal pozadí nového zlatého dolu a první iterace zahrnovala olejové lampy, které svítí a houpají se.
Chtěl jsem prozkoumat, jak by animace relativních barev CSS mohla učinit interiér dolu realističtějším tím, že jej zabarvíme barvami z lamp. Chtěl jsem, aby ovlivňovaly svět kolem sebe, jako to dělá skutečné světlo. Takže místo animace více barev jsem postavil malý osvětlovací systém, který animuje pouze jednu barvu.
Mým prvním úkolem bylo umístit překryvnou vrstvu mezi pozadí a lampy:
Použil jsem mix-blend-mode: color, protože to zabarví to, co je pod ním, a zároveň zachová základní jas. Protože chci, aby byla překryvná vrstva viditelná pouze při zapnutých animacích, přihlásil jsem se k překrytí: .svg-mine #overlay { displej: žádný; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { displej: blok; krytí: 0,5; } }
Překrytí bylo na místě, ale ještě nebylo připojeno k lampám. Potřeboval jsem zdroj světla. Moje lampy jsou jednoduché a každá obsahuje kruhový prvek, který jsem rozmazal filtrem. Filtr vytváří velmi jemné rozostření po celém kruhu.
Namísto samostatné animace překryvu a lampy animuji jeden barevný žeton „plamene“ a odvozuji z něj vše ostatní. Nejprve registruji tři zadané uživatelské vlastnosti pro kanály OKLCH: @property --fl-l { syntaxe: "<číslo>"; dědí: pravda; počáteční hodnota: 0,86; } @property --fl-c { syntaxe: "<číslo>"; dědí: pravda; počáteční-hodnota: 0,12; } @property --fl-h { syntaxe: "<číslo>"; dědí: pravda; počáteční hodnota: 95; }
Animoval jsem tyto kanály a záměrně jsem posouval několik snímků směrem k oranžové, takže blikání jasně čte jako světlo ohně:
@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-1: 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-1: 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-1: 0,80; --fl-c: 0,17; --fl-h: 74; } }
Potom jsem tuto animaci upravil na SVG, takže sdílené proměnné jsou dostupné jak pro lampy, tak pro mé překrytí:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animace: plamen 3,6s nekonečně lineární; izolace: izolovat;
/* Vytvořte barvu plamene z animovaných kanálů */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Barva lampy odvozená od plamene */ --lamp-core: oklch(from var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Překryvný odstín odvozený ze stejného plamene */ --overlay-tint: oklch(z var(--flame) calc(l + 0,06) calc(c* 0,65) calc(h - 10)); } }
Nakonec jsem tyto odvozené barvy aplikoval na zářící lampy a překrytí, které ovlivň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); krytí: 0,5; } }
Když se plamen posune směrem k oranžové, lampy se zahřejí a scéna se zahřeje s nimi. Když plamen vychladne, vše se usadí. Nejlepší na tom je, že se nic nepíše ručně. Pokud změním základní barvu nebo upravím rozsah animace plamene, celý systém osvětlení se aktualizuje současně. Konečný výsledek můžete vidět na mém webu. Znovu použít, znovu použít, znovu navštívit Tito animátoři Hanna-Barbera byli nuceni změnit použití prvků z nutnosti, ale já znovu používám barvy, protože díky nim je moje práce konzistentnější a snadněji se udržuje. Relativní hodnoty barev CSS mi umožňují:
Definujte jednu základní barvu, Popište, jak s tím souvisí ostatní barvy, Znovu použijte tyto vztahy všude a Oživte systém změnou jedné hodnoty.
Relativní barva nejen usnadňuje vytváření motivů. Podporuje způsob myšlení, kde je barva, stejně jako pohyb, záměrná – a kde změna jedné hodnoty může změnit celou scénu, aniž by se přepisovalo dílo pod ní.
