Es nesen atsvaidzināju animācijas grafiku savā vietnē ar jaunu tēmu un novatorisku varoņu grupu, praksē pielietojot daudzas metodes, ar kurām dalījos šajā sērijā. Dažas no manām animācijām maina izskatu, kad kāds ar tām mijiedarbojas vai dažādos diennakts laikos.
Grafikas krāsas mana emuāra lapās katru dienu mainās no rīta līdz vakaram. Pēc tam ir sniega režīms, kas pievieno vēsas krāsas un ziemīgu tēmu, pateicoties pārklājuma slānim un sajaukšanas režīmam.
Strādājot pie tā, es sāku domāt, vai CSS relatīvās krāsu vērtības varētu sniegt man lielāku kontroli, vienlaikus vienkāršojot procesu. Piezīme. Šajā apmācībā es koncentrēšos uz relatīvajām krāsu vērtībām un OKLCH krāsu telpu tēmu grafikai un animācijām. Ja vēlaties dziļi ienirt relatīvās krāsās, Ahmads Šaids izveidoja lielisku interaktīvu ceļvedi. Kas attiecas uz krāsu telpām, gamām un OKLCH, par tiem rakstīja mūsu pašu Džefs Greiems.
Galvenais bija elementu atkārtota izmantošana. Foni tika atkārtoti izmantoti, kad vien iespējams, ar tālummaiņu un pārklājumiem palīdzot izveidot jaunas ainas no viena un tā paša mākslas darba. Tas radās nepieciešamības dēļ, taču tas arī mudināja domāt par seriāliem, nevis atsevišķām ainām. Problēma ar krāsu palešu manuālu atjaunināšanu Tūlīt pāriesim pie mana izaicinājuma. Tādos Toon nosaukumos kā šis — pamatojoties uz 1959. gada Yogi Bear Show epizodi “Lullabye-Bye Bear” – un manā darbā kopumā paletes ir ierobežotas ar dažām izvēlētām krāsām.
Es veidoju toņus un nokrāsas no tā, ko saucu par savu “pamata” krāsu, lai paplašinātu paleti, nepievienojot vairāk nokrāsu.
Programmā Sketch es strādāju HSL krāsu telpā, tāpēc šis process ir saistīts ar manas pamatkrāsas gaišuma vērtības palielināšanu vai samazināšanu. Godīgi sakot, tas nav grūts uzdevums, taču, izvēloties citu pamata krāsu, ir jāizveido pilnīgi jauns toņu un toņu komplekts. To darot manuāli, atkal un atkal, ātri kļūst darbietilpīgi.
Es minēju HSL — H (nokrāsa), S (piesātinājums) un L (gaišums) — krāsu telpu, taču tas ir tikai viens no vairākiem veidiem, kā aprakstīt krāsu. RGB - R (sarkans), G (zaļš), B (zils) - iespējams, ir vispazīstamākais, vismaz savā Hex formā. Ir arī LAB — L (vieglums), A (zaļš — sarkans), B (zils — dzeltens) un jaunāks, bet tagad plaši atbalstītais LCH — L (vieglums), C (hroma), H (nokrāsa) — modelis tā OKLCH formā. Izmantojot LCH — īpaši OKLCH CSS — es varu pielāgot savas pamatkrāsas gaišuma vērtību.
Vai arī es varu mainīt tā krāsu. LCH hroma un HSL piesātinājums apraksta krāsas intensitāti vai bagātību, taču tie to dara dažādos veidos. LCH sniedz man plašāku diapazonu un paredzamāku krāsu sajaukšanu.
Varu arī mainīt nokrāsu, lai izveidotu krāsu paleti, kam ir tādas pašas gaišuma un hroma vērtības. Gan HSL, gan LCH toņu spektrs sākas ar sarkanu krāsu, virzās cauri zaļai un zilai un atgriežas sarkanā krāsā.
Kāpēc OKLCH mainīja to, kā es domāju par krāsu Pārlūkprogrammas atbalsts OKLCH krāsu telpai tagad ir plaši izplatīts, pat ja dizaina rīki, tostarp Sketch, nav panākuši to. Par laimi, tam nevajadzētu atturēt jūs no OKLCH lietošanas. Pārlūkprogrammas ar prieku konvertēs Hex, HSL, LAB un RGB vērtības par OKLCH jūsu vietā. Varat definēt pielāgotu CSS rekvizītu ar pamata krāsu jebkurā vietā, tostarp Hex: /* Pamata krāsa */ --fonds: #5accd6;
Visas no tā iegūtās krāsas tiks automātiski pārveidotas par OKLCH: --foundation-light: oklch(no var(--foundation) [...]; } --foundation-mid: oklch(no var(--foundation) [...]; } --foundation-dark: oklch(no var(--foundation) [...]; }
Relatīvā krāsa kā dizaina sistēma Padomājiet par relatīvo krāsu tā, ka sakāt: "Paņemiet šo krāsu, pielāgojiet to un pēc tam sniedziet rezultātu." Ir divi veidi, kā pielāgot krāsu: absolūtās izmaiņas un proporcionālās izmaiņas. Pēc koda tie izskatās līdzīgi, taču uzvedas ļoti atšķirīgi, kad sākat apmainīt tonālā krēma krāsas. Šīs atšķirības izpratne ir tas, kas relatīvās krāsas izmantošanu var pārvērst sistēmā. /* Pamata krāsa */ --fonds: #5accd6;
Piemēram, manas tonālā krēma krāsas gaišuma vērtība ir 0,7837, savukārt tumšākas versijas vērtība ir 0,5837. Lai aprēķinātu starpību, es atņemu zemāko vērtību no augstākās un piemēroju rezultātu, izmantojot funkciju calc(): --pamats-tumšs: oklch(no var(--fonds) aprēķins(l - 0,20) c h);
Lai iegūtu gaišāku krāsu, tā vietā pievienoju atšķirību: --pamats-gaisma: oklch(no var(--fonds) aprēķin.(l + 0,10) c h);
Chromakorekcijas notiek ar to pašu procesu. Lai samazinātu tonālā krēma krāsas intensitāti no 0,1035 līdz 0,0035, es atņemu vienu vērtību no otras: oklch(no var(--fonds) l aprēķins(c - 0,10) h);
Lai izveidotu nokrāsu paleti, es aprēķināju atšķirību starp manas pamatkrāsas nokrāsas vērtību (200) un jauno nokrāsu (260): oklch(no var(--fonds) l c aprēķins(h + 60));
Šie aprēķini ir absolūti. Kad es atņemu fiksētu summu, es faktiski saku: "Vienmēr atņemiet tik daudz." Tas pats attiecas uz fiksēto vērtību pievienošanu: aprēķins (c — 0,10) aprēķins (c + 0,10)
Es uzzināju šīs pieejas robežas cietā veidā. Kad es paļāvos uz fiksēto krāsu vērtību atņemšanu, krāsas sabruka pelēkā virzienā, tiklīdz es mainīju pamatu. Palete, kas darbojās vienai krāsai, izjuka citai. Reizināšana darbojas atšķirīgi. Kad es pavairoju krāsu, es saku pārlūkprogrammai: "Samaziniet šīs krāsas intensitāti par proporciju." Attiecības starp krāsām paliek neskartas pat tad, ja mainās pamats: aprēķins (c * 0,10)
Mani Move It, Scale It, Rotate It Noteikumi
Pārvietot vieglumu (saskaitīt vai atņemt), Mēroga hroma (reizināt), Pagriezt nokrāsu (pievienot vai atņemt grādus).
Es mērogoju krāsu, jo vēlos, lai intensitātes izmaiņas paliktu proporcionālas pamatkrāsai. Nokrāsu attiecības ir rotējošas, tāpēc toņu reizināšanai nav jēgas. Vieglums ir uztverams un absolūts — tā pavairošana bieži vien rada dīvainus rezultātus.
No vienas krāsas uz visu tēmu Relatīvā krāsa ļauj man definēt pamatkrāsu un no tās ģenerēt visas citas nepieciešamās krāsas — aizpildījumus, triepienus, gradienta pieturas, ēnas. Tajā brīdī krāsa pārstāj būt palete un sāk būt sistēma. SVG ilustrācijās mēdz atkārtoti izmantot tās pašas dažas krāsas aizpildījumos, vilkumos un gradientos. Relatīvā krāsa ļauj vienreiz definēt šīs attiecības un atkārtoti izmantot tās visur — līdzīgi kā animatori atkārtoti izmantoja fonus, lai radītu jaunas ainas.
Vienreiz mainiet pamatnes krāsu, un katra atvasinātā krāsa tiek atjaunināta automātiski, neko nepārrēķinot ar roku. Ārpus animācijas grafikas es varētu izmantot šo pašu pieeju, lai noteiktu krāsas interaktīvo elementu, piemēram, pogu un saišu stāvokļiem. Tonālā krēma krāsa, ko izmantoju savā “Lullabye-Bye Bear” Toon Title, ir zilā krāsā. Fons ir radiāls gradients starp manu tonālo krēmu un tumšāku versiju.
Lai izveidotu alternatīvas versijas ar pilnīgi atšķirīgām noskaņām, man tikai jāmaina pamatnes krāsa: --fonds: #5accd6; --grad-end: var(--fonds); --grad-start: oklch(no var(--fonds) aprēķin.(l - 0,2357) calc(c * 0,833) h);
Lai saistītu šos pielāgotos rekvizītus ar manu SVG gradientu, nedublējot krāsu vērtības, es aizstāju cietā kodētās stop-color vērtības ar iekļautajiem stiliem:
Pēc tam man bija jānodrošina, lai mans Toon teksts vienmēr kontrastētu ar izvēlēto pamata krāsu. 180 grādu nokrāsu rotācija rada papildu krāsu, kas noteikti izceļas, taču var neērti vibrēt: .text-light { aizpildīt: oklch(no var(--fonds) l c aprēķin.(h + 180)); }
90° nobīde rada spilgtu sekundāro krāsu, taču tā nav pilnībā papildinoša: .text-light { aizpildīt: oklch(no var(--fonds) l c aprēķins(h - 90)); }
Manā Quick Draw McGraw 1959. gada Toon virsrakstā “El Kabong” ir izmantotas tās pašas tehnikas, bet ar daudzveidīgāku paleti. Piemēram, starp pamatnes krāsu un tumšāku nokrāsu ir vēl viens radiāls gradients.
Fonā redzamā ēka un koks ir vienkārši vienas un tās pašas pamatu krāsas atšķirīgos toņos. Šiem ceļiem man bija vajadzīgas divas papildu aizpildījuma krāsas: .bg-mid { aizpildīt: oklch(no var(--fonds) aprēķin.(l - 0,04) aprēķin.(c * 0,91) h); }
.bg-dark { aizpildīt: oklch(no var(--fonds) aprēķin.(l - 0,12) calc(c * 0,64) h); }
Kad pamati sāk kustēties
Līdz šim viss, ko esmu parādījis, ir bijis statisks. Pat tad, ja kāds izmanto krāsu atlasītāju, lai mainītu pamata krāsu, šīs izmaiņas notiek uzreiz. Taču animēta grafika reti stāv uz vietas — pavediens slēpjas nosaukumā. Tātad, ja krāsa ir daļa no sistēmas, nav iemesla, ka tā nevar arī animēt.
Lai animētu pamata krāsu, vispirms tā jāsadala tā OKLCH kanālos— gaišums, hroms un nokrāsa. Bet ir vēl viens svarīgs solis: man ir jāreģistrē šīs vērtības kā drukāti pielāgoti rekvizīti. Bet ko tas nozīmē?
Pēc noklusējuma pārlūkprogramma nezina, vai CSS pielāgotā rekvizīta vērtība apzīmē krāsu, garumu, skaitli vai kaut ko citu. Tas bieži nozīmē, ka animācijas laikā tos nevar vienmērīgi interpolēt un pāriet no vienas vērtības uz nākamo.
Pielāgota rekvizīta reģistrēšana parāda pārlūkprogrammai, kāda veida vērtību tas pārstāv un kā tam vajadzētu darboties laika gaitā. Šajā gadījumā es vēlos, lai pārlūkprogramma manus krāsu kanālus uzskatītu par skaitļiem, lai tos varētu nevainojami animēt.
@īpašums --f-l {
sintakse: "
@īpašums --f-c {
sintakse: "
@īpašums --f-h {
sintakse: "
Pēc reģistrācijas šie pielāgotie rekvizīti darbojas kā vietējais CSS. Pārlūkprogramma var tos interpolēt pa kadram. Pēc tam es atjaunoju pamatu krāsu no šiem kanāliem: --fonds: oklch(var(--f-l) var(--f-c) var(--f-h));
Tādējādi pamata krāsa kļūst animējama, tāpat kā jebkura cita skaitliska vērtība. Šeit ir vienkārša "elpojoša" animācija, kas laika gaitā maigi maina vieglumu: @keyframes elpot { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animācija: elpot 10s vieglumu-in-out bezgalīgi; }
Tā kā visas pārējās krāsas aizpildījumos, gradientos un svītros ir iegūtas no --foundation, tās visas tiek animētas kopā, un nekas nav jāatjaunina manuāli. Viena animēta krāsa, daudzi efekti Šī procesa sākumā es prātoju, vai CSS relatīvās krāsu vērtības varētu piedāvāt vairāk iespēju, vienlaikus padarot tās vienkāršākas. Es nesen pievienoju jaunu zelta raktuves fonu savas vietnes kontaktu lapai, un pirmajā atkārtojumā tika iekļautas eļļas lampas, kas spīd un šūpojas.
Es gribēju izpētīt, kā CSS relatīvo krāsu animēšana varētu padarīt raktuves interjeru reālistiskāku, tonējot to ar lampu krāsām. Es gribēju, lai tie ietekmētu apkārtējo pasauli, kā to dara īsta gaisma. Tā vietā, lai animētu vairākas krāsas, es izveidoju nelielu apgaismojuma sistēmu, kas animē tikai vienu krāsu.
Mans pirmais uzdevums bija ievietot pārklājuma slāni starp fonu un manām lampām:
Es izmantoju sajaukšanas un sajaukšanas režīmu: krāsu, jo tas ietonē to, kas atrodas zem tā, vienlaikus saglabājot pamatā esošo spilgtumu. Tā kā es vēlos, lai pārklājums būtu redzams tikai tad, kad ir ieslēgtas animācijas, es izvēlējos pārklājumu: .svg-mine #overlay { displejs: nav; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { displejs: bloks; necaurredzamība: 0,5; } }
Pārklājums bija vietā, bet vēl nebija savienots ar lampām. Man vajadzēja gaismas avotu. Manas lampas ir vienkāršas, un katrā no tām ir apļa elements, ko es aizmigloju ar filtru. Filtrs rada ļoti mīkstu izplūšanu visā aplī.
Tā vietā, lai animētu pārklājumu un lampas atsevišķi, es animēju vienu “liesmas” krāsu marķieri un no tā iegūstu visu pārējo. Pirmkārt, es reģistrēju trīs drukātus pielāgotus rekvizītus OKLCH kanāliem:
@īpašums --fl-l {
sintakse: "
Es animēju šos kanālus, apzināti virzot dažus kadrus oranžā virzienā, lai mirgošana būtu skaidri redzama kā uguns gaisma:
@keyframes liesma { 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; } }
Pēc tam es tvēru šo animāciju uz SVG, tāpēc koplietotie mainīgie ir pieejami gan lampām, gan manam pārklājumam:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animācija: liesma 3.6s bezgalīgs lineārs; izolēšana: izolēt;
/* Izveidojiet liesmas krāsu no animētiem kanāliem */ --liesma: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Lampas krāsa iegūta no liesmas */ --lampas kodols: oklch(no var(--liesma) calc(l + 0.05) calc(c * 0.70) h);
/* Pārklājuma nokrāsa iegūta no tās pašas liesmas */ --pārklājuma nokrāsa: oklch(no var(--liesma) aprēķin.(l + 0,06) aprēķ.(c * 0,65) aprēķin.(h - 10)); } }
Visbeidzot, es pielietoju šīs atvasinātās krāsas kvēlojošajām lampām un pārklājumam, ko tās ietekmē: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > circle, .svg-mine[data-animations=on] #mine-lamp-2 > circle { aizpildīt: var(--lampas kodols); }
.svg-mine[data-animations=on] #overlay { displejs: bloks; fill: var(--overlay-int); necaurredzamība: 0,5; } }
Kad liesma virzās uz oranžo pusi, lampas sasilst, un aina sasilst līdz ar tām. Kad liesma atdziest, viss sakārtojas. Labākais ir tas, ka nekas netiek rakstīts manuāli. Ja es mainu pamata krāsu vai pielāgoju liesmas animācijas diapazonus, visa apgaismojuma sistēma tiek atjaunināta vienlaikus. Jūs varat redzēt gala rezultātu manā vietnē. Atkārtoti izmantot, atkārtoti izmantot, pārskatīt Šie Hanna-Barbera animatori bija spiesti mainīt elementus no nepieciešamības, bet es atkārtoti izmantoju krāsas, jo tas padara manu darbu konsekventāku un vieglāk kopjamu. CSS relatīvās krāsu vērtības ļauj man:
Definējiet vienu pamata krāsu, Aprakstiet, kā citas krāsas ir saistītas ar to, Atkārtoti izmantojiet šīs attiecības visur un Animējiet sistēmu, mainot vienu vērtību.
Relatīvā krāsa ne tikai atvieglo tēmu veidošanu. Tas veicina domāšanas veidu, kurā krāsa, tāpat kā kustība, ir apzināta un kur vienas vērtības maiņa var pārveidot visu ainu, nepārrakstot darbu zem tās.
