Min di van demên dawî de grafîkên anîmasyonî yên li ser malpera xwe bi mijarek nû û komek karakterên pêşeng nûve kir, û gelek teknîkên ku min di vê rêzefîlmê de parve kiribûn bi cih anîn. Çend anîmasyonên min dema ku kesek bi wan re an di demên cûda yên rojê de têkilî daynin xuyangê diguherînin.
Rengên di grafîkê de li ser rûpelên bloga min ji sibê heya êvarê her roj diguherin. Dûv re, moda berfê heye, ku rengên sar û mijarek zivistanî lê zêde dike, bi xêra qatek sergirtî û moda tevlihevkirinê.
Dema ku li ser vê yekê dixebitim, min dest pê kir ku meraq bikim gelo nirxên rengîn ên têkildar ên CSS-ê dikarin bêtir kontrolê bidin min di heman demê de pêvajoyê jî hêsan bikin. Nîşe: Di vê dersê de, ez ê balê bikişînim ser nirxên rengîn ên têkildar û cîhê rengê OKLCH ji bo grafîk û anîmasyonên mijarê. Heke hûn dixwazin di rengê têkildar de kûr bibin, Ahmad Shadeed rêbernameyek înteraktîf a hêja çêkir. Ji bo cîhên rengîn, gamut û OKLCH, Geoff Graham xweya me li ser wan nivîsand.
Bikaranîna dubare ya hêmanan girîng bû. Kîjan gengaz be paşxane ji nû ve hatin bikar anîn, bi zoom û serpêhatiyan re dibe alîkar ku dîmenên nû ji heman karê hunerî werin çêkirin. Ew ji neçariyê çêbû, lê di heman demê de ji bilî dîmenên kesane hizirkirina li gorî rêzefîlman teşwîq kir. Pirsgirêka Nûvekirina Destê Paletên Rengê Ka em rasterast werin ser dijwariya min. Di Toon Sernavên mîna vê yekê de - li ser bingeha beşa Yogi Bear Show 1959 "Lullabye-Bye Bear" - û xebata min bi gelemperî, palet bi çend rengan ve girêdayî ne.
Ez ji rengê ku ez jê re dibêjin "bingeh" reng û rengan diafirînim da ku paletê bê zêdekirina rengan zêde bikim.
Di Sketch de, ez di cîhê rengê HSL-ê de dixebitim, ji ber vê yekê ev pêvajo zêde an kêmkirina nirxa sivikbûna rengê bingeha min vedihewîne. Bi rastî, ew ne karekî dijwar e - lê hilbijartina rengek bingehîn a cûda hewce dike ku komek nû ya reng û rengan biafirîne. Bi destan kirina wê, dîsa û dîsa, zû dibe kedkar.
Min behsa HSL - H (reng), S (têrbûn), û L (ronahî) - cîhê rengan kir, lê ew tenê yek ji çend awayên danasîna rengan e. RGB - R (sor), G (kesk), B (şîn) - belkî ya herî nas e, bi kêmanî di forma xwe ya Hex de. Di heman demê de LAB - L (ronahî), A (kesk-sor), B (şîn-zer) - û ya nûtir, lê naha bi berfirehî piştgirî tê piştgirî kirin LCH - L (ronahî), C (chroma), H (reng) - di forma xweya OKLCH de. Bi LCH - bi taybetî OKLCH di CSS-ê de - ez dikarim nirxa sivikbûna rengê bingeha xwe rast bikim.
An jî ez dikarim kroma wê biguherim. Kroma LCH û têrbûna HSL her du tundî an dewlemendiya rengan diyar dikin, lê ew wiya bi awayên cûda dikin. LCH di navbera rengan de rêgezek firehtir û tevlihevkirina pêşbîntir dide min.
Di heman demê de ez dikarim reng biguherim da ku paletek rengan biafirînim ku heman sivikahî û nirxên kromê parve dikin. Hem di HSL û hem jî di LCH de, spektruma rengan bi sor dest pê dike, di nav kesk û şîn re derbas dibe û vedigere sor.
Çima OKLCH Guhert Çawa Ez Li ser Rengê Difikirim Piştgiriya gerokê ji bo cîhê rengê OKLCH naha berbelav e, hetta ku amûrên sêwiranê - tevî Sketch - nehatine girtin. Xweşbextane, divê ew nehêle ku hûn OKLCH bikar bînin. Gerok dê ji bo we nirxên Hex, HSL, LAB, û RGB bi kêfxweşî veguherînin OKLCH. Hûn dikarin taybetmendiyek xwerû ya CSS-ê bi rengek bingehîn li her deverê, tevî Hex, diyar bikin: /* Rengê bingehîn */ --foundation: #5accd6;
Her rengên ku jê hatine wergirtin dê bixweber veguhezînin OKLCH: --bingeh-ronahî: oklch(ji var(--bingeh) [...]; } --bingeh-mid: oklch(ji var(--bingeh) [...]; } --bingeh-tarî: oklch(ji var(--bingeh) [...]; }
Rengê Nêzîk Wek Pergalek Dîzaynê Rengê têkildar bifikire ku dibêje: "Vî rengî hilde, bihejîne, paşê encamê bide min." Du awayên eyarkirina rengan hene: Guhertinên mutleq û guhertinên rêjeyî. Ew di kodê de mîna hev xuya dikin, lê gava ku hûn dest bi guheztina rengên bingehê dikin pir cûda tevdigerin. Fêmkirina wê cûdahiyê ew e ku çi dikare bi karanîna rengê têkildar veguherîne pergalê. /* Rengê bingehîn */ --foundation: #5accd6;
Mînakî, nirxa ronahiya rengê bingeha min 0.7837 e, dema ku guhertoyek tarî nirxek 0.5837 heye. Ji bo hesabkirina cûdahiyê, ez nirxa jêrîn ji ya bilind derdixim û encamê bi karanîna fonksiyonek calc () ve dişoxilînim: --bingeh-tarî: oklch(ji var(--bingeh) calc (l - 0.20) c h);
Ji bo bidestxistina rengek sivik, ez cihêrengiyê lê zêde dikim: --bingeh-ronahî: oklch(ji var(--bingeh) calc(l + 0.10) c h);
Chromaverastkirinên li pey heman pêvajoyê. Ji bo ku tundiya rengê bingehê xwe ji 0.1035 berbi 0.0035 kêm bikim, ez nirxek ji ya din kêm dikim: oklch(ji var(--bingeh) l calc (c - 0.10) h);
Ji bo afirandina paletek rengan, ez cûdahiya di navbera nirxa rengê rengê bingehîn (200) û rengê xweya nû (260) de hesab dikim: oklch(ji var(--bingeh) lc calc(h + 60));
Ew hesabên mutleq in. Gava ku ez mîqdarek sabît jê derdixim, ez bi bandor dibêjim, "Her dem evqas jê kêm bike." Heman tişt dema ku nirxên sabît lê zêde bike jî derbas dibe: calc (c - 0.10) calc (c + 0.10)
Ez sînorên vê nêzîkbûnê bi riya dijwar fêr bûm. Dema ku min pişta xwe da kêmkirina nirxên kroma yên sabît, gava ku min bingeh guherand, reng ber bi gewr hilweşiyan. Paletek ku ji bo yek reng dixebitî ji bo rengek din ji hev ket. Pirrjimar cuda tevdigere. Dema ku ez chroma zêde dikim, ez ji gerokê re dibêjim: "Tundiya vî rengî bi rêjeyek kêm bike." Têkiliya di navbera rengan de bêkêmasî dimîne, tewra gava ku bingeh diguhere: calc (c * 0.10)
Rêbazên Min Wê Biguhezînin, Wê Mezin bikin, Wê Bizivirînin
Sivikbûnê bihejînin (zêde bikin an jê bikin), Scale chroma (pirkirin), Rengê bizivirîne (derece lê zêde bike an jê kêm bike).
Ez kromê pîvan dikim ji ber ku ez dixwazim guheztinên tundiyê li gorî rengê bingehîn bimînin. Têkiliyên rengîn zivirî ne, ji ber vê yekê pirkirina reng bê wate ye. Ronahî têgihîştî û bêkêmasî ye - pirkirina wê pir caran encamên ecêb derdixe.
Ji Yek Reng Berbi Tevahiya Mijarek Rengê têkildar destûrê dide min ku ez rengek bingehîn diyar bikim û her rengê din ku ez hewce dikim - tijîkirin, lêdan, rawestgehên gradient, siya - jê biafirînim. Di wê gavê de, reng dev ji paletiyekê berdide û dest bi sîstemekê dike. Nîşaneyên SVG meyla dikin ku heman çend rengan di nav dagirtin, lêdan, û gradientan de ji nû ve bikar bînin. Rengê têkildar dihêle hûn wan têkiliyan carekê diyar bikin û wan li her deverê ji nû ve bikar bînin - mîna anîmatoran ku paşnav ji nû ve bikar tînin da ku dîmenên nû biafirînin.
Rengê bingehê carekê biguhezînin, û her rengê hatî hilanîn bixweber nûve dibe, bêyî ku tiştek bi destê xwe ji nû ve hesab bike. Ji derveyî grafikên anîmasyonî, ez dikarim heman nêzîkatiyê bikar bînim da ku rengan ji bo rewşên hêmanên danûstendinê yên wekî bişkok û girêdan diyar bikim. Rengê bingehê ku min di sernavê Toon "Lullabye-Bye Bear" de bikar aniye, şînek şîn e. Paşîn di navbera bingeha min û guhertoyek tarî de gradientek radîkal e.
Ji bo afirandina guhertoyên alternatîf bi hestên bi tevahî cûda, ez tenê hewce dikim ku rengê bingehîn biguherim: --foundation: #5accd6; --grad-end: var(--foundation); --grad-destpêk: oklch(ji var(--bingeh) calc(l - 0.2357) calc(c * 0.833) h);
Ji bo girêdana wan taybetmendiyên xwerû bi gradienta xweya SVG-ê re bêyî dubarekirina nirxên rengîn, min nirxên rawest-rengê yên hişk-kodkirî bi şêwazên hundurîn veguhezand:
Dûv re, min hewce kir ku ez piştrast bikim ku Toon Text-a min her gav bi rengê bingehîn ku ez hildibijêrim berevajî dike. Zivirîna rengê 180 deg rengekî temamker çêdike ku bê guman derdikeve - lê dikare bi nerehetî bilerize: .text-light { dagirtin: oklch(ji var(--bingeh) l c calc (h + 180)); }
Veguheztinek 90° bêyî ku bi tevahî were temam kirin rengek duyemîn a zindî çêdike: .text-light { dagirtin: oklch(ji var(--bingeh) l c calc (h - 90)); }
Vejandina min a Quick Draw McGraw's 1959 Toon Title "El Kabong" heman teknîkan bikar tîne lê bi paletek cihêrengtir. Mînakî, di navbera rengê bingehê û siyek tarîtir de pileyek radîkalek din heye.
Avahî û dara li paşîn bi tenê rengên cûda yên heman rengê bingehê ne. Ji bo wan rêyan, min du rengên dagirtî yên din hewce kir: .bg-mid { dagirtin: oklch(ji var(--bingeh) calc (l - 0.04) calc (c * 0.91) h); }
.bg-dark { dagirtin: oklch(ji var(--bingeh) calc (l - 0,12) calc (c * 0,64) h); }
Dema ku Bingeh dest bi tevgerê dikin
Heya nuha, her tiştê ku min nîşan daye statîk bûye. Tewra gava ku kesek hilbijêrek rengan bikar tîne da ku rengê bingehîn biguhezîne, ew guhertin di cih de çêdibe. Lê grafikên anîmasyon kêm kêm disekinin - nîşan di nav de ye. Ji ber vê yekê, heke reng beşek pergalê ye, sedem tune ku ew nekare zindî bike jî.
Ji bo ku rengê bingehê zindî bike, ez pêşî hewce dikim ku wê li kanalên wê yên OKLCH veqetînim- sivikî, chroma û reng. Lê gavek zêde ya girîng heye: Divê ez wan nirxan wekî taybetmendiyên xwerû yên tîpkirî tomar bikim. Lê ev tê çi wateyê?
Bi xwerû, gerokek nizane ka nirxek xwerû ya CSS reng, dirêjî, hejmar, an tiştek din bi tevahî temsîl dike. Ew pir caran tê vê wateyê ku ew di dema anîmasyonê de nekarin bi hêsanî werin navber kirin, û ji nirxek berbi nirxek din ve biçin.
Qeydkirina milkek xwerû ji gerokê re celebê nirxa ku ew temsîl dike û çawa divê bi demê re tevbigere vedibêje. Di vê rewşê de, ez dixwazim gerok kanalên rengîn ên min wekî jimareyan binirxîne da ku ew bi rengek bêkêmasî werin anîm kirin.
@property --f-l {
hevoksazî: "
@property --f-c {
hevoksazî: "
@property --f-h {
hevoksazî: "
Piştî ku têne qeyd kirin, van taybetmendiyên xwerû mîna CSS-ya xwemalî tevdigerin. Gerok dikare wan çarçove-çarçove bike navber. Dûv re ez rengê bingehîn ji wan kanalan ji nû ve ava dikim: --bingeh: oklch(var(--f-l) var(--f-c) var(--f-h));
Ev dihêle ku rengê bingehê mîna her nirxek hejmarî yê din jîndar bibe. Li vir anîmasyonek "nefesê" ya hêsan heye ku bi zeman re sivikbûnê diguhezîne: @keyframes hilm { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { anîmasyon: nefesa 10s ease-in-out infinite; }
Ji ber ku her rengê din di dagirtin, gradient, û lêdanê de ji --foundationê tê wergirtin, ew hemî bi hev re zindî dibin, û tiştek hewce nake ku bi destan were nûve kirin. Yek Rengê Anîmasyon, Gelek Bandor Di destpêka vê pêvajoyê de, min meraq kir gelo nirxên rengîn ên têkildar ên CSS-ê dikarin bêtir îmkanan peyda bikin û di heman demê de pêkanîna wan hêsantir jî bikin. Min vê dawîyê paşxanek nû ya kanzaya zêr li rûpela pêwendiya malpera xwe zêde kir, û dubarekirina yekem lampayên rûnê yên ku dibiriqin û diherikin vedihewîne.
Min xwest ez vekolim ka çawa anîmkirina rengên têkildar ên CSS-ê dikare hundurê kanê bi rengkirina wê bi rengên ji lampeyan re realîsttir bike. Min dixwest ku ew bandorê li cîhana li dora xwe bikin, awayê ku ronahiya rastîn dike. Ji ber vê yekê, li şûna zindîkirina pir rengan, min pergalek ronahiyê ya piçûk ava kir ku tenê rengekî zindî dike.
Karê min ê yekem ew bû ku ez di navbera paşxane û lampayên xwe de qatek sergirtî bixim:
Min moda tevlihev-hevberdanê bikar anî: reng ji ber ku ew tiştê ku di binê wê de ye reng dide dema ku ronahiya bingehîn diparêze. Ji ber ku ez tenê dixwazim ku dema ku anîmasyon têne veguheztin pêvek xuya bibe, min vebijarka vegirtinê kir: .svg-mine #overlay { nîşan bide: tune; }
@media (tercîh-kêm-tevger: bê tercîh) { .svg-mine[data-animations=on] #overlay { display: block; zelalî: 0.5; } }
Zêde li cihê xwe bû, lê hîna bi çirayan ve nehatibû girêdan. Min hewceyê çavkaniyek ronahiyê bû. Lampeyên min sade ne, û her yek hêmanek çemberê dihewîne ku min bi parzûnekê vezelîne. Parzûn li ser tevahiya çemberê şeleyek pir nerm çêdike.
Li şûna ku ez serpêhatî û lampan ji hev cuda anîm bikim, ez nîşanek rengînek yekane "şewat" zindî dikim û her tiştê din ji wê derdixim. Pêşîn, ez sê taybetmendiyên xwerû yên tîpkirî ji bo kanalên OKLCH tomar dikim:
@property --fl-l {
hevoksazî: "
Min wan kanalan anîmasyon kir, bi qestî çend çarçove ber bi porteqalî ve hejand da ku felq bi zelalî wekî ronahiya agir were xwendin:
@keyframes flame { 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; } }
Dûv re min ew anîmasyon li SVG-ê vekir, ji ber vê yekê guhêrbarên hevpar hem ji lampe û hem jî ji serpêhatiya min re peyda dibin:
@media (tercîh-kêm-tevger: bê tercîh) { .svg-mine[data-animations=on] { anîmasyon: flame 3.6s infinite linear; îzolekirin: îzolekirin;
/* Ji kanalên anîmasyon rengê agir ava bikin */ --flam: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Rengê çirayê ji agirê hatiye */ --lamp-core: oklch(ji var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Rengê sergirtî ji heman agirê*/ --overlay-tint: oklch(ji var(--flame) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
Di dawiyê de, min ew rengên hilanîn li ser lampayên geş û pêvekirina ku ew bandor dikin sepand: @media (tercîh-kêm-tevger: bê tercîh) { .svg-mine[data-animations=on] #mine-lamp-1 > çember, .svg-mine[data-animations=on] #mine-lamp-2 > çember { tijîkirin: var(--lampa-core); }
.svg-mine[data-animations=on] #overlay { display: block; dagirtin: var(--overlay-tint); zelalî: 0.5; } }
Dema ku agir ber bi porteqalî ve diçe, çira germ dibin, û dîmen bi wan germ dibe. Dema ku agir sar dibe, her tişt bi hev re rûdine. Ya herî baş ev e ku tiştek bi destan nayê nivîsandin. Ger ez rengê bingehê biguherim an rêzikên anîmasyona agirê biguhezînim, tevahiya pergala ronahiyê bi hevdemî nûve dike. Hûn dikarin encama dawîn li ser malpera min bibînin. Ji nû ve bi kar anîn, ji nû ve bi kar anîn, ji nû ve vegerandin Ew anîmatorên Hanna-Barbera neçar bûn ku ji neçarî hêmanan ji nû ve bi kar bînin, lê ez rengan ji nû ve bikar tînim ji ber ku ew karê min domdartir û domandinê hêsantir dike. Nirxên rengîn ên têkildar ên CSS destûrê dide min ku:
Rengek bingehîn diyar bikin, Vebêjin ka rengên din çawa pê re têkildar in, Li her derê wan têkiliyan ji nû ve bikar bînin, û Bi guhertina yek nirxê pergalê zindî bikin.
Rengê têkildar ne tenê mijaran hêsantir dike. Ew rêgezek ramanê teşwîq dike ku reng, mîna tevger, bi mebest e - û li cihê ku guheztina yek nirx dikare dîmenek tevahî veguherîne bêyî ku xebata li binê wê ji nû ve binivîsîne.
