Recentlyakynda web sahypamdaky animasiýa grafikalaryny täze mowzuk we öňdebaryjy gahrymanlar topary bilen täzeledim, bu seriýada paýlaşan usullarymyň köpüsini durmuşa geçirdim. Animasiýalarymyň käbiri kimdir biri bilen ýa-da günüň dürli wagtlary bilen gatnaşyga girende daşky görnüşini üýtgedýär.
Blog sahypalarymyň üstündäki grafikadaky reňkler her gün irden agşama çenli üýtgeýär. Soň bolsa, salkyn reňkleri we çakyr temasyny goşýan gar re modeimi, örtük gatlagynyň we garyşyk re modeiminiň sypaýylygy bar.
Munuň üstünde işleýän wagtym, CSS degişlilikde reňk bahalary maňa has gözegçilik edip bilermi ýa-da prosesi ýönekeýleşdirip bilermi diýip pikir edip başladym. Bellik: Bu gollanmada grafika we animasiýa temalary üçin degişlilikde reňk bahalaryna we OKLCH reňk giňişligine üns bererin. Otnositel reňklere çuňňur çümmek isleseňiz, Ahmad Şadeed ajaýyp interaktiw gollanma döretdi. Reňk giňişlikleri, gamutlar we OKLCH barada aýdanymyzda, öz geof Graham olar hakda ýazdy.
Elementleri gaýta-gaýta ulanmak esasy zatdy. Fonlar mümkin boldugyça gaýtadan ulanyldy, ulaltmak we örtmek şol bir çeper eserden täze sahnalary gurmaga kömek etdi. Zerurlykdan döräpdi, ýöne aýratyn sahnalara däl-de, seriýa nukdaýnazaryndan pikirlenmäge itergi berdi. Reňk palitralaryny el bilen täzelemek meselesi Geliň, göni kynçylyklara geçeliň. 1959-njy ýyldaky “Loglabye-Bye aýy” epizodyna esaslanýan “Toon Titles” -de we umuman alanyňda, palitralar diňe birnäçe reňk bilen çäklenýär.
Palitrany has köp öwüşgin goşmazdan giňeltmek üçin “binýady” reňk diýip atlandyrýan zatlarymdan kölegeler we reňkler döredýärin.
Eskizde, HSL reňk giňişliginde işleýärin, şonuň üçin bu amal esasy reňkimiň ýeňillik bahasyny ýokarlandyrmagy ýa-da peseltmegi öz içine alýar. Dogrusyny aýtsak, bu kyn iş däl, ýöne başga bir reňk saýlamak, täze öwüşginler we reňkler toplumyny döretmegi talap edýär. Muny el bilen gaýtalap, çalt zähmet çekýär.
HSL - H (hue), S (doýma) we L (ýeňillik) - reňk giňişligini belledim, ýöne bu reňk suratlandyrmagyň birnäçe usullaryndan biridir. RGB - R (gyzyl), G (ýaşyl), B (gök) - iň bolmanda Hex görnüşinde iň tanyşdyr. Şeýle hem LAB - L (ýeňillik), A (ýaşyl - gyzyl), B (gök - sary) - we has täze, ýöne häzirki wagtda giňden goldanýan LCH - L (ýeňillik), C (hroma), H (hue) - OKLCH görnüşinde. LCH bilen - esasanam CSS-de OKLCH - Esasy reňkimiň ýeňillik bahasyny sazlap bilerin.
Ora-da men onuň hromasyny üýtgedip bilerin. LCH hroma we HSL doýgunlygy ikisi hem reňkiň intensiwligini ýa-da baýlygyny suratlandyrýar, ýöne muny dürli usullar bilen edýär. LCH maňa has giň gerim we reňkleriň arasynda has öňünden aýdylýan garyşyk berýär.
Şol bir wagtyň özünde şol bir ýeňillik we hroma bahalaryny paýlaşýan reňkler palitrasyny döretmek üçin reňkini üýtgedip bilerin. HSL we LCH ikisinde-de reňk spektri gyzyl reňkde başlaýar, ýaşyl we gök reňkde hereket edýär we gyzyl reňkde bolýar.
Näme üçin OKLCH reňk hakda pikirimi üýtgetdi OKLCH reňk giňişligi üçin brauzer goldawy, hatda dizaýn gurallary, şol sanda Eskiz hem ele alynmasa-da giňden ýaýrady. Bagtymyza, bu sizi OKLCH ulanmagyňyza päsgel bermeli däldir. Brauzerler şatlyk bilen Hex, HSL, LAB we RGB bahalaryny siziň üçin OKLCH-e öwürer. “Hex” -i goşmak bilen islendik giňişlikde esasy reňkli CSS aýratyn emlägini kesgitläp bilersiňiz: / * Esasy reňk * / - esas: # 5accd6;
Ondan alnan islendik reňk awtomatiki usulda OKLCH öwrüler: --foundation-light: oklch (var (- esasdan) [...];} --foundation-mid: oklch (var (- esasdan) [...];} --foundation-dark: oklch (var (- esasdan) [...];}
Dizaýn ulgamy hökmünde otnositel reňk Reňkli reňk hakda pikir ediň: “Bu reňki alyň, ýuwuň, soň netijäni beriň”. Reňki sazlamagyň iki usuly bar: mutlak üýtgeşmeler we proporsional üýtgeşmeler. Kodda meňzeş görünýär, ýöne düýbüniň reňklerini çalşyp başlanyňyzdan soň başgaça hereket ediň. Şol tapawuda düşünmek, otnositel reňk ulanyp ulgama öwrülip bilýän zat. / * Esasy reňk * / - esas: # 5accd6;
Mysal üçin, düýbümiň reňkiniň ýeňillik bahasy 0.7837, garaňky wersiýasynyň bahasy 0,5837. Tapawudy hasaplamak üçin aşaky bahany has ýokarydan aýyrýaryn we netijäni calc () funksiýasy bilen ulanýaryn: - esas-garaňky: oklch (var (- esasdan) hasaplamak (l - 0,20) c h);
Has açyk reňk gazanmak üçin, tapawudyny goşýaryn: - çyra: oklch (var (- esasdan) hasaplamak (l + 0.10) c h);
Hromadüzedişler şol bir prosese eýerýär. Esasy reňkimiň intensiwligini 0.1035-den 0,0035-e çenli azaltmak üçin bir bahany beýlekisinden aýyrýaryn: oklch (var (- esasdan) l hasap (c - 0.10) sag);
Reňkler palitrasyny döretmek üçin, düýbümiň reňkiniň (200) we täze reňkimiň (260) arasyndaky tapawudy hasaplaýaryn: oklch (var (- esasdan) l c hasap (h + 60));
Şol hasaplamalar mutlak. Belli bir mukdar aýyranymda, "Elmydama muny köp aýyryň" diýýärin. Kesgitlenen bahalary goşanyňyzda-da ulanylýar: hasaplamak (c - 0.10) hasaplamak (c + 0.10)
Bu çemeleşmäniň çägini gaty kyn öwrendim. Kesgitlenen hroma bahalaryny aýyrmaga bil baglanymda, binýady üýtgeden badyma reňkler çal reňkde çökdi. Bir reňkde işleýän palitranyň beýlekisi ýykyldy. Köpeltmek başgaça hereket edýär. Hromany köpeldenimde, brauzere: "Bu reňkiň intensiwligini bir ululykda azaldyň" diýýärin. Reňkleriň arasyndaky baglanyşyk, esas üýtgese-de üýtgewsiz galýar: hasaplamak (c * 0.10)
Göçüriň, ulaldyň, aýlaň düzgünleri
Lighteňilligi süýşüriň (goşuň ýa-da aýyryň), Tereziniň hromasy (köpeltmek), Hue aýlaň (dereje goşuň ýa-da aýyryň).
Hromany ulaldýaryn, sebäbi intensiwlik üýtgemeleriniň esasy reňk bilen proporsional bolmagyny isleýärin. Hue gatnaşyklary aýlanýar, şonuň üçin reňk köpeltmegiň manysy ýok. Lighteňillik duýgur we mutlakdyr - köpeltmek köplenç geň netijeleri berýär.
Bir reňkden tutuş mowzuga Deňeşdirilen reňk binýadyň reňkini kesgitlemäge we maňa gerek bolan beýleki reňkleri - doldurýar, urýar, gradient duralgalaryny, kölegeleri döredýär. Şonda reňk palitradan çykýar we ulgam bolup başlaýar. SVG illýustrasiýalary doldurgyçlarda, urgylarda we gradiýentlerde birmeňzeş reňkleri ulanmaga ýykgyn edýär. Otnositel reňk, bu gatnaşyklary bir gezek kesgitlemäge we hemme ýerde gaýtadan ulanmaga mümkinçilik berýär - animatorlaryň täze sahnalary döretmek üçin fonlaryny gaýtadan ulanşy ýaly.
Esasy reňkini bir gezek üýtgediň we her bir reňk el bilen hiç zady hasaplamazdan awtomatiki täzelenýär. Animasiýa grafikasynyň daşynda, düwmeler we baglanyşyklar ýaly interaktiw elementleriň ýagdaýlary üçin reňkleri kesgitlemek üçin şol bir çemeleşmäni ulanyp bilerdim. “Lullabye-Bye aýy” Toon adynda ulanan düýbüm reňki gök öwüsýän gök. Fon, binýadym bilen has garaňky wersiýanyň arasynda radial gradient.
Dürli üýtgeşik keýpli alternatiw wersiýalary döretmek üçin diňe binýadyň reňkini üýtgetmeli: - esas: # 5accd6; --grad-end: var (- esas); --grad-start: oklch (var (- esasdan) hasap (l - 0.2357) hasap (c * 0.833) sag);
Şol aýratyn häsiýetleri reňk bahalaryny köpeltmän, SVG gradientime baglamak üçin, gaty kodlanan stop-color bahalaryny içerki stil bilen çalyşdym:
Ondan soň, Toon Tekstimiň hemişe haýsy reňk reňkini saýlaýandygyna göz ýetirmeli. 180deg reňkli aýlaw, elbetde açylýan, ýöne oňaýsyz titräp bilýän goşmaça reňk öndürýär: .text-light { doldurmak: oklch (var-dan) l c hasap (h + 180)); }
90 ° smena doly goşmaça bolmazdan açyk ikinji derejeli reňk döredýär: .text-light { doldurmak: oklch (var-dan (- esasdan) l c hasap (h - 90)); }
“Quick Draw McGraw” -yň 1959-njy ýyldaky “El Kabong” adynyň dynç alyşy şol bir usullary ulanýar, ýöne has dürli palitrasy bilen. Mysal üçin, binýadyň reňki bilen garaňky kölegäniň arasynda başga bir radial gradient bar.
Arka tarapdaky bina we agaç, birmeňzeş reňkdäki dürli öwüşginlerdir. Şol ýollar üçin maňa goşmaça iki reňk gerekdi: .bg-mid { doldurmak: oklch (var-dan) hasap (l - 0.04) hasap (c * 0.91) sag); }
.bg-dark { doldurmak: oklch (var-dan (- esasdan) hasap (l - 0.12) hasap (c * 0.64) h); }
Haçan-da esaslar gymyldap başlanda
Şu wagta çenli görkezen zatlarymyň hemmesi statik. Hatda kimdir biri reňk reňkini üýtgetmek üçin reňk saýlaýjyny ulansa-da, şol üýtgeşiklik derrew bolup geçýär. Animöne animasiýa grafikasy seýrek dur - bu meseläniň ady. Şeýlelik bilen, reňk ulgamyň bir bölegi bolsa, onuň hem janlandyryp bilmezliginiň sebäbi ýok.
Esasy reňkini janlandyrmak üçin ilki bilen ony OKLCH kanallaryna bölmeli- ýeňillik, hroma we reňk. Anöne möhüm goşmaça ädim bar: Şol bahalary adaty adaty aýratynlyklar hökmünde hasaba almaly. Emma munuň manysy näme?
Düzgüne görä, brauzer CSS-iň adaty emläk bahasynyň reňkini, uzynlygyny, sanyny ýa-da başga bir zady aňladýandygyny bilmeýär. Bu, köplenç animasiýa wagtynda oňat interpolirlenip bilmejekdigini we bir bahadan beýlekisine geçip bilmejekdigini aňladýar.
Hususy emlägi hasaba almak, brauzere görkezýän bahasynyň görnüşini we wagtyň geçmegi bilen özüni alyp barşyny aýdýar. Bu ýagdaýda, brauzeriň reňkli kanallarymyza sanlar ýaly garamagyny isleýärin, şonuň üçin göwnejaý animasiýa edilip bilner.
@property --f-l {
sintaksis: "
@property --f-c {
sintaksis: "
@property --f-h {
sintaksis: "
Hasaba alnandan soň, bu adaty häsiýetler ýerli CSS ýaly hereket edýär. Brauzer olary çarçuwalaýyn edip biler. Soňra şol kanallardan binýadyň reňkini täzeden gurýaryn: - esas: oklch (var (- f-l) var (- f-c) var (- f-h));
Bu, beýleki san bahalary ýaly binýadyň reňkini janlandyrýar. Ine, wagtyň geçmegi bilen ýeňilligi ýuwaşlyk bilen üýtgedýän ýönekeý “dem alýan” animasiýa: @keyframes dem alýar { 0%, 100% {--f-l: 0.36; } 50% {--f-l: 0.46; } }
.toon-title { animasiýa: 10-a aňsatlyk bilen dem alyň; }
Doldurmalar, gradiýentler we urgylardaky beýleki reňkler - esasdan emele gelendigi sebäpli, hemmesi bilelikde janlanýar we hiç zat el bilen täzelenmeli däl. Bir animasiýa reňk, köp effekt Bu amalyň başynda, CSS degişlilikde reňk bahalarynyň has köp mümkinçilik hödürläp biljekdigi ýa-da durmuşa geçirmegi has ýönekeýleşdirip biljekdigi hakda pikir etdim. Recentlyakynda web sahypamyň aragatnaşyk sahypasyna täze altyn käniniň fonuny goşdum, birinji gezek ýalpyldawuk we yrgyldadýan ýag çyralary bar.
CSS otnositel reňkleriň, lampalaryň reňkleri bilen reňklenip, minanyň içini has reallaşdyryp biljekdigini öwrenmek isledim. Hakyky ýagtylygyň edişi ýaly, töweregindäki dünýä täsir etmegini isledim. Şeýlelik bilen, köp reňkleri janlandyrmagyň ýerine, diňe bir reňki janlandyrýan kiçijik yşyklandyryş ulgamyny gurdum.
Ilkinji işim, fon bilen lampalaryň arasynda örtük gatlagyny ýerleşdirmekdi: <ýol id = "örtük" doldur = "var (- örtük-reňk)" [...] style = "mix-mix-mode: color" />
Garyşyk-garyşyk re modeimini ulanýardym: reňk, sebäbi esasy ýagtylygy gorap saklamak bilen onuň aşagyndaky zatlary görkezýär. Diňe animasiýa açylanda örtügiň görünmegini isleýänim üçin, örtügi optiki etdim: .svg-mine #overlay { görkezmek: ýok; }
@media (peseldilen hereketi: ileri tutmaýar) { .svg-mine [data-animations = on] #overlay { görkezmek: blokirlemek; düşnüksizlik: 0,5; } }
Üsti örtüldi, ýöne entek lampalara birikdirilmedi. Maňa ýagtylyk çeşmesi gerekdi. Çyralarym ýönekeý we hersinde süzgüç bilen bulaşan tegelek element bar. Süzgüç tutuş tegelegiň üstünde gaty ýumşak bulaşyklyk döredýär.
Örtügi we lampalary aýratyn janlandyrmagyň ýerine, ýekeje “alaw” reňk nyşanyny janlandyrýaryn we beýleki zatlaryň hemmesini alýaryn. Ilki bilen, OKLCH kanallary üçin üç sany adaty häsiýeti hasaba alýaryn:
@property --fl-l {
sintaksis: "
Şol kanallary janlandyrdym, bilkastlaýyn birnäçe ramkany mämişi tarapa itekledim, şonuň üçin çyraçy ody ýaly aýdyň okaýar:
@keyframes alawy { 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; } }
Soňra bu animasiýany SVG-e geçirdim, şonuň üçin umumy üýtgeýänler lampalara-da, üstüme-de örtülip bilner:
@media (peseldilen hereketi: ileri tutmaýar) { .svg-mine [data-animations = on] { animasiýa: ýalyn 3.6s çäksiz çyzykly; izolýasiýa: izolirlemek;
/ * Animasiýa kanallaryndan alaw reňkini guruň * / - ot: oklch (var (- fl-l) var (- fl-c) var (- fl-h));
/ * Alawdan alnan çyranyň reňki * / - çyra ýadrosy: oklch (var (- ýalyn) kalk (l + 0.05) hasap (c * 0.70) sag);
/ * Şol bir alawdan alnan örtük reňk * / - overlay-tint: oklch (var-dan (- ýalyn) hasap (l + 0.06) hasap (c * 0.65) hasap (h - 10)); } }
Ahyrynda, alnan reňkleri ýalpyldawuk lampalara we olaryň täsir edýän örtügine ulandym: @media (peseldilen hereketi: ileri tutmaýar) { .svg-mine [data-animations = on] # mine-lampa-1> tegelek, .svg-mine [data-animations = on] # mine-lampa-2> tegelek { doldurmak: var (- lampa ýadrosy); }
.svg-mine [data-animations = on] #overlay { görkezmek: blokirlemek; doldurmak: var (- örtük-reňk); düşnüksizlik: 0,5; } }
Alaw mämişi tarapa öwrülende, lampalar gyzýar we sahna olar bilen gyzýar. Alaw sowanda, hemme zat bir ýere jemlenýär. Iň gowy tarapy, hiç zat el bilen ýazylmaýar. Esasy reňkini üýtgedenimde ýa-da ýalyn animasiýa diapazonlaryny üýtgeden bolsam, tutuş yşyklandyryş ulgamy bir wagtda täzelenýär. Iň soňky netijäni web sahypamda görüp bilersiňiz. Gaýtadan ulanmak, gaýtalamak, gaýtadan gözden geçirmek Şol Hanna-Barbera animatorlary zerurlyk sebäpli elementleri gaýtadan ulanmaga mejbur boldular, ýöne reňkleri gaýtadan ulanýaryn, sebäbi bu işimi has yzygiderli we dowam etdirýär. CSS degişlilikde reňk bahalary maňa rugsat berýär:
Bir binýadyň reňkini kesgitläň, Beýleki reňkleriň munuň bilen baglanyşygyny aýdyp beriň, Şol gatnaşyklary hemme ýerde ulanyň we Bir bahany üýtgedip ulgamy janlandyryň.
Deňeşdirilen reňk diňe temany aňsatlaşdyrmaýar. Reňk, hereket ýaly, bilgeşleýin - we bir bahany üýtgetmek, aşagyndaky eseri täzeden ýazmazdan bütin sahnany üýtgedip biljek pikirleniş usulyny höweslendirýär.
