Нядаўна я абнавіў аніміраваную графіку на сваім вэб-сайце новай тэмай і групай наватарскіх персанажаў, прымяніўшы на практыцы мноства метадаў, якімі я падзяліўся ў гэтай серыі. Некаторыя з маіх анімацый мяняюць знешні выгляд, калі хтосьці з імі ўзаемадзейнічае або ў розны час сутак.
Колеры графікі на старонках майго блога мяняюцца з раніцы да вечара кожны дзень. Акрамя таго, ёсць рэжым снегу, які дадае халодныя колеры і зімовую тэму дзякуючы накладанню і рэжыму змешвання.
Працуючы над гэтым, я пачаў задавацца пытаннем, ці могуць адносныя значэнні колеру CSS даць мне большы кантроль, а таксама спрасціць працэс. Заўвага: у гэтым уроку я спынюся на адносных значэннях колеру і каляровай прасторы OKLCH для тэматычнай графікі і анімацыі. Калі вы хочаце паглыбіцца ў адносны колер, Ахмад Шадзід стварыў выдатны інтэрактыўны даведнік. Што тычыцца каляровых прастораў, гамы і OKLCH, пра іх пісаў наш уласны Джэф Грэм.
Паўторнае выкарыстанне элементаў было ключавым. Фоны выкарыстоўваліся паўторна, калі гэта было магчыма, з павелічэннем і накладкамі, якія дапамагалі ствараць новыя сцэны з таго ж твора. Гэта нарадзілася па неабходнасці, але таксама заахвоціла думаць з пункту гледжання серыі, а не асобных сцэн. Праблема з ручным абнаўленнем каляровых палітраў Давайце адразу да майго выкліку. У Toon Titles, падобных на гэты — заснаваным на эпізодзе Yogi Bear Show 1959 года «Lullabye-Bye Bear» — і ў маёй працы ў цэлым палітры абмежаваныя некалькімі выбранымі колерамі.
Я ствараю адценні і адценні з таго, што я называю сваім «базавым» колерам, каб пашырыць палітру, не дадаючы адценняў.
У Sketch я працую ў каляровай прасторы HSL, таму гэты працэс прадугледжвае павелічэнне або памяншэнне значэння асветленасці майго базавага колеру. Шчыра кажучы, гэта не складаная задача, але выбар іншага колеру асновы патрабуе стварэння цалкам новага набору адценняў і адценняў. Рабіць гэта ўручную, зноў і зноў, хутка становіцца працаёмкім.
Я згадваў HSL — H (адценне), S (насычанасць) і L (святлота) — каляровая прастора, але гэта толькі адзін з некалькіх спосабаў апісання колеру. RGB — R (чырвоны), G (зялёны), B (сіні) — напэўна, самы вядомы, прынамсі ў шаснаццатковай форме. Ёсць таксама LAB — L (лёгкасць), A (зялёна-чырвоны), B (сіне-жоўты) — і больш новая, але цяпер шырока падтрымліваемая мадэль LCH — L (лёгкасць), C (насычанасць), H (адценне) — у форме OKLCH. З дапамогай LCH — у прыватнасці OKLCH у CSS — я магу наладзіць значэнне асветленасці майго базавага колеру.
Ці я магу змяніць яго каляровасць. Насычанасць LCH і HSL апісваюць інтэнсіўнасць або насычанасць колеру, але робяць гэта па-рознаму. LCH дае мне больш шырокі дыяпазон і больш прадказальнае змешванне колераў.
Я таксама магу змяніць адценне, каб стварыць палітру колераў з аднолькавымі значэннямі яркасці і каляровасці. І ў HSL, і ў LCH спектр адценняў пачынаецца з чырвонага, пераходзіць праз зялёны і сіні і вяртаецца да чырвонага.
Чаму OKLCH змяніла маё стаўленне да колеру Падтрымка браўзэрам каляровай прасторы OKLCH цяпер шырока распаўсюджана, нават калі інструменты дызайну - у тым ліку Sketch - не дагналі. На шчасце, гэта не павінна перашкодзіць вам выкарыстоўваць OKLCH. Браўзеры з задавальненнем пераўтвораць для вас значэнні Hex, HSL, LAB і RGB у OKLCH. Вы можаце вызначыць карыстальніцкую ўласцівасць CSS з базавым колерам у любой прасторы, уключаючы Hex: /* Колер асновы */ --фундамент: #5accd6;
Любыя колеры, атрыманыя з яго, будуць аўтаматычна ператвораны ў OKLCH: --foundation-light: oklch(ад var(--foundation) [...]; } --foundation-mid: oklch(ад var(--foundation) [...]; } --foundation-dark: oklch(ад var(--foundation) [...]; }
Адносны колер як сістэма дызайну Думайце пра адносны колер як пра тое, што вы кажаце: «Вазьміце гэты колер, наладзьце яго, а потым дайце мне вынік». Ёсць два спосабы рэгулявання колеру: абсалютныя змены і прапарцыйныя змены. Яны падобныя ў кодзе, але паводзяць сябе зусім па-рознаму, як толькі вы пачынаеце мяняць колеры асновы. Разуменне гэтай розніцы можа ператварыць адносны колер у сістэму. /* Колер асновы */ --фундамент: #5accd6;
Напрыклад, значэнне яркасці майго асновы складае 0,7837, у той час як больш цёмная версія мае значэнне 0,5837. Каб вылічыць розніцу, я адымаю меншае значэнне з большага і прымяняю вынік з дапамогай функцыі calc(): --fundation-dark: oklch(ад var(--foundation) разл.(l - 0,20) c h);
Каб атрымаць больш светлы колер, я замест гэтага дадаю розніцу: --fundation-light: oklch(ад var(--foundation) разл.(l + 0,10) c h);
каляровасцькарэкціроўкі выконваюць той жа працэс. Каб паменшыць інтэнсіўнасць асновы з 0,1035 да 0,0035, я адымаю адно значэнне з другога: oklch(ад var(--foundation) l разл.(с - 0,10) ч);
Каб стварыць палітру адценняў, я вылічваю розніцу паміж значэннем адцення майго базавага колеру (200) і маім новым адценнем (260): oklch(ад var(--foundation) l c разл.(h + 60));
Гэтыя разлікі абсалютныя. Калі я аднімаю фіксаваную суму, я фактычна кажу: «Заўсёды аднімай столькі». Тое ж самае прымяняецца пры даданні фіксаваных значэнняў: разлік (c - 0,10) вылічэнне (c + 0,10)
Я спазнаў межы гэтага падыходу на цяжкім шляху. Калі я разлічваў на адніманне фіксаваных значэнняў каляровасці, колеры згортваліся да шэрага, як толькі я мяняў аснову. Палітра, якая працавала для аднаго колеру, развалілася для іншага. Множанне паводзіць сябе інакш. Калі я памнажаю каляровасць, я кажу браўзеру: «Паменшыце інтэнсіўнасць гэтага колеру ў прапорцыі». Адносіны паміж колерамі застаюцца некранутымі, нават калі аснова мяняецца: вылічэнне (c * 0,10)
Мае правілы Move It, Scale It, Rotate It
Рухайцеся лёгкасцю (дадайце або адніміце), Маштаб каляровасці (множыць), Паварот адцення (даданне або адніманне градусаў).
Я маштабую каляровасць, таму што хачу, каб змены інтэнсіўнасці заставаліся прапарцыйнымі базаваму колеру. Адносіны адценняў круцяцца, таму памнажэнне адценняў не мае сэнсу. Лёгкасць адчувальная і абсалютная - яе памнажэнне часта дае дзіўныя вынікі.
Ад аднаго колеру да цэлай тэмы Адносны колер дазваляе мне вызначыць базавы колер і стварыць з яго любы іншы колер, які мне патрэбны — заліўкі, штрыхі, градыентныя прыпынкі, цені. У гэты момант колер перастае быць палітрай і пачынае быць сістэмай. Ілюстрацыі SVG маюць тэндэнцыю да паўторнага выкарыстання адных і тых жа колераў у заліўках, абводках і градыентах. Адносны колер дазваляе вам вызначыць гэтыя ўзаемаадносіны адзін раз і выкарыстоўваць іх паўсюль - падобна таму, як аніматары паўторна выкарыстоўвалі фон для стварэння новых сцэн.
Зменіце асноўны колер адзін раз, і кожны атрыманы колер абновіцца аўтаматычна, без пераразліку ўручную. Па-за межамі аніміраванай графікі я мог бы выкарыстаць гэты ж падыход для вызначэння колераў для станаў інтэрактыўных элементаў, такіх як кнопкі і спасылкі. Колер асновы, які я выкарыстаў у назве мультфільма "Lullabye-Bye Bear", - блакітна-блакітны. Фон - гэта радыяльны градыент паміж маёй асновай і больш цёмнай версіяй.
Каб стварыць альтэрнатыўныя версіі з зусім рознымі настроямі, мне трэба толькі змяніць колер асновы: --фундамент: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(ад var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Каб звязаць гэтыя карыстальніцкія ўласцівасці з маім градыентам SVG без дубліравання значэнняў колеру, я замяніў жорстка закадзіраваныя значэнні стоп-колераў на ўбудаваныя стылі:
Далей мне трэба было пераканацца, што мой Toon Text заўсёды кантрастуе з любым колерам асновы, які я выберу. Паварот адцення на 180 градусаў стварае дадатковы колер, які, безумоўна, выскоквае, але можа непрыемна вібраваць: .text-light { запаўненне: oklch(ад var(--foundation) l c разл.(h + 180)); }
Зрух на 90° стварае яркі другасны колер, не будучы цалкам дадатковым: .text-light { запаўненне: oklch(ад var(--foundation) l c разл.(h - 90)); }
У маёй рэканструкцыі мультфільма Quick Draw McGraw 1959 года «El Kabong» выкарыстоўваюцца тыя ж метады, але з больш разнастайнай палітрай. Напрыклад, ёсць іншы радыяльны градыент паміж колерам асновы і больш цёмным адценнем.
Будынак і дрэва на заднім плане - гэта проста розныя адценні аднаго і таго ж асноўнага колеру. Для гэтых шляхоў мне спатрэбіліся два дадатковыя колеры залівання: .bg-сярэдзіна { запаўненне: oklch(ад var(--foundation) calc(l - 0,04) calc(c * 0,91) h); }
.bg-цёмны { запаўненне: oklch(ад var(--foundation) calc(l - 0,12) calc(c * 0,64) h); }
Калі асновы пачынаюць рухацца Да гэтага часу ўсё, што я паказаў, было статычным. Нават калі хтосьці выкарыстоўвае выбар колеру, каб змяніць колер асновы, гэта змяненне адбываецца імгненна. Але аніміраваная графіка рэдка стаіць на месцы - падказка ў назве. Такім чынам, калі колер з'яўляецца часткай сістэмы, няма прычын, каб ён таксама не мог анімаваць. Каб ажывіць асноўны колер, мне спачатку трэба падзяліць яго на каналы OKLCH— светлата, каляровасць і адценне. Але ёсць важны дадатковы крок: мне трэба зарэгістраваць гэтыя значэнні як уведзеныя карыстальніцкія ўласцівасці. Але што гэта значыць? Па змаўчанні браўзер не ведае, ці ўяўляе значэнне карыстальніцкай уласцівасці CSS колер, даўжыню, лічбу ці нешта зусім іншае. Гэта часта азначае, што яны не могуць быць плаўна інтэрпаляваны падчас анімацыі і пераходзяць ад аднаго значэння да наступнага. Рэгістрацыя карыстальніцкай уласцівасці паведамляе браўзеру тып значэння, якое яно прадстаўляе, і тое, як яно павінна паводзіць сябе з цягам часу. У гэтым выпадку я хачу, каб браўзер разглядаў мае каляровыя каналы як лічбы, каб іх можна было плаўна анімаваць. @property --f-l { сінтаксіс: "<лік>"; успадкоўвае: true; пачатковае значэнне: 0,40; }
@property --f-c { сінтаксіс: "<лік>"; успадкоўвае: true; пачатковае значэнне: 0,11; }
@property --f-h { сінтаксіс: "<лік>"; успадкоўвае: true; пачатковае значэнне: 305; }
Пасля рэгістрацыі гэтыя карыстальніцкія ўласцівасці паводзяць сябе як уласны CSS. Браўзэр можа інтэрпаляваць іх пакадрава. Затым я аднаўляю асноўны колер з гэтых каналаў: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Гэта робіць асноўны колер анімацыйным, як і любое іншае лікавае значэнне. Вось простая "дыхальная" анімацыя, якая мякка змяняе лёгкасць з часам: @keyframes дыхаць { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { анімацыя: дыхаць 10s лёгкасць у-выхад бясконцы; }
Паколькі ўсе астатнія колеры ў заліўках, градыентах і абводках паходзяць з --foundation, усе яны анімуюць разам, і нічога не трэба абнаўляць уручную. Адзін анімаваны колер, мноства эфектаў У пачатку гэтага працэсу я задаўся пытаннем, ці могуць адносныя значэнні колераў CSS прапанаваць больш магчымасцей, а таксама зрабіць іх больш простымі ў рэалізацыі. Нядаўна я дадаў новы фон залатога рудніка на старонку кантактаў майго вэб-сайта, і першая ітэрацыя ўключала алейныя лямпы, якія свецяцца і хістаюцца.
Я хацеў даследаваць, як анімацыя адносных колераў CSS можа зрабіць інтэр'ер шахты больш рэалістычным, адцеўшы яго колерамі ад лямпаў. Я хацеў, каб яны ўплывалі на навакольны свет, як гэта робіць сапраўднае святло. Такім чынам, замест анімацыі некалькіх колераў я стварыў малюсенькую сістэму асвятлення, якая анімуе толькі адзін колер.
Маёй першай задачай было зрабіць пласт накладання паміж фонам і лямпамі: <шлях id="накладанне" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
Я выкарыстаў mix-blend-mode: color, таму што ён адцяняе тое, што знаходзіцца пад ім, захоўваючы асноўную яркасць. Паколькі я хачу, каб накладанне было бачным толькі пры ўключанай анімацыі, я дазволіў накладанне: .svg-mine #overlay { дысплей: няма; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { дысплей: блок; непразрыстасць: 0,5; } }
Накладка была на месцы, але яшчэ не падключана да лямпаў. Мне патрэбна была крыніца святла. Мае лямпы простыя, і кожная з іх змяшчае элемент круга, які я размыла з дапамогай фільтра. Фільтр стварае вельмі мяккае размыццё па ўсім крузе.
Замест таго, каб анімаваць накладанне і лямпы паасобку, я анімірую адзін токен колеру «полымя» і атрымліваю ўсё астатняе з гэтага. Спачатку я рэгіструю тры ўведзеныя карыстальніцкія ўласцівасці для каналаў OKLCH: @property --fl-l { сінтаксіс: "<лік>"; успадкоўвае: true; пачатковае значэнне: 0,86; } @property --fl-c { сінтаксіс: "<лік>"; успадкоўвае: true; пачатковае значэнне: 0,12; } @property --fl-h { сінтаксіс: "<лік>"; успадкоўвае: true; пачатковае значэнне: 95; }
Я анімаваў гэтыя каналы, наўмысна пасунуўшы некалькі кадраў да аранжавага колеру, каб мігценне чыталася выразна як святло вогнішча:
@keyframes полымя { 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; } }
Затым я змясціў гэтую анімацыю ў SVG, таму агульныя зменныя даступныя як для лямпаў, так і для майго накладання:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { анімацыя: полымя 3.6s бясконцая лінейная; ізаляцыя: ізаляваць;
/* Стварыце колер полымя з аніміраваных каналаў */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Колер лямпы, атрыманы ад полымя */ --lamp-core: oklch(from var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Адценне накладання, атрыманае ад таго ж полымя */ --overlay-tint: oklch(ад var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Нарэшце, я прымяніў гэтыя атрыманыя колеры да свецяцца лямпаў і накладання, на якое яны ўплываюць: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > круг, .svg-mine[data-animations=on] #mine-lamp-2 > круг { fill: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { дысплей: блок; fill: var(--overlay-tint); непразрыстасць: 0,5; } }
Калі полымя ссоўваецца ў бок аранжавага колеру, лямпы награваюцца, а разам з імі і сцэна. Калі полымя астыне, усё асядзе разам. Самае лепшае, што нічога не пішацца ўручную. Калі я змяняю колер асновы або наладжваю дыяпазоны анімацыі полымя, уся сістэма асвятлення абнаўляецца адначасова. Вы можаце ўбачыць канчатковы вынік на маім сайце. Паўторнае выкарыстанне, перапрафіляванне, перагляд Тыя аніматары Hanna-Barbera былі вымушаныя перапрафіляваць элементы па неабходнасці, але я паўторна выкарыстоўваю колеры, таму што гэта робіць маю працу больш паслядоўнай і прасцей у абслугоўванні. Адносныя значэнні колеру CSS дазваляюць:
Вызначце адзіны колер асновы, Апішыце, як іншыя колеры звязаны з ім, Паўторна выкарыстоўвайце гэтыя адносіны ўсюды і Ажывіце сістэму, змяніўшы адно значэнне.
Адносны колер не толькі палягчае тэматыку. Гэта заахвочвае спосаб мыслення, дзе колер, як і рух, з'яўляецца наўмысным - і дзе змяненне аднаго значэння можа трансфармаваць усю сцэну без перапісвання твора пад ім.
