Наскоро обнових анимираните графики на моя уебсайт с нова тема и група пионерски герои, прилагайки на практика много от техниките, които споделих в тази серия. Няколко от моите анимации променят външния си вид, когато някой взаимодейства с тях или по различно време на деня.
Цветовете в графиката на страниците на моя блог се променят от сутрин до вечер всеки ден. След това има режим на сняг, който добавя студени цветове и зимна тема, благодарение на насложен слой и режим на смесване.
Докато работех върху това, започнах да се чудя дали CSS относителните цветови стойности могат да ми дадат повече контрол, като същевременно опростят процеса. Забележка: В този урок ще се съсредоточа върху относителните цветови стойности и цветовото пространство OKLCH за тематизиране на графики и анимации. Ако искате да се потопите дълбоко в относителните цветове, Ahmad Shadeed създаде превъзходно интерактивно ръководство. Що се отнася до цветовите пространства, гамите и 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(): --фон дьо тен-тъмен: oklch(от var(--основа) изчислено (l - 0.20) c h);
За да постигна по-светъл цвят, вместо това добавям разликата: --основна светлина: oklch(от var(--основа) изчислено (l + 0.10) c h);
Chromaкорекциите следват същия процес. За да намаля интензитета на моя фон дьо тен цвят от 0,1035 на 0,0035, изваждам едната стойност от другата: oklch(от var(--основа) l изчислено (с - 0.10) h);
За да създам палитра от нюанси, изчислявам разликата между стойността на нюанса на моя основен цвят (200) и моя нов нюанс (260): oklch(от var(--основа) lc изчислено (h + 60));
Тези изчисления са абсолютни. Когато извадя фиксирана сума, всъщност казвам: „Винаги изваждайте толкова.“ Същото важи и при добавяне на фиксирани стойности: изчислено (с - 0,10) изчислено (c + 0,10)
Научих границите на този подход по трудния начин. Когато разчитах на изваждане на фиксирани стойности на наситеност, цветовете се свиваха към сиво веднага щом промених основата. Палитра, която работеше за един цвят, се разпадна за друг. Умножението се държи по различен начин. Когато умножавам наситеността, казвам на браузъра: „Намали интензитета на този цвят с определена пропорция.“ Връзката между цветовете остава непокътната, дори когато основата се промени: изчисление (c * 0,10)
Моите правила за преместване, мащабиране, завъртане
Преместване на лекота (добавяне или изваждане), Мащаб на цветност (умножение), Завъртане на нюанса (добавяне или изваждане на градуси).
Мащабирам цветността, защото искам промените в интензитета да останат пропорционални на основния цвят. Отношенията на нюанса са ротационни, така че умножаването на нюанса няма смисъл. Лекотата е перцептивна и абсолютна - умножаването й често води до странни резултати.
От един цвят до цяла тема Относителният цвят ми позволява да дефинирам основен цвят и да генерирам всеки друг цвят, от който се нуждая - запълвания, щрихи, спирания на градиента, сенки - от него. В този момент цветът спира да бъде палитра и започва да бъде система. SVG илюстрациите са склонни да използват повторно същите няколко цвята в запълвания, щрихи и градиенти. Относителният цвят ви позволява да дефинирате тези взаимоотношения веднъж и да ги използвате повторно навсякъде - подобно на това, че аниматорите използват повторно фонове, за да създават нови сцени.
Променете основния цвят веднъж и всеки получен цвят се актуализира автоматично, без да преизчислява нищо на ръка. Извън анимираните графики, бих могъл да използвам същия подход, за да дефинирам цветове за състоянията на интерактивни елементи като бутони и връзки. Цветът на фон дьо тена, който използвах в моето заглавие „Lullabye-Bye Bear“ Toon, е синьо-син цвят. Фонът е радиален градиент между моята основа и по-тъмна версия.
За да създам алтернативни версии с напълно различни настроения, трябва само да сменя цвета на основата: --основа: #5accd6; --grad-end: var(--fundation); --grad-start: oklch(от var(--fundation) calc(l - 0.2357) calc(c * 0.833) h);
За да свържа тези персонализирани свойства към моя SVG градиент, без да дублирам цветови стойности, замених твърдо кодирани стойности на стоп-цвят с вградени стилове:
След това трябваше да се уверя, че моят Toon Text винаги контрастира с какъвто и цвят на основата да избера. Завъртането на нюанса на 180 градуса създава допълнителен цвят, който със сигурност изскача, но може да вибрира неудобно: .text-light { попълване: oklch(от var(--fundation) lc изчислено (h + 180)); }
Преместването на 90° създава ярък вторичен цвят, без да е напълно допълващ: .text-light { попълване: oklch(от var(--fundation) lc изчислено (h - 90)); }
Моето пресъздаване на заглавието „El Kabong“ на Quick Draw McGraw от 1959 г. използва същите техники, но с по-разнообразна палитра. Например, има друг радиален градиент между цвета на основата и по-тъмен нюанс.
Сградата и дървото на заден план са просто различни нюанси на един и същ цвят на основата. За тези пътища имах нужда от два допълнителни цвята за запълване: .bg-среда { попълване: oklch(от var(--fundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-dark { попълване: oklch(от var(--fundation) 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. Браузърът може да ги интерполира кадър по кадър. След това възстановявам основния цвят от тези канали: --основа: 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: цвят" />
Използвах 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));
/* Цвят на лампата, получен от пламък */ --ядро на лампата: oklch(от 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 > кръг { запълване: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { дисплей: блок; запълване: var(--overlay-tint); непрозрачност: 0,5; } }
Когато пламъкът се измести към оранжево, лампите се затоплят и сцената се затопля с тях. Когато пламъкът изстине, всичко се утаява заедно. Най-хубавото е, че нищо не се пише ръчно. Ако променя цвета на основата или променя диапазоните на анимацията на пламъка, цялата система за осветление се актуализира едновременно. Можете да видите крайния резултат на моя уебсайт. Повторно използване, повторно предназначение, преразглеждане Тези аниматори на Хана-Барбера бяха принудени да променят предназначението на елементите поради необходимост, но аз използвам повторно цветовете, защото това прави работата ми по-последователна и по-лесна за поддръжка. CSS относителните цветови стойности ми позволяват да:
Определете един цвят на основата, Опишете как другите цветове се отнасят към него, Използвайте повторно тези взаимоотношения навсякъде и Анимирайте системата, като промените една стойност.
Относителният цвят не само улеснява тематизирането. Той насърчава начин на мислене, при който цветът, подобно на движението, е умишлен - и където промяната на една стойност може да трансформира цяла сцена, без да пренаписва работата под нея.
