Ua hōʻoluʻolu hou wau i nā kiʻi animated ma kaʻu pūnaewele me kahi kumumanaʻo hou a me kahi pūʻulu o nā mea paionia, e hoʻomaʻamaʻa ana i nā ʻano hana aʻu i hōʻike ai i kēia pūʻulu. Hoʻololi kekahi o kaʻu mau animation i ke ʻano ke launa pū kekahi me lākou a i nā manawa like ʻole o ka lā.
Hoʻololi nā kala i ka kiʻi ma luna o kaʻu ʻaoʻao blog mai ke kakahiaka a i ka pō i kēlā me kēia lā. A laila, aia ke ʻano hau, e hoʻohui i nā waihoʻoluʻu ʻoluʻolu a me kahi kumumanaʻo hoʻoilo, ʻoluʻolu o kahi papa uhi a me kahi ʻano hui.
I ka hana ʻana i kēia, ua hoʻomaka wau e noʻonoʻo inā hiki i nā waiwai kala pili CSS ke hāʻawi iaʻu i ka mana hou aʻe me ka maʻalahi o ke kaʻina hana. 'Ōlelo Aʻo: Ma kēia kumu aʻoaʻo, e kālele au i nā waiwai kala pili a me ka wahi waihoʻoluʻu OKLCH no nā kiʻi kiʻi a me nā animation. Inā makemake ʻoe e luʻu hohonu i ka waihoʻoluʻu pili, ua hana ʻo Ahmad Shadeed i kahi alakaʻi kūkākūkā maikaʻi loa. No nā wahi kala, gamuts, a me OKLCH, kā mākou iho ʻo Geoff Graham i kākau e pili ana iā lākou.
He mea nui ka hoʻohana pinepine ʻana i nā mea. Hoʻohana hou ʻia nā kāʻei kua i ka wā hiki, me nā zooms a me nā uhi e kōkua ana i ke kūkulu ʻana i nā hiʻohiʻona hou mai ka hana like. Ua hānau ʻia ma muli o ka pono, akā ua hoʻoikaika ʻo ia i ka noʻonoʻo ʻana ma ke ʻano o ka series ma mua o nā hiʻohiʻona pākahi. ʻO ka pilikia me ka hoʻonui ʻana i nā pale kala kala E hele pololei kāua i kaʻu pilikia. Ma nā inoa ʻo Toon e like me kēia - e pili ana i ka 1959 Yogi Bear Show episode "Lullabye-Bye Bear" - a me kaʻu hana maʻamau, ua kaupalena ʻia nā palettes i nā kala koho.
Hana wau i nā aka a me nā kala mai ka mea aʻu i kapa ai i koʻu kala "kumu" e hoʻonui i ka palette me ka hoʻohui ʻole ʻana i nā hue.
Ma Sketch, hana au ma ka HSL waihoʻoluʻu waihoʻoluʻu, no laila, pili kēia kaʻina hana i ka hoʻonui a hoʻemi ʻana paha i ka waiwai māmā o kaʻu kala kumu. ʻO kaʻoiaʻiʻo, ʻaʻole ia he hana paʻakikī - akā ke koho ʻana i kahi kala kumu ʻē aʻe e pono ai ka hana ʻana i kahi pūʻulu hou o nā aka a me nā tints. ʻO ka hana ʻana me ka lima, pinepine pinepine, lilo koke i paʻakikī.
Ua haʻi aku au i ka HSL - H (hue), S (saturation), a me L (māmā) - kala kala, akā ʻo ia kekahi o nā ala e wehewehe ai i ke kala. RGB - R (ʻulaʻula), G ('ōmaʻomaʻo), B (uliuli) - ʻo ia paha ka mea maʻa loa, ma ka liʻiliʻi loa ma kāna ʻano Hex. Aia kekahi LAB - L (māmā), A ('ōmaʻomaʻo-ʻulaʻula), B (uliuli-melemele) - a me ka mea hou, akā i kēia manawa i kākoʻo nui ʻia ʻo LCH - L (māmā), C (chroma), H (hue) - hoʻohālike i kona ʻano OKLCH. Me LCH — ʻo OKLCH ma CSS — hiki iaʻu ke hoʻololi i ka waiwai māmā o kaʻu kala kumu.
A i ʻole hiki iaʻu ke hoʻololi i kāna chroma. Hōʻike ka LCH chroma a me ka saturation HSL i ka ikaika a i ʻole ka waiwai o kahi kala, akā hana lākou pēlā ma nā ʻano like ʻole. Hāʻawi mai ʻo LCH iaʻu i kahi ākea ākea a hiki ke wānana i ka hui ʻana ma waena o nā kala.
Hiki iaʻu ke hoʻololi i ka hue e hana i kahi palette o nā kala e like me ka māmā a me nā waiwai chroma. Ma ka HSL a me ka LCH, hoʻomaka ka spectrum hue i ka ʻulaʻula, neʻe i ka ʻōmaʻomaʻo a me ka uliuli, a hoʻi i ka ʻulaʻula.
No ke aha i hoʻololi ai ʻo OKLCH i koʻu manaʻo e pili ana i ke kala ʻO ke kākoʻo pūnaewele no ka wahi waihoʻoluʻu OKLCH i kēia manawa, ʻoiai inā ʻaʻole i loaʻa nā mea hana hoʻolālā - me Sketch. ʻO ka mea pōmaikaʻi, ʻaʻole ia e kāpae iā ʻoe mai ka hoʻohana ʻana iā OKLCH. E hoʻohuli hauʻoli nā mea hoʻokele i nā waiwai Hex, HSL, LAB, a me RGB i OKLCH no ʻoe. Hiki iā ʻoe ke wehewehe i kahi waiwai maʻamau CSS me kahi waihoʻoluʻu kumu ma nā wahi āpau, me ka Hex: /* kala kumu */ --kumu: #5accd6;
ʻO nā kala i loaʻa mai ia mea e hoʻololi ʻokoʻa ʻia i OKLCH: --kumu-kumu: oklch(mai var(--kumu) [...]; } --foundation-mid: oklch(mai var(--foundation) [...]; } --foundation-dark: oklch(mai var(--foundation) [...]; }
ʻO ke kala pili ma ke ʻano he ʻōnaehana hoʻolālā E noʻonoʻo i ka waihoʻoluʻu pili e like me ka ʻōlelo ʻana: "E lawe i kēia kala, hoʻololi, a laila hāʻawi mai iaʻu i ka hopena." ʻElua ala e hoʻoponopono ai i kahi waihoʻoluʻu: nā hoʻololi piha a me nā hoʻololi kūlike. Ua like lākou me ke code, akā ʻokoʻa loa ke ʻano i ka wā e hoʻomaka ai ʻoe e hoʻololi i nā kala kumu. ʻO ka hoʻomaopopo ʻana i kēlā ʻokoʻa ka mea hiki ke hoʻololi i ka hoʻohana ʻana i ke kala pili i kahi ʻōnaehana. /* kala kumu */ --kumu: #5accd6;
No ka laʻana, ʻo ka waiwai māmā o koʻu waihoʻoluʻu kumu he 0.7837, ʻoiai he 0.5837 ka waiwai ʻeleʻele. No ka helu ʻana i ka ʻokoʻa, unuhi au i ka waiwai haʻahaʻa mai ka mea kiʻekiʻe aʻe a hoʻohana i ka hopena me ka hana calc(): --kumu-pouli: oklch(mai var(--hoʻokumu) calc(l - 0.20) c h);
No ka loaʻa ʻana o kahi kala māmā, hoʻohui au i ka ʻokoʻa: --kumu-kumu: oklch(mai var(--hoʻokumu) calc(l + 0.10) c h);
Chromahoʻoponopono like kaʻina hana. No ka ho'ēmiʻana i ka ikaika o kaʻu kala kumu mai 0.1035 a i 0.0035, e unuhi au i hoʻokahi waiwai mai kekahi: oklch(mai var(--hoʻokumu) l calc(c - 0.10) h);
No ka hoʻokumu ʻana i kahi palette o nā hue, helu wau i ka ʻokoʻa ma waena o ka waiwai hue o koʻu kala kumu (200) a me kaʻu hue hou (260): oklch(mai var(--hoʻokumu) l c calc(h + 60));
He paʻa kēlā mau helu. Ke unuhi au i kahi huina paʻa, ʻōlelo maikaʻi wau, "E unuhi mau i kēia nui." Hoʻohana like ia i ka hoʻohui ʻana i nā waiwai paʻa: calc(c - 0.10) helu (c + 0.10)
Ua aʻo au i nā palena o kēia ala ma ke ala paʻakikī. I koʻu hilinaʻi ʻana i ka unuhi ʻana i nā koina chroma paʻa, hāʻule nā kala i ka hina ke hoʻololi au i ke kumu. Ua hāʻule kekahi palette i hana no kekahi kala no kekahi. He ʻokoʻa ke ʻano o ka hoʻonui. Ke hoʻonui au i ka chroma, ke haʻi aku nei au i ka polokalamu kele pūnaewele: "E hoʻemi i ka ikaika o kēia kala ma kahi ʻāpana." Paʻa mau ka pilina ma waena o nā kala, ʻoiai ke loli ke kumu: helu (c * 0.10)
ʻO kaʻu neʻe, hoʻonui, hoʻololi i nā lula
E hoʻoneʻe i ka māmā (hoʻohui a unuhi paha), Pākuʻi chroma (hoʻonui), E hoʻololi i ka hue (hoʻohui a unuhi i nā degere).
Hoʻonui au i ka chroma no ka mea makemake au i ka hoʻololi ʻana i ka ikaika e kūlike me ke kala kumu. Hoʻololi ka pilina o nā hue, no laila, ʻaʻole kūpono ka hoʻonui ʻana i ka hue. ʻO ka māmā ka ʻike a paʻa loa - ʻo ka hoʻonui pinepine ʻana i nā hopena ʻē aʻe.
Mai hoʻokahi kala a i ke kumuhana holoʻokoʻa Hiki iaʻu ke wehewehe i ka waihoʻoluʻu kumu a hoʻopuka i kēlā me kēia kala ʻē aʻe aʻu e pono ai - hoʻopiha, paʻi, hoʻomaha gradient, aka - mai ia mea. I kēlā manawa, pau ke kala i ka palette a hoʻomaka i kahi ʻōnaehana. Hoʻohana hou nā kiʻi kiʻi SVG i nā kala liʻiliʻi ma waena o nā hoʻopihapiha, nā ʻōpala, a me nā gradients. Hiki i ke kala pili iā ʻoe ke wehewehe i kēlā mau pilina i hoʻokahi manawa a hoʻohana hou iā lākou ma nā wahi āpau - e like me ka hoʻohana hou ʻana o nā animator i nā kāʻei e hana i nā hiʻohiʻona hou.
E hoʻololi i ka waihoʻoluʻu kumu i hoʻokahi manawa, a e hoʻonui maʻalahi kēlā me kēia kala i loaʻa, me ka helu ʻole ʻana i kekahi mea ma ka lima. Ma waho o nā kiʻi animated, hiki iaʻu ke hoʻohana i kēia ala like e wehewehe i nā kala no nā mokuʻāina o nā mea pili e like me nā pihi a me nā loulou. ʻO ka waihoʻoluʻu kumu aʻu i hoʻohana ai i kaʻu "Lullabye-Bye Bear" Toon Title he ʻulaʻula ke nānā aku. ʻO ke kāʻei kua he gradient radial ma waena o koʻu kumu a me kahi mana ʻeleʻele.
No ka hana ʻana i nā mana ʻokoʻa me nā ʻano like ʻole, pono wau e hoʻololi i ke kala kumu: --kumu: #5accd6; --grad-end: var(--hoʻokumu); --grad-start: oklch(mai var(--hoʻokumu) calc(l - 0.2357) calc(c * 0.833) h);
No ka hoʻopaʻa ʻana i kēlā mau waiwai maʻamau i kaʻu gradient SVG me ka ʻole o ke kope ʻana i nā koina kala, ua hoʻololi au i nā waiwai pani kala paʻakikī me nā kaila inline:
A laila, pono wau e hōʻoia e ʻokoʻa mau kaʻu Toon Text me kēlā me kēia kala kumu aʻu e koho ai. ʻO ka hoʻololi ʻana o ka hue 180 degere e hoʻopuka i kahi kala hoʻohui e paʻa maoli - akā hiki ke haʻalulu me ka ʻoluʻolu ʻole: .kukui-kukui { hoʻopiha: oklch(mai var(--foundation) l c calc(h + 180)); }
ʻO ka hoʻololi ʻana he 90° e hoʻopuka i kahi waihoʻoluʻu lua me ka ʻole o ka hoʻopiha piha ʻana: .kukui-kukui { hoʻopiha: oklch(mai var(--foundation) l c calc(h - 90)); }
ʻO kaʻu leʻaleʻa o Quick Draw McGraw's 1959 Toon Title "El Kabong" e hoʻohana i nā ʻenehana like akā me kahi palette ʻokoʻa. No ka laʻana, aia kekahi gradient radial ma waena o ka waihoʻoluʻu kumu a me kahi malu ʻeleʻele.
ʻO ka hale a me ka lāʻau ma hope he mau aka like ʻole o ka waihoʻoluʻu kumu hoʻokahi. No kēlā mau ala, makemake au i ʻelua mau kala hoʻopihapiha: .bg-mid { hoʻopiha: oklch(mai var(--foundation) calc(l - 0.04) calc(c * 0.91) h); }
.bg-pouli { hoʻopiha: oklch(mai var(--foundation) calc(l - 0.12) calc(c * 0.64) h); }
Ke hoʻomaka ka neʻe ʻana o nā kumu
I kēia manawa, paʻa nā mea a pau aʻu i hōʻike ai. ʻOiai ke hoʻohana kekahi i ka ʻohi kala e hoʻololi i ke kala kumu, hiki koke ke hoʻololi. Akā ʻaʻole kū mālie nā kiʻi animated - aia ka clue ma ka inoa. No laila, inā he ʻāpana o ke kala o ka ʻōnaehana, ʻaʻohe kumu e hiki ʻole ai ke animate.
No ka hoʻolalelale ʻana i ka waihoʻoluʻu kumu, pono mua wau e hoʻokaʻawale iā ia i kāna mau kahawai OKLCH- māmā, chroma, a me ka hue. Akā, aia kahi hana ʻē aʻe: Pono wau e hoʻopaʻa inoa i kēlā mau waiwai ma ke ʻano he mau waiwai maʻamau. Akā he aha ke ʻano o ia mea?
ʻO ka mea paʻamau, ʻaʻole ʻike ka polokalamu kele pūnaewele inā he kala, lōʻihi, helu, a i ʻole kekahi mea ʻē aʻe. ʻO ia ke ʻano pinepine ʻaʻole hiki ke hoʻopili ʻia me ka leʻaleʻa i ka wā o ka animation, a lele mai kahi waiwai a i kekahi.
Ke kākau inoa ʻana i kahi waiwai maʻamau e hōʻike i ka polokalamu kele pūnaewele i ke ʻano o ka waiwai e hōʻike ʻia ai a pehea e hana ai i ka manawa. I kēia hihia, makemake au i ka polokalamu kele pūnaewele e mālama i kaʻu mau ala waihoʻoluʻu e like me nā helu i hiki ke hoʻoikaika ʻia lākou.
@waiwai --f-l {
syntax: "
@waiwai --f-c {
syntax: "
@waiwai --f-h {
syntax: "
Ke hoʻopaʻa inoa ʻia, hana kēia mau waiwai maʻamau e like me CSS maoli. Hiki i ka polokalamu kele pūnaewele ke hoʻopili iā lākou i kēlā me kēia kiʻi. A laila kūkulu hou au i ke kala kumu mai kēlā mau kahawai: --hoʻokumu: oklch(var(--f-l) var(--f-c) var(--f-h));
ʻO kēia ka mea e lilo ai ke kala kumu i animatable, e like me nā waiwai helu ʻē aʻe. Eia kahi hana "hanu" maʻalahi e hoʻololi mālie i ka māmā i ka manawa: @keyframes hanu { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { animation: hanu 10s oluolu-i-waho pau ole; }
No ka mea, loaʻa mai kēlā me kēia kala ʻē aʻe i ka hoʻopiha, gradients, a me nā paʻi ʻana mai --foundation, ola pū lākou a pau, ʻaʻohe mea e pono e hoʻonui ʻia me ka lima. Hoʻokahi Kala Animated, Nui Nā hopena I ka hoʻomaka ʻana o kēia kaʻina hana, ua noʻonoʻo wau inā hiki i nā waiwai kala pili CSS ke hāʻawi i nā mea hou aʻe me ka maʻalahi o ka hoʻokō. Ua hoʻohui hou au i kahi kāʻei koʻikoʻi gula hou i ka ʻaoʻao pili o kaʻu pūnaewele, a ʻo ka hoʻomaʻamaʻa mua ʻana me nā kukui ʻaila e ʻā a me ke kowali.
Makemake au e ʻimi pehea e hiki ai i ka hoʻolalelale ʻana i nā kala pili CSS ke hoʻolilo i koʻu loko i ʻoi aku ka ʻoiaʻiʻo ma ke kala ʻana me nā kala o nā kukui. Ua makemake au e hoʻopili lākou i ka honua a puni lākou, e like me ke ʻano o ka mālamalama maoli. No laila, ma mua o ka hoʻolalelale ʻana i nā kala he nui, ua kūkulu wau i kahi ʻōnaehana kukui liʻiliʻi e hoʻolalelale i hoʻokahi kala.
ʻO kaʻu hana mua, ʻo ia ke kau ʻana i kahi papa uhi ma waena o ke kua a me kaʻu mau kukui: < alahele id=" uhi" fill="var(--overlay-tint)" [...] style="mix-blend-mode: kala" />
Ua hoʻohana au i ka mix-blend-mode: ka waihoʻoluʻu no ka mea e hōʻike ana i ka mea ma lalo i ka mālama ʻana i ka luminance lalo. ʻOiai makemake wau e ʻike ʻia ka overlay i ka wā e hoʻāla ʻia ai nā animations, ua hana wau i ka overlay opt-in: .svg-mine #overlay { hōʻike: ʻaʻohe; }
@media (makemake-hōʻemi-neʻe: ʻaʻohe makemake) { .svg-mine[data-animations=on] #overlay { hōʻike: poloka; opacity: 0.5; } }
Ua paʻa ka uhi, akā ʻaʻole i pili i nā kukui. Ua makemake au i kumu kukui. He mea maʻalahi kaʻu mau kukui, a loaʻa i kēlā me kēia me kahi mea pōʻai aʻu i polū me kahi kānana. Hoʻopuka ka kānana i kahi blur palupalu loa ma luna o ka pōʻai holoʻokoʻa.
Ma kahi o ka hoʻokaʻawale ʻana i ka uhi a me nā kukui, hoʻolaʻa wau i hoʻokahi hōʻailona kala "flame" a loaʻa nā mea ʻē aʻe mai kēlā. ʻO ka mea mua, hoʻopaʻa inoa wau i ʻekolu mau waiwai maʻamau no nā kahawai OKLCH:
@waiwai --fl-l {
syntax: "
Ua hoʻolalelale au i kēlā mau kahawai, me ka hoʻolele ʻana i kekahi mau kiʻi i ka ʻalani i heluhelu ʻia ka ʻōlinolino e like me ke kukui ahi:
@keyframes lapalapa { 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; } }
A laila hoʻopili wau i kēlā animation i ka SVG, no laila ua loaʻa nā ʻano like ʻole i nā kukui a me kaʻu overlay:
@media (makemake-hōʻemi-neʻe: ʻaʻohe makemake) { .svg-mine[data-animations=on] { animation: lapalapa 3.6s laina laina ʻole; hoʻokaʻawale: hoʻokaʻawale;
/* E hana i kahi waihoʻoluʻu lapalapa mai nā kahawai animated */ --flame: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Loaʻa ke kala kukui mai ka lapalapa ahi */ --lamp-core: oklch(mai var(--flame) calc(l + 0.05) calc(c * 0.70) h);
*/ --overlay-tint: oklch(mai var(--flame) calc(l + 0.06) calc(c * 0.65) calc(h - 10)); } }
ʻO ka hope, ua hoʻopili au i kēlā mau kala i loaʻa i nā kukui ʻālohilohi a me ka uhi ʻana i hoʻopili ʻia: @media (makemake-hōʻemi-neʻe: ʻaʻohe makemake) { .svg-mine[data-animations=on] #mine-lamp-1 > pōʻai, .svg-mine[data-animations=on] #mine-lamp-2 > pōʻai { hoʻopiha: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { hōʻike: poloka; hoʻopiha: var(--overlay-tint); opacity: 0.5; } }
Ke neʻe ka lapalapa i ka ʻalani, mahana nā kukui, a pumehana ke ʻano me lākou. Ke maʻalili ka lapalapa, hoʻoponopono nā mea a pau. ʻO ka hapa maikaʻi loa, ʻaʻohe mea i kākau lima ʻia. Inā hoʻololi au i ka waihoʻoluʻu kumu a i ʻole e hoʻololi i nā pae hoʻonaninani ahi, e hoʻonui ka ʻōnaehana kukui holoʻokoʻa i ka manawa like. Hiki iā ʻoe ke ʻike i ka hopena hope ma kaʻu pūnaewele. Hoʻohana hou, hana hou, nānā hou Ua koi ʻia kēlā mau mea animator Hanna-Barbera e hoʻohana hou i nā mea no ka pono, akā hoʻohana hou au i nā kala no ka mea e ʻoi aku ka maʻalahi o kaʻu hana a me ka maʻalahi o ka mālama ʻana. Hiki iaʻu nā waiwai kala pili CSS e:
E wehewehe i ke kala kumu hoʻokahi, E wehewehe i ka pili ʻana o nā kala ʻē aʻe me ia, Hoʻohana hou i kēlā mau pilina ma nā wahi a pau, a E hoʻolalelale i ka ʻōnaehana ma ka hoʻololi ʻana i hoʻokahi waiwai.
ʻAʻole hiki ke maʻalahi ke kala pili. Paipai ia i ke ʻano o ka noʻonoʻo ʻana i ka manaʻo o ke kala, e like me ka neʻe - a ma kahi e hoʻololi ai i kahi waiwai ke hoʻololi i kahi hiʻohiʻona holoʻokoʻa me ke kākau ʻole ʻana i ka hana ma lalo.
