Недавно сам освежио анимирану графику на својој веб страници новом темом и групом пионирских ликова, примењујући у пракси многе технике које сам поделио у овој серији. Неколико мојих анимација мења изглед када неко ступи у интеракцију са њима или у различито доба дана.
Боје на графици на врху мојих страница блога се мењају од јутра до мрака сваког дана. Затим, ту је режим снега, који додаје хладне боје и зимску тему, захваљујући слоју преклапања и режиму мешања.
Док сам радио на овоме, почео сам да се питам да ли ЦСС релативне вредности боја могу да ми дају већу контролу, а истовремено поједностављују процес. Напомена: У овом водичу, фокусираћу се на релативне вредности боја и ОКЛЦХ простор боја за графику и анимације. Ако желите да зароните дубоко у релативне боје, Ахмад Схадеед је направио одличан интерактивни водич. Што се тиче простора боја, гамута и ОКЛЦХ-а, наш Геофф Грахам је писао о њима.
Поновљена употреба елемената је била кључна. Позадине су поново коришћене кад год је то било могуће, са зумирањем и преклопима који су помогли да се конструишу нове сцене од истог уметничког дела. Настао је из нужде, али је такође подстакао размишљање у смислу серија, а не појединачних сцена. Проблем са ручним ажурирањем палета боја Хајдемо директно на мој изазов. У насловима Тоон као што је овај — заснован на епизоди Иоги Беар Схов-а из 1959. „Луллабие-Бие Беар“ — и уопште у мом раду, палете су ограничене на неколико одабраних боја.
Креирам нијансе и нијансе од онога што називам својом „темељном“ бојом да проширим палету без додавања више нијанси.
У Скетцх-у радим у ХСЛ простору боја, тако да овај процес укључује повећање или смањење вредности светлости моје основне боје. Искрено, то није тежак задатак - али избор друге боје основе захтева стварање потпуно новог скупа нијанси и нијанси. Радити то ручно, изнова и изнова, брзо постаје напорно.
Споменуо сам ХСЛ — Х (нијанса), С (засићеност) и Л (светлина) — простор боја, али то је само један од неколико начина да се опише боја. РГБ — Р (црвено), Г (зелено), Б (плаво) — је вероватно најпознатији, барем у свом Хек облику. Ту су и ЛАБ — Л (светлина), А (зелено-црвена), Б (плаво-жута) — и новији, али сада широко подржан ЛЦХ — Л (светлина), Ц (хрома), Х (нијанса) — модел у свом ОКЛЦХ облику. Са ЛЦХ-ом — посебно ОКЛЦХ-ом у ЦСС-у — могу да подесим вредност светлости своје боје подлоге.
Или могу да променим њену боју. ЛЦХ хрома и ХСЛ засићеност описују интензитет или богатство боје, али то чине на различите начине. ЛЦХ ми даје шири распон и предвидљивије мешање између боја.
Такође могу да променим нијансу да бих направио палету боја које деле исте вредности светлости и боје. И код ХСЛ и ЛЦХ, спектар нијанси почиње црвеном, креће се кроз зелену и плаву и враћа се у црвену.
Зашто је ОКЛЦХ променио начин на који размишљам о боји Подршка претраживача за ОКЛЦХ простор боја је сада широко распрострањена, чак и ако алати за дизајн — укључујући Скетцх — нису успели. На срећу, то не би требало да вас спречи да користите ОКЛЦХ. Претраживачи ће са задовољством конвертовати Хек, ХСЛ, ЛАБ и РГБ вредности у ОКЛЦХ уместо вас. Можете дефинисати ЦСС прилагођено својство са основном бојом у било ком простору, укључујући Хек: /* Основна боја */ --темељ: #5аццд6;
Све боје изведене из њега биће аутоматски конвертоване у ОКЛЦХ: --фоундатион-лигхт: оклцх(од вар(--фоундатион) [...]; } --фоундатион-мид: оклцх(од вар(--фоундатион) [...]; } --фоундатион-дарк: оклцх(од вар(--фоундатион) [...];}
Релативна боја као систем дизајна Замислите релативну боју као да кажете: „Узми ову боју, подеси је, па ми дај резултат. Постоје два начина за подешавање боје: апсолутне промене и пропорционалне промене. Изгледају слично у коду, али се понашају сасвим другачије када почнете да мењате основне боје. Разумевање те разлике је оно што може претворити коришћење релативне боје у систем. /* Основна боја */ --темељ: #5аццд6;
На пример, вредност светлине моје темељне боје је 0,7837, док тамнија верзија има вредност 0,5837. Да бих израчунао разлику, одузимам нижу вредност од веће и примењујем резултат помоћу функције цалц(): -- темељ-тамно: оклцх (од вар(--фоундатион) израчун (л - 0,20) ц х);
Да бих постигао светлију боју, уместо тога додајем разлику: --темељ-светло: оклцх (од вар(--фоундатион) израчун (л + 0,10) ц х);
Цхромаприлагођавања прате исти процес. Да бих смањио интензитет основне боје са 0,1035 на 0,0035, одузимам једну вредност од друге: оклцх (од вар(--фоундатион) л израч (ц - 0,10) х);
Да бих направио палету нијанси, израчунао сам разлику између вредности нијансе моје основне боје (200) и моје нове нијансе (260): оклцх (од вар(--фоундатион) л ц израч (х + 60));
Те калкулације су апсолутне. Када одузмем фиксни износ, заправо кажем: „Увек одузми оволико“. Исто важи и за додавање фиксних вредности: израчун (ц - 0,10) израчун (ц + 0,10)
Научио сам границе овог приступа на тежи начин. Када сам се ослањао на одузимање фиксних вредности боје, боје су се срушиле у сиву чим сам променио основу. Палета која је радила за једну боју распала се за другу. Множење се понаша другачије. Када умножавам хром, кажем претраживачу: „Смањи интензитет ове боје за пропорцију.“ Однос између боја остаје нетакнут, чак и када се темељ промени: израчун (ц * 0,10)
Правила су моји покрети, скалирање, ротирање
Померите лакоћу (додајте или одузмите), Скала хрома (множење), Ротирајте нијансу (додајте или одузмите степене).
Скалирам хромазу јер желим да промене интензитета остану пропорционалне основној боји. Односи нијанси су ротациони, тако да множење нијанси нема смисла. Лакоћа је перцептивна и апсолутна - њено умножавање често даје чудне резултате.
Од једне боје до целе теме Релативна боја ми омогућава да дефинишем основну боју и из ње генеришем сваку другу боју која ми је потребна — испуне, потези, заустављање градијента, сенке. У том тренутку боја престаје да буде палета и почиње да буде систем. СВГ илустрације имају тенденцију да поново користе истих неколико боја у испунама, потезима и градијентима. Релативна боја вам омогућава да дефинишете те односе једном и да их поново користите свуда – слично као што су аниматори поново користили позадину за креирање нових сцена.
Промените боју основе једном, и свака изведена боја се аутоматски ажурира, без ручног прерачунавања. Изван анимиране графике, могао бих да користим исти приступ за дефинисање боја за стања интерактивних елемената као што су дугмад и везе. Основна боја коју сам користио у свом наслову "Луллабие-Бие Беар" Тоон Титле је плава цијан изгледа. Позадина је радијални градијент између моје подлоге и тамније верзије.
Да бих направио алтернативне верзије са потпуно различитим расположењима, само треба да променим боју основе: --темељ: #5аццд6; --град-енд: вар(--темељ); --град-старт: оклцх(од вар(--фоундатион) израч (л - 0,2357) израч (ц * 0,833) х);
Да бих повезао та прилагођена својства са мојим СВГ градијентом без дуплирања вредности боја, заменио сам чврсто кодиране вредности стоп-боја уграђеним стиловима:
<дефс> <радиалГрадиент ид="бг-град" […]> <стоп оффсет="0%" стиле="стоп-цолор: вар(--град-енд);" /> <стоп оффсет="100%" стиле="стоп-цолор: вар(--град-старт);" />
<патх филл="урл(#бг-град)" филл="#5ДЦДД8" д="[...]"/>
Затим, морао сам да осигурам да мој Тоон Тект увек буде у супротности са било којом бојом подлоге коју одаберем. Ротација нијансе од 180 степени производи комплементарну боју која свакако искаче - али може непријатно да вибрира: .тект-лигхт { филл: оклцх(од вар(--фоундатион) л ц израч (х + 180)); }
Померање од 90° производи живописну секундарну боју, а да није потпуно комплементарна: .тект-лигхт { филл: оклцх(од вар(--фоундатион) л ц израчун (х - 90)); }
Моја рекреација Куицк Драв МцГравовог Тоон Титле „Ел Кабонг“ из 1959. користи исте технике, али са разноврснијом палетом. На пример, постоји још један радијални градијент између основне боје и тамније нијансе.
Зграда и дрво у позадини су једноставно различите нијансе исте основне боје. За те стазе, требале су ми две додатне боје попуне: .бг-мид { филл: оклцх(од вар(--фоундатион) израч (л - 0,04) израч (ц * 0,91) х); }
.бг-дарк { филл: оклцх(од вар(--фоундатион) израч (л - 0,12) израч (ц * 0,64) х); }
Када темељи почну да се крећу До сада је све што сам показао било статично. Чак и када неко користи бирач боја да промени основну боју, та промена се дешава одмах. Али анимирана графика ретко стоји - траг је у имену. Дакле, ако је боја део система, нема разлога да и она не може да анимира. Да бих анимирао темељну боју, прво треба да је поделим на њене ОКЛЦХ канале— светлост, хроматика и нијанса. Али постоји важан додатни корак: морам да региструјем те вредности као откуцана прилагођена својства. Али шта то значи? Подразумевано, претраживач не зна да ли вредност прилагођеног својства ЦСС-а представља боју, дужину, број или нешто сасвим друго. То често значи да се не могу глатко интерполирати током анимације и скакати са једне вредности на другу. Регистровање прилагођеног својства говори претраживачу врсту вредности коју представља и како би требало да се понаша током времена. У овом случају, желим да прегледач третира моје канале у боји као бројеве како би се могли глатко анимирати. @проперти --ф-л { синтакса: "<број>"; наслеђује: истинито; почетна вредност: 0,40; }
@проперти --ф-ц { синтакса: "<број>"; наслеђује: истинито; почетна вредност: 0,11; }
@проперти --ф-х { синтакса: "<број>"; наслеђује: истинито; почетна вредност: 305; }
Када се региструју, ова прилагођена својства се понашају као изворни ЦСС. Прегледач може да их интерполира оквир по кадар. Затим поново правим темељну боју из ових канала: --темељ: оклцх(вар(--ф-л) вар(--ф-ц) вар(--ф-х));
Ово чини да основна боја постаје анимирана, баш као и свака друга нумеричка вредност. Ево једноставне анимације „дисања“ која благо помера светлост током времена: @кеифрамес дисање { 0%, 100% { --ф-л: 0,36; } 50% { --ф-л: 0,46; } }
.тоон-титле { анимација: бесконачно дисање 10с лакоћа-у-излаз; }
Пошто је свака друга боја у испунама, градијентима и потезима изведена из --фоундатион-а, све оне анимирају заједно и ништа не треба ручно ажурирати. Једна анимирана боја, много ефеката На почетку овог процеса, питао сам се да ли ЦСС релативне вредности боја могу понудити више могућности, а истовремено их учинити једноставнијим за имплементацију. Недавно сам додао нову позадину рудника злата на контакт страницу моје веб локације, а прва итерација је укључивала уљане лампе које светле и љуљају.
Желео сам да истражим како анимирање ЦСС релативних боја може учинити унутрашњост рудника реалистичнијим нијансирањем бојама из лампи. Желео сам да утичу на свет око себе, као што то чини права светлост. Дакле, уместо да анимирам више боја, направио сам мали систем осветљења који анимира само једну боју.
Мој први задатак је био да поставим слој за прекривање између позадине и мојих лампи: <патх ид="преклапање" филл="вар(--оверлаи-тинт)" [...] стиле="мик-бленд-моде: цолор" />
Користио сам режим мешања: боја јер то нијансира оно што се налази испод, а истовремено чува основну осветљеност. Пошто желим да преклапање буде видљиво само када су анимације укључене, омогућио сам преклапање: .свг-мине #оверлаи { приказ: нема; }
@медиа (преферс-редуцед-мотион: но-преференце) { .свг-мине[дата-аниматионс=он] #оверлаи { дисплеј: блок; непрозирност: 0,5; } }
Преклоп је био на месту, али још није повезан са лампама. Требао ми је извор светлости. Моје лампе су једноставне, а свака садржи елемент круга који сам замутио филтером. Филтер производи веома меко замућење по целом кругу.
<филтер ид="ламп-глов-1" к="-120%" и="-120%" видтх="340%" хеигхт="340%"> <феГауссианБлур ин="СоурцеГрапхиц" стдДевиатион="56"/>
Уместо да анимирам преклоп и лампе одвојено, анимирам један токен боје „пламена“ и из тога изводим све остало. Прво, региструјем три укуцана прилагођена својства за ОКЛЦХ канале: @проперти --фл-л { синтакса: "<број>"; наслеђује: истинито; почетна вредност: 0,86; } @проперти --фл-ц { синтакса: "<број>"; наслеђује: истинито; почетна вредност: 0,12; } @проперти --фл-х { синтакса: "<број>"; наслеђује: истинито; почетна вредност: 95; }
Анимирао сам те канале, намерно гурајући неколико кадрова ка наранџастој, тако да се треперење јасно чита као светло ватре:
@кеифрамес пламен { 0%, 100% { --фл-л: 0,86; --фл-ц: 0,12; --фл-х: 95; } 6% { --фл-л: 0,91; --фл-ц: 0,10; --фл-х: 92; } 12% { --фл-л: 0,83; --фл-ц: 0,14; --фл-х: 100; } 18% { --фл-л: 0,88; --фл-ц: 0,11; --фл-х: 94; } 24% { --фл-л: 0,82; --фл-ц: 0,16; --фл-х: 82; } 30% { --фл-л: 0,90; --фл-ц: 0,12; --фл-х: 90; } 36% { --фл-л: 0,79; --фл-ц: 0,17; --фл-х: 76; } 44% { --фл-л: 0,87; --фл-ц: 0,12; --фл-х: 96; } 52% { --фл-л: 0,81; --фл-ц: 0,15; --фл-х: 102; } 60% { --фл-л: 0,89; --фл-ц: 0,11; --фл-х: 93; } 68% { --фл-л: 0,83; --фл-ц: 0,16; --фл-х: 85; } 76% { --фл-л: 0,91; --фл-ц: 0,10; --фл-х: 91; } 84% { --фл-л: 0,85; --фл-ц: 0,14; --фл-х: 98; } 92% {--фл-л: 0,80; --фл-ц: 0,17; --фл-х: 74; } }
Затим сам ту анимацију проширио на СВГ, тако да су дељене варијабле доступне и за лампе и за мој преклоп:
@медиа (преферс-редуцед-мотион: но-преференце) { .свг-мине[дата-аниматионс=он] { анимација: пламен 3.6с бесконачно линеарно; изолација: изоловати;
/* Направите боју пламена од анимираних канала */ --фламе: оклцх(вар(--фл-л) вар(--фл-ц) вар(--фл-х));
/* Боја лампе изведена из пламена */ --ламп-цоре: оклцх(од вар(--фламе) цалц(л + 0,05) цалц(ц * 0,70) х);
/* Нијанса преклапања изведена из истог пламена */ --оверлаи-тинт: оклцх(од вар(--фламе) израчун (л + 0,06) израчун (ц * 0,65) израчун (х - 10)); } }
Коначно, применио сам те изведене боје на светлеће лампе и слој на који утичу: @медиа (преферс-редуцед-мотион: но-преференце) { .свг-мине[дата-аниматионс=он] #мине-ламп-1 > круг, .свг-мине[дата-аниматионс=он] #мине-ламп-2 > круг { филл: вар(--ламп-цоре); }
.свг-мине[дата-аниматионс=он] #оверлаи { дисплеј: блок; филл: вар(--оверлаи-тинт); непрозирност: 0,5; } }
Када се пламен помери ка наранџастој, лампе се загревају, а сцена се загрева са њима. Када се пламен охлади, све се слегне. Најбољи део је што се ништа не пише ручно. Ако променим боју основе или подесим опсеге анимације пламена, цео систем осветљења се ажурира истовремено. Коначан резултат можете видети на мојој веб страници. Поновна употреба, поновна употреба, ревизија Ти Ханна-Барбера аниматори су били приморани да пренамене елементе из потребе, али ја поново користим боје јер то чини мој рад доследнијим и лакшим за одржавање. ЦСС релативне вредности боја ми омогућавају да:
Дефинишите једну темељну боју, Опишите како се друге боје односе на њега, Поново користите те односе свуда, и Анимирајте систем променом једне вредности.
Релативна боја не само да олакшава постављање тема. Подстиче начин размишљања где је боја, као и кретање, намерна — и где промена једне вредности може да трансформише целу сцену без преписивања дела испод ње.
