Ni-refresh ko kamakailan ang mga animated na graphics sa aking website na may bagong tema at isang pangkat ng mga pioneer na character, na nagsasanay ng maraming mga diskarte na ibinahagi ko sa seryeng ito. Ang ilan sa aking mga animation ay nagbabago ng hitsura kapag may nakipag-ugnayan sa kanila o sa iba't ibang oras ng araw.
Ang mga kulay sa graphic sa ibabaw ng aking mga pahina ng blog ay nagbabago mula umaga hanggang gabi araw-araw. Pagkatapos, nariyan ang snow mode, na nagdaragdag ng malamig na mga kulay at isang taglamig na tema, sa kagandahang-loob ng isang overlay na layer at isang blending mode.
Habang ginagawa ito, nagsimula akong magtaka kung ang mga halaga ng kulay ng CSS ay maaaring magbigay sa akin ng higit na kontrol habang pinapasimple din ang proseso. Tandaan: Sa tutorial na ito, itutuon ko ang mga kaugnay na halaga ng kulay at ang espasyo ng kulay ng OKLCH para sa mga theming graphics at animation. Kung gusto mong sumisid nang malalim sa relatibong kulay, gumawa si Ahmad Shadeed ng napakahusay na interactive na gabay. Tungkol naman sa mga color space, gamut, at OKLCH, ang sarili nating Geoff Graham ang sumulat tungkol sa kanila.
Ang paulit-ulit na paggamit ng mga elemento ay susi. Ginamit muli ang mga background hangga't maaari, na may mga zoom at overlay na tumutulong sa pagbuo ng mga bagong eksena mula sa parehong likhang sining. Isinilang ito sa pangangailangan, ngunit hinimok din nito ang pag-iisip sa mga tuntunin ng serye kaysa sa mga indibidwal na eksena. Ang problema sa Manu-manong Pag-update ng Mga Palette ng Kulay Diretso tayo sa hamon ko. Sa Toon Titles tulad nito — batay sa 1959 Yogi Bear Show episode na “Lullabye-Bye Bear” — at sa pangkalahatan, ang mga palette ay limitado sa ilang piling kulay.
Gumagawa ako ng mga shade at tints mula sa tinatawag kong kulay na "foundation" para palawakin ang palette nang hindi nagdaragdag ng mga kulay.
Sa Sketch, nagtatrabaho ako sa espasyo ng kulay ng HSL, kaya ang prosesong ito ay nagsasangkot ng pagtaas o pagbaba ng liwanag na halaga ng kulay ng aking pundasyon. Sa totoo lang, hindi ito isang mahirap na gawain - ngunit ang pagpili ng ibang kulay ng pundasyon ay nangangailangan ng paglikha ng isang buong bagong hanay ng mga shade at tints. Ang paggawa nito nang manu-mano, paulit-ulit, ay mabilis na nagiging matrabaho.
Binanggit ko ang HSL — H (hue), S (saturation), at L (lightness) — color space, ngunit isa lang iyon sa ilang paraan para ilarawan ang kulay. RGB — R (pula), G (berde), B (asul) — ay marahil ang pinakapamilyar, kahit man lang sa Hex na anyo nito. Mayroon ding LAB — L (lightness), A (berde–pula), B (asul–dilaw) — at ang mas bago, ngunit ngayon ay malawak na sinusuportahan ang LCH — L (lightness), C (chroma), H (hue) — na modelo sa OKLCH form nito. Sa LCH — partikular ang OKLCH sa CSS — maaari kong ayusin ang liwanag na halaga ng kulay ng aking pundasyon.
O maaari kong baguhin ang chroma nito. Parehong inilalarawan ng LCH chroma at HSL saturation ang intensity o kayamanan ng isang kulay, ngunit ginagawa nila ito sa magkaibang paraan. Binibigyan ako ng LCH ng mas malawak na hanay at mas predictable na paghahalo sa pagitan ng mga kulay.
Maaari ko ring baguhin ang kulay upang lumikha ng isang palette ng mga kulay na may parehong liwanag at mga halaga ng chroma. Sa parehong HSL at LCH, ang hue spectrum ay nagsisimula sa pula, gumagalaw sa berde at asul, at bumabalik sa pula.
Bakit Binago ng OKLCH ang Palagay Ko Tungkol sa Kulay Ang suporta sa browser para sa espasyo ng kulay ng OKLCH ay laganap na ngayon, kahit na ang mga tool sa disenyo — kabilang ang Sketch — ay hindi pa nakakakuha. Sa kabutihang palad, hindi ka dapat pigilan nito sa paggamit ng OKLCH. Masayang iko-convert ng mga browser ang mga halaga ng Hex, HSL, LAB, at RGB sa OKLCH para sa iyo. Maaari kang tumukoy ng custom na property ng CSS na may kulay ng pundasyon sa anumang espasyo, kasama ang Hex: /* Kulay ng pundasyon */ --pundasyon: #5accd6;
Anumang mga kulay na nagmula dito ay awtomatikong mako-convert sa OKLCH: --foundation-light: oklch(mula sa var(--foundation) [...]; } --foundation-mid: oklch(mula sa var(--foundation) [...]; } --foundation-dark: oklch(mula sa var(--foundation) [...]; }
Kamag-anak na Kulay Bilang Isang Sistema ng Disenyo Isipin ang relatibong kulay na nagsasabing: "Kunin ang kulay na ito, i-tweak ito, pagkatapos ay ibigay sa akin ang resulta." Mayroong dalawang paraan upang ayusin ang isang kulay: ganap na pagbabago at proporsyonal na pagbabago. Magkamukha ang mga ito sa code, ngunit ibang-iba ang pag-uugali kapag nagsimula kang magpalit ng mga kulay ng foundation. Ang pag-unawa sa pagkakaibang iyon ay kung ano ang maaaring gawing system ang paggamit ng relatibong kulay. /* Kulay ng pundasyon */ --pundasyon: #5accd6;
Halimbawa, ang lightness value ng kulay ng foundation ko ay 0.7837, habang ang darker na bersyon ay may value na 0.5837. Upang kalkulahin ang pagkakaiba, ibawas ko ang mas mababang halaga mula sa mas mataas at inilapat ang resulta gamit ang isang calc() function: --foundation-dark: oklch(mula sa var(--foundation) calc(l - 0.20) c h);
Upang makakuha ng mas magaan na kulay, idinagdag ko sa halip ang pagkakaiba: --foundation-light: oklch(mula sa var(--foundation) calc(l + 0.10) c h);
Chromaang mga pagsasaayos ay sumusunod sa parehong proseso. Upang bawasan ang intensity ng kulay ng aking pundasyon mula 0.1035 hanggang 0.0035, binabawasan ko ang isang halaga mula sa isa pa: oklch(mula sa var(--foundation) l calc(c - 0.10) h);
Upang lumikha ng palette ng mga kulay, kinakalkula ko ang pagkakaiba sa pagitan ng halaga ng kulay ng kulay ng aking pundasyon (200) at ng aking bagong kulay (260): oklch(mula sa var(--foundation) l c calc(h + 60));
Ang mga kalkulasyon na iyon ay ganap. Kapag nagbawas ako ng isang nakapirming halaga, mabisa kong sinasabi, "Palaging ibawas ang ganito." Ang parehong naaangkop kapag nagdaragdag ng mga nakapirming halaga: calc(c - 0.10) calc(c + 0.10)
Natutunan ko ang mga limitasyon ng diskarteng ito sa mahirap na paraan. Nang umasa ako sa pagbabawas ng mga nakapirming halaga ng chroma, bumagsak ang mga kulay patungo sa kulay abo sa sandaling binago ko ang pundasyon. Ang isang palette na gumagana para sa isang kulay ay nahulog para sa isa pa. Iba ang pag-uugali ng multiplikasyon. Kapag pinarami ko ang chroma, sinasabi ko sa browser: "Bawasan ang intensity ng kulay na ito ng isang proporsyon." Ang ugnayan sa pagitan ng mga kulay ay nananatiling buo, kahit na nagbabago ang pundasyon: calc(c * 0.10)
Aking Ilipat Ito, I-scale Ito, I-rotate Ito Mga Panuntunan
Ilipat ang liwanag (idagdag o ibawas), Scale chroma (multiply), I-rotate ang kulay (idagdag o ibawas ang mga degree).
Sinusukat ko ang chroma dahil gusto kong manatiling proporsyonal ang mga pagbabago sa intensity sa base na kulay. Paikot-ikot ang mga relasyon sa kulay, kaya walang saysay ang pagpaparami ng kulay. Ang liwanag ay perceptual at ganap — ang pagpaparami nito ay kadalasang nagbubunga ng mga kakaibang resulta.
Mula sa Isang Kulay Hanggang Isang Buong Tema Ang kamag-anak na kulay ay nagbibigay-daan sa akin na tukuyin ang isang kulay ng pundasyon at bumuo ng bawat iba pang kulay na kailangan ko — mga fill, stroke, gradient stop, shadow — mula dito. Sa puntong iyon, hihinto ang kulay sa pagiging isang palette at magsisimulang maging isang sistema. Ang mga ilustrasyon ng SVG ay may posibilidad na muling gamitin ang parehong ilang kulay sa mga fill, stroke, at gradient. Hinahayaan ka ng kaugnay na kulay na tukuyin ang mga ugnayang iyon nang isang beses at muling gamitin ang mga ito kahit saan — tulad ng mga animator na ginamit muli ang mga background upang lumikha ng mga bagong eksena.
Baguhin ang kulay ng pundasyon nang isang beses, at awtomatikong nag-a-update ang bawat nakuhang kulay, nang hindi muling kinakalkula ang anuman sa pamamagitan ng kamay. Sa labas ng mga animated na graphics, maaari kong gamitin ang parehong diskarte upang tukuyin ang mga kulay para sa mga estado ng mga interactive na elemento tulad ng mga pindutan at link. Ang kulay ng pundasyon na ginamit ko sa aking "Lullabye-Bye Bear" Toon Title ay isang cyan-looking blue. Ang background ay isang radial gradient sa pagitan ng aking pundasyon at isang mas madilim na bersyon.
Para gumawa ng mga alternatibong bersyon na may ganap na magkakaibang mood, kailangan ko lang baguhin ang kulay ng pundasyon: --pundasyon: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(mula sa var(--foundation) calc(l - 0.2357) calc(c * 0.833) h);
Para i-bind ang mga custom na property na iyon sa aking SVG gradient nang walang pagdo-duplicate ng mga value ng kulay, pinalitan ko ang mga hard-coded na stop-color na value ng mga inline na istilo:
Susunod, kailangan kong tiyakin na ang aking Toon Text ay palaging contrast sa anumang kulay ng foundation na pipiliin ko. Ang 180deg na pag-ikot ng kulay ay gumagawa ng komplementaryong kulay na tiyak na lumilitaw - ngunit maaaring mag-vibrate nang hindi komportable: .text-light { punan: oklch(mula sa var(--foundation) l c calc(h + 180)); }
Ang 90° shift ay gumagawa ng matingkad na pangalawang kulay nang hindi ganap na komplementaryo: .text-light { punan: oklch(mula sa var(--foundation) l c calc(h - 90)); }
Ang aking libangan ng Quick Draw McGraw's 1959 Toon Title na "El Kabong" ay gumagamit ng parehong mga diskarte ngunit may mas iba't ibang palette. Halimbawa, may isa pang radial gradient sa pagitan ng kulay ng pundasyon at mas madilim na lilim.
Ang gusali at puno sa background ay magkaibang kulay ng parehong kulay ng pundasyon. Para sa mga landas na iyon, kailangan ko ng dalawang karagdagang kulay ng fill: .bg-mid { punan: oklch(mula sa var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-dark { punan: oklch(mula sa var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Kapag Nagsimulang Gumalaw ang Mga Pundasyon
Sa ngayon, lahat ng ipinakita ko ay static. Kahit na may gumagamit ng color picker para baguhin ang kulay ng foundation, nangyayari kaagad ang pagbabagong iyon. Ngunit ang mga animated na graphics ay bihirang tumayo - ang clue ay nasa pangalan. Kaya, kung ang kulay ay bahagi ng system, walang dahilan na hindi rin ito maaaring mag-animate.
Para ma-animate ang kulay ng pundasyon, kailangan ko munang hatiin ito sa mga OKLCH channel nito— liwanag, chroma, at kulay. Ngunit may mahalagang karagdagang hakbang: Kailangan kong irehistro ang mga halagang iyon bilang mga na-type na custom na katangian. Ngunit ano ang ibig sabihin nito?
Bilang default, hindi alam ng browser kung ang isang CSS custom na value ng property ay kumakatawan sa isang kulay, haba, numero, o iba pa. Iyon ay madalas na nangangahulugan na ang mga ito ay hindi maaaring interpolated nang maayos sa panahon ng animation, at tumalon mula sa isang halaga patungo sa susunod.
Ang pagpaparehistro ng custom na property ay nagsasabi sa browser ng uri ng value na kinakatawan nito at kung paano ito dapat kumilos sa paglipas ng panahon. Sa kasong ito, gusto kong tratuhin ng browser ang aking mga channel ng kulay bilang mga numero upang maayos na mai-animate ang mga ito.
@property --f-l {
syntax: "
@property --f-c {
syntax: "
@property --f-h {
syntax: "
Kapag nakarehistro na, ang mga custom na property na ito ay kumikilos tulad ng native CSS. Maaaring i-interpolate ng browser ang mga ito nang frame-by-frame. Pagkatapos ay itinayo ko muli ang kulay ng pundasyon mula sa mga channel na iyon: --foundation: oklch(var(--f-l) var(--f-c) var(--f-h));
Ginagawa nitong animatable ang kulay ng pundasyon, tulad ng anumang iba pang numeric na halaga. Narito ang isang simpleng "paghinga" na animation na dahan-dahang nagpapagaan sa paglipas ng panahon: @keyframes huminga { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animation: huminga ng 10s ease-in-out na walang hanggan; }
Dahil ang bawat iba pang kulay sa fills, gradients, at strokes ay hinango sa --foundation, lahat sila ay nag-a-animate nang sama-sama, at walang kailangang i-update nang manu-mano. Isang Animated na Kulay, Maraming Effect Sa simula ng prosesong ito, iniisip ko kung ang mga halaga ng kulay ng CSS ay maaaring mag-alok ng higit pang mga posibilidad habang ginagawang mas simple ang mga ito na ipatupad. Nagdagdag ako kamakailan ng bagong background ng minahan ng ginto sa pahina ng contact ng aking website, at kasama sa unang pag-ulit ang mga oil lamp na kumikinang at umuugoy.
Nais kong tuklasin kung paano ang pag-animate ng mga kamag-anak na kulay ng CSS ay maaaring gawing mas makatotohanan ang interior ng minahan sa pamamagitan ng pagkulay nito ng mga kulay mula sa mga lamp. Gusto kong maapektuhan nila ang mundo sa kanilang paligid, tulad ng ginagawa ng tunay na liwanag. Kaya, sa halip na mag-animate ng maraming kulay, gumawa ako ng maliit na sistema ng pag-iilaw na nagbibigay-buhay sa isang kulay lamang.
Ang una kong gawain ay maglagay ng overlay layer sa pagitan ng background at ng aking mga lamp:
Gumamit ako ng mix-blend-mode: kulay dahil nakukulayan niyan ang nasa ilalim nito habang pinapanatili ang pinagbabatayan na ningning. Dahil gusto ko lang na makita ang overlay kapag naka-on ang mga animation, ginawa ko ang overlay na opt-in: .svg-mine #overlay { display: wala; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { display: block; opacity: 0.5; } }
Ang overlay ay nasa lugar, ngunit hindi pa konektado sa mga lamp. Kailangan ko ng light source. Ang aking mga lamp ay simple, at ang bawat isa ay naglalaman ng isang elemento ng bilog na pinalabo ko ng isang filter. Ang filter ay gumagawa ng napakalambot na blur sa buong bilog.
Sa halip na i-animate ang overlay at mga lamp nang hiwalay, i-animate ko ang isang token ng kulay na "apoy" at nakukuha ko ang lahat mula doon. Una, nagrerehistro ako ng tatlong naka-type na custom na katangian para sa mga channel ng OKLCH:
@property --fl-l {
syntax: "
Pina-animate ko ang mga channel na iyon, sadyang itulak ang ilang mga frame patungo sa orange para malinaw na mabasa ang flicker bilang liwanag ng apoy:
@keyframes apoy { 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; } }
Pagkatapos ay sinakop ko ang animation na iyon sa SVG, kaya ang mga nakabahaging variable ay magagamit sa parehong mga lamp at aking overlay:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animation: flame 3.6s infinite linear; paghihiwalay: ihiwalay;
/* Bumuo ng kulay ng apoy mula sa mga animated na channel */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Kulay ng lampara na nagmula sa apoy */ --lamp-core: oklch(mula sa var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Overlay tint na nagmula sa parehong apoy */ --overlay-tint: oklch(mula sa var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
Sa wakas, inilapat ko ang mga nagmula na kulay sa mga kumikinang na lamp at ang overlay na naaapektuhan nito: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > bilog, .svg-mine[data-animations=on] #mine-lamp-2 > circle { punan: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { display: block; punan: var(--overlay-tint); opacity: 0.5; } }
Kapag lumilipat ang apoy patungo sa orange, umiinit ang mga lamp, at umiinit ang tanawin kasama nila. Kapag ang apoy ay lumalamig, ang lahat ay magkakasama. Ang pinakamagandang bahagi ay walang nakasulat nang manu-mano. Kung babaguhin ko ang kulay ng pundasyon o i-tweak ang mga saklaw ng flame animation, ang buong sistema ng pag-iilaw ay sabay-sabay na nag-a-update. Maaari mong makita ang huling resulta sa aking website. Muling gamitin, Muling Layunin, Muling binisita Ang mga Hanna-Barbera animator na iyon ay pinilit na muling gamitin ang mga elemento dahil sa pangangailangan, ngunit muli akong gumagamit ng mga kulay dahil ginagawa nitong mas pare-pareho at mas madaling mapanatili ang aking trabaho. Nagbibigay-daan sa akin ang mga kaugnay na halaga ng kulay ng CSS na:
Tukuyin ang isang solong kulay ng pundasyon, Ilarawan kung paano nauugnay ang iba pang mga kulay dito, Muling gamitin ang mga relasyon sa lahat ng dako, at Pagalawin ang system sa pamamagitan ng pagbabago ng isang halaga.
Ang kamag-anak na kulay ay hindi lamang nagpapadali sa tema. Hinihikayat nito ang isang paraan ng pag-iisip kung saan ang kulay, tulad ng paggalaw, ay sinadya — at kung saan ang pagbabago ng isang halaga ay maaaring magbago ng isang buong eksena nang hindi muling isinusulat ang gawain sa ilalim nito.
