Kohët e fundit kam rifreskuar grafikën e animuar në faqen time të internetit me një temë të re dhe një grup personazhesh pionierë, duke vënë në praktikë shumë nga teknikat që kam ndarë në këtë seri. Disa nga animacionet e mia ndryshojnë pamjen kur dikush ndërvepron me ta ose në periudha të ndryshme të ditës.
Ngjyrat në grafikun në krye të faqeve të blogut tim ndryshojnë nga mëngjesi deri në mbrëmje çdo ditë. Më pas, është modaliteti i borës, i cili shton ngjyra të ftohta dhe një temë dimërore, me mirësjellje të një shtrese mbivendosjeje dhe një modaliteti përzierjeje.
Ndërsa punoja për këtë, fillova të pyesja veten nëse vlerat relative të ngjyrave CSS mund të më jepnin më shumë kontroll duke thjeshtuar gjithashtu procesin. Shënim: Në këtë tutorial, unë do të fokusohem në vlerat relative të ngjyrave dhe hapësirën e ngjyrave OKLCH për grafika dhe animacione me tematikë. Nëse dëshironi të zhyteni thellë në ngjyrën relative, Ahmad Shadeed krijoi një udhëzues të shkëlqyer ndërveprues. Sa për hapësirat e ngjyrave, gamat dhe OKLCH, Geoff Graham ynë shkroi për to.
Përdorimi i përsëritur i elementeve ishte kyç. Sfondet ripërdoreshin kurdoherë që ishte e mundur, me zmadhimet dhe mbivendosjet që ndihmonin në ndërtimin e skenave të reja nga e njëjta vepër arti. Ai lindi nga nevoja, por gjithashtu inkurajoi të menduarit për sa i përket serialeve dhe jo skenave individuale. Problemi me përditësimin manual të paletave të ngjyrave Le të kalojmë direkt në sfidën time. Në titujt Toon si ky - i bazuar në episodin e "Yogi Bear Show" të vitit 1959 "Lullabye-Bye Bear" - dhe në punën time në përgjithësi, paletat janë të kufizuara në disa ngjyra të zgjedhura.
Unë krijoj nuanca dhe nuanca nga ajo që e quaj ngjyra ime "themeli" për të zgjeruar paletën pa shtuar më shumë nuanca.
Në Sketch, unë punoj në hapësirën e ngjyrave HSL, kështu që ky proces përfshin rritjen ose uljen e vlerës së butësisë së ngjyrës sime të bazës. Sinqerisht, nuk është një detyrë e mundimshme – por zgjedhja e një ngjyre të ndryshme themeli kërkon krijimin e një grupi krejtësisht të ri nuancash dhe nuancash. Bërja e kësaj me dorë, përsëri dhe përsëri, shpejt bëhet e mundimshme.
Unë përmenda hapësirën e ngjyrave HSL - H (ngjyrë), S (ngopje) dhe L (lehtësi), por kjo është vetëm një nga disa mënyra për të përshkruar ngjyrën. RGB - R (e kuqe), G (jeshile), B (blu) - është ndoshta më e njohura, të paktën në formën e saj Hex. Ekziston gjithashtu LAB - L (lehtësia), A (jeshile-e kuqe), B (blu-verdhë) - dhe modeli më i ri, por tani i mbështetur gjerësisht LCH - L (lehtësia), C (kroma), H (ngjyrë) - në formën e tij OKLCH. Me LCH - veçanërisht OKLCH në CSS - mund të rregulloj vlerën e butësisë së ngjyrës sime të themelit.
Ose mund të ndryshoj ngjyrën e saj. LCH chroma dhe ngopja HSL përshkruajnë të dyja intensitetin ose pasurinë e një ngjyre, por ato e bëjnë këtë në mënyra të ndryshme. LCH më jep një gamë më të gjerë dhe përzierje më të parashikueshme midis ngjyrave.
Mund të ndryshoj gjithashtu nuancën për të krijuar një gamë ngjyrash që ndajnë të njëjtat vlera të buta dhe krome. Si në HSL ashtu edhe në LCH, spektri i nuancave fillon me të kuqe, lëviz nëpër jeshile dhe blu dhe kthehet në të kuqe.
Pse OKLCH ndryshoi mënyrën se si mendoj për ngjyrën Mbështetja e shfletuesit për hapësirën e ngjyrave OKLCH tani është e përhapur, edhe nëse mjetet e dizajnit - duke përfshirë Sketch - nuk kanë arritur. Për fat të mirë, kjo nuk duhet t'ju ndalojë të përdorni OKLCH. Shfletuesit do të konvertojnë me kënaqësi vlerat Hex, HSL, LAB dhe RGB në OKLCH për ju. Ju mund të përcaktoni një pronë të personalizuar CSS me një ngjyrë themeli në çdo hapësirë, duke përfshirë Hex: /* Ngjyra e themelit */ --themeli: #5accd6;
Çdo ngjyrë që rrjedh prej saj do të konvertohet automatikisht në OKLCH: --themeli-dritë: oklch(nga var(--themeli) [...]; } --themeli-mid: oklch(nga var(--themeli) [...]; } --themeli-errësirë: oklch(nga var(--themeli) [...]; }
Ngjyra relative si një sistem dizajni Mendoni për ngjyrën relative duke thënë: "Merrni këtë ngjyrë, shkuleni atë dhe më jepni rezultatin". Ka dy mënyra për të rregulluar një ngjyrë: ndryshime absolute dhe ndryshime proporcionale. Ata duken të ngjashëm në kod, por sillen shumë ndryshe pasi të filloni të ndërroni ngjyrat e fondamentit. Të kuptuarit e këtij ndryshimi është ajo që mund të shndërrojë përdorimin e ngjyrës relative në një sistem. /* Ngjyra e themelit */ --themeli: #5accd6;
Për shembull, vlera e butësisë së ngjyrës sime të themelit është 0,7837, ndërsa një version më i errët ka një vlerë prej 0,5837. Për të llogaritur diferencën, unë zbres vlerën më të ulët nga ajo më e lartë dhe zbatoj rezultatin duke përdorur një funksion calc(): --themeli-errësirë: oklch(nga var(--themeli) kalc(l - 0,20) c h);
Për të arritur një ngjyrë më të çelur, në vend të kësaj shtoj ndryshimin: --themeli-dritë: oklch(nga var(--themeli) kalc(l + 0,10) c h);
Chromarregullimet ndjekin të njëjtin proces. Për të zvogëluar intensitetin e ngjyrës sime të themelit nga 0,1035 në 0,0035, unë zbres njërën vlerë nga tjetra: oklch(nga var(--themeli) l kalc(c - 0,10) h);
Për të krijuar një gamë nuancash, unë llogaris ndryshimin midis vlerës së nuancës së ngjyrës sime të bazës (200) dhe nuancës time të re (260): oklch(nga var(--themeli) l c kalc (h + 60));
Këto llogaritje janë absolute. Kur zbres një shumë fikse, në mënyrë efektive po them: "Zbrisni gjithmonë kaq". E njëjta gjë vlen kur shtohen vlera fikse: kalc(c - 0,10) kalc(c + 0,10)
I mësova kufijtë e kësaj qasjeje në mënyrën e vështirë. Kur u mbështeta në zbritjen e vlerave fikse të kromës, ngjyrat u rrëzuan drejt grisë sapo ndryshova bazën. Një paletë që funksiononte për një ngjyrë u nda për një tjetër. Shumëzimi sillet ndryshe. Kur shumëzoj chromën, po i them shfletuesit: "Zvogëlo intensitetin e kësaj ngjyre me një proporcion". Marrëdhënia midis ngjyrave mbetet e paprekur, edhe kur themeli ndryshon: llogaritje (c * 0,10)
Rregullat e mia Move It, Scale It, Rotate It
Lëvizni lehtësinë (shtoni ose zbritni), Shkallëzimi i kromës (shumohet), Rrotulloni nuancën (shtoni ose zbritni gradë).
E shkallëzoj kromin sepse dua që ndryshimet e intensitetit të qëndrojnë proporcionale me ngjyrën bazë. Marrëdhëniet e nuancave janë rrotulluese, kështu që shumëzimi i nuancës nuk ka kuptim. Lehtësia është perceptuese dhe absolute - duke e shumëzuar atë shpesh prodhon rezultate të çuditshme.
Nga një ngjyrë në një temë të tërë Ngjyra relative më lejon të përcaktoj një ngjyrë bazë dhe të gjeneroj çdo ngjyrë tjetër që më nevojitet - mbushje, goditje, ndalesa gradient, hije - prej saj. Në atë pikë, ngjyra pushon së qeni një paletë dhe fillon të jetë një sistem. Ilustrimet SVG priren të ripërdorin të njëjtat pak ngjyra nëpër mbushje, goditje dhe gradient. Ngjyra relative ju lejon t'i përcaktoni ato marrëdhënie një herë dhe t'i ripërdorni ato kudo - njësoj si animatorët që ripërdorën sfondet për të krijuar skena të reja.
Ndryshoni një herë ngjyrën e bazës dhe çdo ngjyrë e prejardhur përditësohet automatikisht, pa rillogaritur asgjë me dorë. Jashtë grafikëve të animuar, unë mund të përdor të njëjtën qasje për të përcaktuar ngjyrat për gjendjet e elementeve ndërvepruese si butonat dhe lidhjet. Ngjyra e bazës që përdora në titullin tim të filmit "Lullabye-Bye Bear" është një blu me pamje blu. Sfondi është një gradient radial midis themelit tim dhe një versioni më të errët.
Për të krijuar versione alternative me humor krejtësisht të ndryshme, më duhet vetëm të ndryshoj ngjyrën e themelit: --themeli: #5accd6; --grad-fund: var(--themeli); --grad-start: oklch(nga var(--themeli) kalc (l - 0,2357) kalc (c * 0,833) h);
Për t'i lidhur ato veti të personalizuara me gradientin tim SVG pa dublikuar vlerat e ngjyrave, unë zëvendësova vlerat e ngjyrave të ndalimit të koduara me stile inline:
Më tej, më duhej të sigurohesha që Toon Text tim të ishte gjithmonë në kontrast me çfarëdo ngjyre themeli që unë zgjedh. Një rrotullim i nuancave prej 180 gradë prodhon një ngjyrë plotësuese që me siguri shfaqet - por mund të lëkundet në mënyrë të pakëndshme: .text-light { mbush: oklch(nga var(--themeli) l c llogaritur (h + 180)); }
Një zhvendosje 90° prodhon një ngjyrë dytësore të gjallë pa qenë plotësisht plotësuese: .text-light { mbush: oklch(nga var(--themeli) l c kalc (h - 90)); }
Rikrijimi im i Quick Draw McGraw's Toon Title "El Kabong" i vitit 1959 përdor të njëjtat teknika, por me një gamë më të larmishme. Për shembull, ekziston një gradient tjetër radial midis ngjyrës së themelit dhe një nuance më të errët.
Ndërtesa dhe pema në sfond janë thjesht nuanca të ndryshme të së njëjtës ngjyrë themeli. Për ato shtigje, më duheshin dy ngjyra shtesë: .bg-mid { mbush: oklch(nga var(--themeli) kalc (l - 0,04) kalc (c * 0,91) h); }
.bg-dark { mbush: oklch(nga var(--themeli) kalc (l - 0,12) kalc (c * 0,64) h); }
Kur themelet fillojnë të lëvizin
Deri më tani, gjithçka që kam treguar ka qenë statike. Edhe kur dikush përdor një zgjedhës ngjyrash për të ndryshuar ngjyrën e bazës, ky ndryshim ndodh menjëherë. Por grafikat e animuara rrallë qëndrojnë të palëvizshme - e dhëna është te emri. Pra, nëse ngjyra është pjesë e sistemit, nuk ka arsye që të mos mund të animojë gjithashtu.
Për të animuar ngjyrën e bazës, fillimisht më duhet ta ndaj në kanalet e saj OKLCH- butësia, kroma dhe nuanca. Por ka një hap të rëndësishëm shtesë: më duhet t'i regjistroj ato vlera si veti të personalizuara të shtypura. Por çfarë do të thotë kjo?
Si parazgjedhje, një shfletues nuk e di nëse vlera e vetive të personalizuara CSS përfaqëson një ngjyrë, gjatësi, numër ose diçka krejtësisht tjetër. Kjo shpesh do të thotë se ato nuk mund të ndërthuren pa probleme gjatë animacionit dhe të hidhen nga një vlerë në tjetrën.
Regjistrimi i një vetie të personalizuar i tregon shfletuesit llojin e vlerës që përfaqëson dhe si duhet të sillet me kalimin e kohës. Në këtë rast, unë dua që shfletuesi t'i trajtojë kanalet e mia me ngjyra si numra në mënyrë që ato të mund të animohen pa probleme.
@property --f-l {
sintaksa: "
@property --f-c {
sintaksa: "
@property --f-h {
sintaksa: "
Pasi të regjistrohen, këto veti të personalizuara sillen si CSS amtare. Shfletuesi mund t'i interpolojë ato kornizë për kornizë. Unë pastaj rindërtoj ngjyrën e themelit nga ato kanale: --themeli: oklch(var(--f-l) var(--f-c) var(--f-h));
Kjo bën që ngjyra e themelit të bëhet e gjallë, ashtu si çdo vlerë tjetër numerike. Këtu është një animacion i thjeshtë "frymëmarrje" që ndryshon butësisht lehtësinë me kalimin e kohës: @keyframes fryme { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animacion: frym 10s easy-in-out infinite; }
Për shkak se çdo ngjyrë tjetër në mbushje, gradient dhe goditje rrjedh nga --themeli, ato të gjitha animohen së bashku dhe asgjë nuk duhet të përditësohet manualisht. Një ngjyrë e animuar, shumë efekte Në fillim të këtij procesi, pyesja veten nëse vlerat relative të ngjyrave CSS mund të ofrojnë më shumë mundësi, duke i bërë ato më të thjeshta për t'u zbatuar. Kohët e fundit kam shtuar një sfond të ri të minierës së arit në faqen e kontaktit të faqes sime të internetit dhe përsëritja e parë përfshinte llamba vaji që shkëlqejnë dhe lëkunden.
Doja të eksploroja se si gjallërimi i ngjyrave relative CSS mund ta bënte brendësinë e minierës më realiste duke e ngjyrosur me ngjyra nga llambat. Doja që ata të ndikonin në botën përreth tyre, siç ndikon drita e vërtetë. Pra, në vend që të animoj ngjyra të shumta, unë ndërtova një sistem të vogël ndriçimi që animon vetëm një ngjyrë.
Detyra ime e parë ishte të vendosja një shtresë mbivendosjeje midis sfondit dhe llambave të mia:
Kam përdorur modalitetin mix-blend: color sepse ngjyros atë që është nën të duke ruajtur ndriçimin themelor. Duke qenë se unë dua që mbivendosja të jetë e dukshme vetëm kur animacionet janë të aktivizuara, unë vendosa mbivendosjen: .svg-mine #overlay { shfaqja: asnjë; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { shfaqja: bllok; opaciteti: 0,5; } }
Mbivendosja ishte në vend, por ende jo e lidhur me llambat. Më duhej një burim drite. Llambat e mia janë të thjeshta dhe secila përmban një element rrethi që e kam turbulluar me një filtër. Filtri prodhon një turbullim shumë të butë në të gjithë rrethin.
Në vend që të animoj mbivendosjen dhe llambat veç e veç, unë animoj një shenjë të vetme ngjyrash "flake" dhe nxjerr gjithçka tjetër nga kjo. Së pari, unë regjistroj tre veti të personalizuara të shtypura për kanalet OKLCH:
@property --fl-l {
sintaksa: "
I animova ato kanale, duke shtyrë qëllimisht disa korniza drejt portokallisë, në mënyrë që dridhja të lexohet qartë si drita e zjarrit:
@keyframes flaka { 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; } }
Pastaj e vendosa atë animacion në SVG, kështu që variablat e përbashkëta janë të disponueshme si për llambat ashtu edhe për mbivendosjen time:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animacion: flaka 3.6s infinite lineare; izolim: izoloj;
/* Ndërtoni një ngjyrë flakë nga kanalet e animuar */ --flaka: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Ngjyra e llambës që rrjedh nga flaka */ --Land-core: oklch(nga var(--flaka) calc(l + 0.05) calc(c * 0.70) h);
/* Ngjyrosja e mbivendosjes që rrjedh nga e njëjta flakë */ --overlay-tint: oklch(nga var(--flake) kalc(l + 0.06) kalc(c * 0.65) kalc(h - 10)); } }
Së fundi, unë aplikova ato ngjyra të prejardhura në llambat me ngjyra të ndezura dhe mbivendosjen që ato ndikojnë: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > rrethi, .svg-mine[data-animations=on] #mine-lamp-2 > rrethi { mbush: var (--llambë-core); }
.svg-mine[data-animations=on] #overlay { shfaqja: bllok; mbush: var(--mbivendosje-tint); opaciteti: 0,5; } }
Kur flaka zhvendoset në ngjyrë portokalli, llambat ngrohen dhe skena ngrohet me to. Kur flaka ftohet, gjithçka vendoset së bashku. Pjesa më e mirë është se asgjë nuk është shkruar me dorë. Nëse ndryshoj ngjyrën e themelit ose rregulloj diapazonin e animacionit të flakës, i gjithë sistemi i ndriçimit përditësohet njëkohësisht. Ju mund të shihni rezultatin përfundimtar në faqen time të internetit. Ripërdorimi, Ripërdorimi, Rishikimi Ata animatorë Hanna-Barbera u detyruan të ripërdornin elemente nga nevoja, por unë i ripërdor ngjyrat sepse kjo e bën punën time më të qëndrueshme dhe më të lehtë për t'u ruajtur. Vlerat relative të ngjyrave CSS më lejojnë të:
Përcaktoni një ngjyrë të vetme bazë, Përshkruani se si ngjyrat e tjera lidhen me të, Ripërdorni ato marrëdhënie kudo dhe Animoni sistemin duke ndryshuar një vlerë.
Ngjyra relative jo vetëm që e bën më të lehtë vendosjen e temave. Ai inkurajon një mënyrë të menduari ku ngjyra, si lëvizja, është e qëllimshme - dhe ku ndryshimi i një vlere mund të transformojë një skenë të tërë pa e rishkruar veprën poshtë saj.
