Ես վերջերս թարմացրել եմ իմ կայքի անիմացիոն գրաֆիկան նոր թեմայով և մի խումբ առաջնակարգ կերպարներով՝ գործնականում կիրառելով այս շարքի բազմաթիվ մեթոդներ, որոնք ես կիսում էի: Իմ անիմացիաներից մի քանիսը փոխում են տեսքը, երբ ինչ-որ մեկը շփվում է նրանց հետ կամ օրվա տարբեր ժամերին:
Իմ բլոգի էջերի վերևի գրաֆիկայի գույները փոխվում են առավոտից երեկո ամեն օր: Այնուհետև կա ձյան ռեժիմը, որն ավելացնում է ցուրտ գույներ և ձմեռային թեմա՝ ծածկույթի շերտի և միաձուլման ռեժիմի շնորհիվ:
Սրա վրա աշխատելիս ես սկսեցի մտածել, թե արդյոք CSS-ի հարաբերական գունային արժեքները կարող են ինձ ավելի շատ վերահսկողություն տալ՝ միաժամանակ պարզեցնելով գործընթացը: Նշում. Այս ձեռնարկում ես կկենտրոնանամ գունային հարաբերական արժեքների և OKLCH գունային տարածության վրա՝ թեմատիկ գրաֆիկայի և անիմացիաների համար: Եթե ցանկանում եք խորը սուզվել հարաբերական գույնի մեջ, Ահմադ Շադիդը ստեղծել է հիանալի ինտերակտիվ ուղեցույց: Ինչ վերաբերում է գունային տարածություններին, գամումներին և OKLCH-ին, մեր սեփական Ջեֆ Գրեհեմը գրել է դրանց մասին:
Առանցքային էր տարրերի կրկնակի օգտագործումը: Հնարավորության դեպքում ֆոները կրկին օգտագործվում էին, խոշորացումներով և ծածկույթներով, որոնք օգնում էին կառուցել նոր տեսարաններ միևնույն արվեստի գործերից: Այն ծնվել է անհրաժեշտությունից, բայց նաև խրախուսում է մտածել ոչ թե առանձին տեսարանների, այլ սերիալների առումով: Գունավոր գունապնակները ձեռքով թարմացնելու խնդիրը Եկեք անմիջապես անցնենք իմ մարտահրավերին: Այսպիսի Toon Titles-ում, որը հիմնված է 1959 թվականի Yogi Bear Show «Lullabye-Bye Bear» դրվագի վրա, և իմ աշխատանքում, ընդհանուր առմամբ, ներկապնակները սահմանափակված են ընտրված մի քանի գույներով:
Ես ստեղծում եմ երանգներ և երանգավորումներ իմ «հիմնական» գույնից, որպեսզի ընդլայնեմ ներկապնակը՝ առանց ավելի շատ երանգներ ավելացնելու:
Sketch-ում ես աշխատում եմ HSL գունային տարածության մեջ, ուստի այս գործընթացը ներառում է իմ հիմքի գույնի թեթևության արժեքի ավելացում կամ նվազում: Անկեղծ ասած, դա դժվար գործ չէ, բայց հիմքի տարբեր գույն ընտրելը պահանջում է ստվերների և երանգների մի ամբողջ նոր հավաքածու ստեղծել: Դա ձեռքով անելը, կրկին ու կրկին, արագ դառնում է աշխատատար:
Ես նշեցի HSL - H (երանգ), S (հագեցվածություն) և L (թեթևություն) - գունային տարածություն, բայց դա գույնը նկարագրելու մի քանի եղանակներից մեկն է: RGB - R (կարմիր), G (կանաչ), B (կապույտ) - հավանաբար առավել ծանոթ է, գոնե իր Hex ձևով: Կա նաև LAB - L (թեթևություն), A (կանաչ-կարմիր), B (կապույտ-դեղին) - և ավելի նոր, բայց այժմ լայնորեն աջակցվող LCH - L (թեթևություն), C (քրոմա), H (երանգ) - մոդելն իր OKLCH ձևով: LCH-ով, մասնավորապես OKLCH-ով CSS-ում, ես կարող եմ հարմարեցնել իմ հիմքի գույնի թեթևության արժեքը:
Կամ ես կարող եմ փոխել դրա քրոմա: LCH քրոմը և HSL հագեցվածությունը երկուսն էլ նկարագրում են գույնի ինտենսիվությունը կամ հարստությունը, բայց դա անում են տարբեր ձևերով: LCH-ն ինձ տալիս է ավելի լայն շրջանակ և ավելի կանխատեսելի գույների խառնուրդ:
Ես կարող եմ նաև փոխել երանգը՝ ստեղծելու գույների գունապնակ, որոնք կիսում են նույն թեթևությունը և քրոմային արժեքները: Թե՛ HSL-ում, և թե՛ LCH-ում երանգների սպեկտրը սկսվում է կարմիրից, շարժվում է կանաչի և կապույտի միջով և վերադառնում կարմիրի:
Ինչու OKLCH-ը փոխեց, թե ինչպես եմ ես մտածում գույնի մասին Բրաուզերի աջակցությունը OKLCH գունային տարածության համար այժմ լայն տարածում ունի, նույնիսկ եթե դիզայնի գործիքները, ներառյալ Sketch-ը, չեն հասել: Բարեբախտաբար, դա չպետք է խանգարի ձեզ օգտագործել OKLCH: Բրաուզերները ձեզ համար հաճույքով կվերածեն Hex, HSL, LAB և RGB արժեքները OKLCH-ի: Դուք կարող եք սահմանել CSS մաքսային հատկություն՝ հիմքի գույնով ցանկացած տարածության մեջ, ներառյալ Hex: /* Հիմնադրամի գույնը */ --հիմնադրամ՝ #5accd6;
Դրանից ստացված ցանկացած գույն ինքնաբերաբար կվերածվի OKLCH-ի. --հիմք-լույս՝ oklch(var(--հիմնարկից) [...]; } --հիմնադրամ-միջին. oklch(var(--հիմնադրամից) [...]; } --հիմք-մութ. oklch(var(--հիմնարկից) [...]; }
Հարաբերական գույնը որպես դիզայնի համակարգ Մտածեք հարաբերական գույնի մասին, որն ասում է. «Վերցրեք այս գույնը, շտկեք այն, ապա տվեք ինձ արդյունքը»: Գույնը հարմարեցնելու երկու եղանակ կա՝ բացարձակ փոփոխություններ և համամասնական փոփոխություններ: Նրանք կոդով նման են, բայց իրենց շատ տարբեր են պահում, երբ սկսեք փոխել հիմքի գույները: Այդ տարբերությունը հասկանալն այն է, թե ինչ կարող է համեմատական գույնի օգտագործումը վերածել համակարգի: /* Հիմնադրամի գույնը */ --հիմնադրամ՝ #5accd6;
Օրինակ, իմ հիմքի գույնի թեթևության արժեքը 0,7837 է, մինչդեռ ավելի մուգ տարբերակն ունի 0,5837 արժեք: Տարբերությունը հաշվարկելու համար ես հանում եմ ցածր արժեքը բարձրից և կիրառում արդյունքը՝ օգտագործելով calc() ֆունկցիան. --հիմք-մութ: oklch(var(--հիմնադրամից) calc (l - 0.20) c h);
Ավելի բաց գույն ստանալու համար փոխարենը ավելացնում եմ տարբերությունը. --հիմք-լույս: oklch(var(--հիմնադրամից) calc (l + 0.10) c h);
Քրոմաճշգրտումները կատարվում են նույն գործընթացով: Իմ հիմքի գույնի ինտենսիվությունը 0,1035-ից մինչև 0,0035 նվազեցնելու համար, ես հանում եմ մի արժեքը մյուսից. oklch(var(--հիմնադրամից) l calc (c - 0.10) h);
Երանգների գունապնակ ստեղծելու համար ես հաշվարկում եմ իմ հիմքի գույնի (200) և իմ նոր երանգի (260) երանգի արժեքի տարբերությունը. oklch(var(--հիմնադրամից) լ գ հաշվարկ (h + 60));
Այդ հաշվարկները բացարձակ են։ Երբ ես հանում եմ ֆիքսված գումար, ես արդյունավետորեն ասում եմ. «Միշտ այսքանը հանիր»: Նույնը վերաբերում է ֆիքսված արժեքներ ավելացնելիս. հաշվարկ (c - 0.10) հաշվարկ (c + 0.10)
Ես սովորեցի այս մոտեցման սահմանները դժվար ճանապարհով: Երբ ես ապավինում էի ֆիքսված քրոմային արժեքների հանմանը, գույները փլվում էին դեպի մոխրագույնը հենց որ ես փոխեցի հիմքը: Գունապնակը, որն աշխատում էր մի գույնի համար, քանդվեց մյուսի համար: Բազմապատկումն այլ կերպ է վարվում։ Երբ ես բազմապատկում եմ քրոմա, ես բրաուզերին ասում եմ. «Նվազեցրու այս գույնի ինտենսիվությունը համամասնությամբ»: Գույների միջև կապը մնում է անփոփոխ, նույնիսկ երբ հիմքը փոխվում է. հաշվարկ (c * 0.10)
Իմ «Տեղափոխել, չափել, պտտել» կանոններ
Թեթևության շարժում (ավելացնել կամ հանել), Սանդղակի քրոմա (բազմապատկել), Պտտեցնել երանգը (ավելացնել կամ հանել աստիճաններ):
Ես չափում եմ քրոմա, քանի որ ուզում եմ, որ ինտենսիվության փոփոխությունները համաչափ մնան հիմնական գույնին: Երանգների հարաբերությունները պտտվող են, ուստի երանգի բազմապատկումն անիմաստ է: Թեթևությունը ընկալելի և բացարձակ է. այն բազմապատկելով հաճախ տարօրինակ արդյունքներ է ստացվում:
Մեկ գույնից մինչև ամբողջ թեմա Հարաբերական գույնը թույլ է տալիս ինձ սահմանել հիմքի գույնը և դրանից առաջացնել յուրաքանչյուր այլ գույն, որն ինձ անհրաժեշտ է՝ լցոնումներ, հարվածներ, գրադիենտ կանգառներ, ստվերներ: Այդ պահին գույնը դադարում է ներկապնակ լինել և սկսում է համակարգ լինել: SVG նկարազարդումները հակված են նորից օգտագործել նույն մի քանի գույները լցոնումների, հարվածների և գրադիենտների միջև: Հարաբերական գույնը թույլ է տալիս մեկ անգամ սահմանել այդ հարաբերությունները և նորից օգտագործել դրանք ամենուր, ինչպես անիմատորները նորից օգտագործում էին ֆոն՝ նոր տեսարաններ ստեղծելու համար:
Մեկ անգամ փոխեք հիմքի գույնը, և ստացված յուրաքանչյուր գույն ինքնաբերաբար թարմացվում է՝ առանց ձեռքով որևէ բան վերահաշվարկելու: Անիմացիոն գրաֆիկայից դուրս, ես կարող էի օգտագործել այս նույն մոտեցումը ինտերակտիվ տարրերի վիճակների համար գույները սահմանելու համար, ինչպիսիք են կոճակները և հղումները: Հիմնային գույնը, որը ես օգտագործել եմ իմ «Lullabye-Bye Bear» Toon Title-ում ցիանագույն տեսք ունեցող կապույտ է: Ֆոնը ճառագայթային գրադիենտ է իմ հիմքի և ավելի մուգ տարբերակի միջև:
Բոլորովին այլ տրամադրություններով այլընտրանքային տարբերակներ ստեղծելու համար պետք է փոխեմ միայն հիմքի գույնը. --հիմնադրամ՝ #5accd6; --grad-end: var(--հիմնադրամ); --grad-start: oklch(var(--հիմնադրամից) calc (l - 0.2357) calc (c * 0.833) h);
Այդ հատուկ հատկությունները իմ SVG գրադիենտին կապելու համար՝ առանց գունային արժեքների կրկնօրինակման, ես փոխարինեցի կոշտ կոդավորված stop-color արժեքները ներկառուցված ոճերով.
Հաջորդը, ես պետք է ապահովեի, որ իմ Toon Text-ը միշտ հակադրվի իմ ընտրած հիմքի գույնի հետ: 180 աստիճան երանգի պտույտը տալիս է լրացուցիչ գույն, որը, անշուշտ, բացվում է, բայց կարող է անհարմար թրթռալ. .text-light { լրացնել՝ oklch(var(--հիմնադրամից) լ գ հաշվարկ (h + 180)); }
90° տեղաշարժը առաջացնում է վառ երկրորդական գույն՝ առանց լիովին փոխլրացնելու. .text-light { լրացնել՝ oklch(var(--հիմնադրամից) l c calc (h - 90)); }
Quick Draw McGraw's 1959 Toon Title «El Kabong»-ի իմ վերականգնումն օգտագործում է նույն տեխնիկան, բայց ավելի բազմազան գունապնակով: Օրինակ, հիմքի գույնի և ավելի մուգ երանգի միջև կա մեկ այլ ճառագայթային գրադիենտ:
Շենքը և ծառը հետին պլանում պարզապես հիմքի նույն գույնի տարբեր երանգներ են: Այդ ուղիների համար ինձ անհրաժեշտ էին երկու լրացուցիչ լրացման գույներ. .bg-mid { լրացնել՝ oklch(var(--հիմնադրամից) calc (l - 0.04) calc (c * 0.91) h); }
.bg-dark { լրացնել՝ oklch(var(--հիմնադրամից) calc (l - 0.12) calc (c * 0.64) h); }
Երբ հիմքերը սկսում են շարժվել Մինչ այժմ, այն ամենը, ինչ ես ցույց եմ տվել, եղել է ստատիկ: Նույնիսկ երբ ինչ-որ մեկը օգտագործում է գույնի ընտրիչ՝ հիմքի գույնը փոխելու համար, այդ փոփոխությունը տեղի է ունենում անմիջապես: Բայց անիմացիոն գրաֆիկան հազվադեպ է կանգնում տեղում. թելադրանքը հենց անվան մեջ է: Այսպիսով, եթե գույնը համակարգի մի մասն է, պատճառ չկա, որ այն նույնպես չի կարող կենդանացնել: Հիմնադրամի գույնը աշխուժացնելու համար ես նախ պետք է այն բաժանեմ իր OKLCH ալիքների մեջ- թեթևություն, քրոմա և երանգ: Բայց կա մի կարևոր լրացուցիչ քայլ. ես պետք է գրանցեմ այդ արժեքները որպես մուտքագրված հատուկ հատկություններ: Բայց ի՞նչ է դա նշանակում։ Լռելյայնորեն, զննարկիչը չգիտի, թե արդյոք CSS-ի հատուկ սեփականության արժեքը ներկայացնում է գույն, երկարություն, համար կամ ամբողջովին այլ բան: Դա հաճախ նշանակում է, որ դրանք չեն կարող սահուն կերպով ինտերպոլացվել անիմացիայի ընթացքում և անցնել մի արժեքից մյուսը: Պատվերով սեփականության գրանցումը զննարկիչին ասում է այն արժեքի տեսակը, որը այն ներկայացնում է և ինչպես պետք է այն պահի ժամանակի ընթացքում: Այս դեպքում, ես ցանկանում եմ, որ զննարկիչը իմ գունավոր ալիքները վերաբերվի որպես թվերի, որպեսզի դրանք կարողանան սահուն անիմացիոն լինել: @property --f-l { շարահյուսություն՝ «<համար»; ժառանգում է `ճշմարիտ; սկզբնական արժեքը՝ 0,40; }
@property --f-c { շարահյուսություն՝ «<համար»; ժառանգում է `ճշմարիտ; սկզբնական արժեքը՝ 0,11; }
@property --f-h { շարահյուսություն՝ «<համար»; ժառանգում է `ճշմարիտ; սկզբնական արժեքը՝ 305; }
Գրանցվելուց հետո այս մաքսային հատկություններն իրենց պահում են որպես բնիկ CSS: Զննարկիչը կարող է դրանք ինտերպոլացնել շրջանակ առ կադր: Այնուհետև ես վերակառուցում եմ հիմքի գույնը այդ ալիքներից. --հիմքը՝ oklch(var(--f-l) var(--f-c) var(--f-h));
Սա ստիպում է հիմքի գույնը դառնալ կենդանի, ինչպես ցանկացած այլ թվային արժեք: Ահա մի պարզ «շնչող» անիմացիա, որը ժամանակի ընթացքում մեղմորեն փոխում է թեթևությունը. @keyframes շնչել { 0%, 100% { --f-l: 0.36; } 50% { --f-l: 0.46; } }
.toon-title { անիմացիա. շնչել 10 վրկ անսահման հեշտություն; }
Քանի որ լցոնումների, գրադիենտների և հարվածների բոլոր այլ գույները բխում են --հիմնից, դրանք բոլորը միասին շարժվում են, և ոչինչ ձեռքով թարմացնելու կարիք չունի: Մեկ անիմացիոն գույն, բազմաթիվ էֆեկտներ Այս գործընթացի սկզբում ես մտածում էի, թե արդյոք CSS-ի հարաբերական գունային արժեքները կարող են ավելի շատ հնարավորություններ տալ՝ միաժամանակ դարձնելով դրանք ավելի հեշտ իրականացնելու համար: Վերջերս ես ավելացրեցի ոսկու հանքի նոր ֆոն իմ կայքի կոնտակտային էջում, և առաջին կրկնությունը ներառում էր նավթի լամպեր, որոնք փայլում և ճոճվում են:
Ես ուզում էի ուսումնասիրել, թե ինչպես CSS հարաբերական գույները աշխուժացնելը կարող է հանքի ինտերիերն ավելի իրատեսական դարձնել՝ ներկելով այն լամպերի գույներով: Ես ուզում էի, որ նրանք ազդեն իրենց շրջապատող աշխարհի վրա, ինչպես իրական լույսն է: Այսպիսով, մի քանի գույներ աշխուժացնելու փոխարեն, ես կառուցեցի մի փոքրիկ լուսավորության համակարգ, որը աշխուժացնում է ընդամենը մեկ գույն:
Իմ առաջին առաջադրանքը ֆոնի և իմ լամպերի միջև ծածկույթի շերտ դնելն էր. <ուղի id = "վերածում" fill = "var (--overlay-tint)" [...] style="mix-blend-mode: color" />
Ես օգտագործեցի mix-blend-mode՝ գույնը, քանի որ դա երանգավորում է այն, ինչ գտնվում է դրա տակ՝ պահպանելով հիմքում ընկած լուսավորությունը: Քանի որ ես ուզում եմ, որ ծածկույթը տեսանելի լինի միայն, երբ անիմացիաները միացված են, ես ընտրեցի ծածկույթը. .svg-mine #overlay { ցուցադրում՝ ոչ մի; }
@media (prefers-reduced-motion. no-preference) { .svg-mine[data-animations=on] #overlay { ցուցադրում `բլոկ; անթափանցիկություն՝ 0,5; } }
Ծածկույթը տեղում էր, բայց դեռ միացված չէր լամպերին: Ինձ լույսի աղբյուր էր պետք։ Իմ լամպերը պարզ են, և յուրաքանչյուրը պարունակում է շրջանակի տարր, որը ես լղոզել եմ զտիչով: Զտիչը ստեղծում է շատ փափուկ պղտորություն ամբողջ շրջանակի վրա:
Կափարիչը և լամպերը առանձին-առանձին կենդանացնելու փոխարեն, ես կենդանացնում եմ մեկ «բոց» գույնի նշան և դրանից բխում եմ մնացած ամեն ինչ: Նախ, ես գրանցում եմ երեք մուտքագրված հատուկ հատկություններ OKLCH ալիքների համար. @property --fl-l { շարահյուսություն՝ «<համար»; ժառանգում է `ճշմարիտ; սկզբնական արժեքը՝ 0,86; } @property --fl-c { շարահյուսություն՝ «<համար»; ժառանգում է `ճշմարիտ; սկզբնական արժեքը՝ 0,12; } @property --fl-h { շարահյուսություն՝ «<համար»; ժառանգում է `ճշմարիտ; սկզբնական արժեքը՝ 95; }
Ես աշխուժացրել եմ այդ ալիքները՝ միտումնավոր մի քանի կադրեր հրելով դեպի նարնջագույն, որպեսզի թարթումը հստակ կարդացվի որպես կրակի լույս.
@keyframes բոց { 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; } }
Այնուհետև ես այդ անիմացիան ընդգրկեցի SVG-ին, այնպես որ ընդհանուր փոփոխականները հասանելի են ինչպես լամպերի, այնպես էլ իմ ծածկույթի համար.
@media (prefers-reduced-motion. no-preference) { .svg-mine[data-animations=on] { անիմացիա՝ բոց 3.6ս անսահման գծային; մեկուսացում `մեկուսացնել;
/* Ստեղծեք բոցի գույն անիմացիոն ալիքներից */ --բոց՝ oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Լամպի գույնը բոցից ստացված */ --լամպի միջուկը՝ oklch(var(--flame) calc(l + 0.05) calc(c * 0.70) h);
/* Նույն բոցից ստացված ծածկույթի երանգ */ -- Overlay-int: oklch(var (--flame) calc (l + 0.06) calc (c * 0.65) calc (h - 10)); } }
Ի վերջո, ես կիրառեցի այդ ստացված գույները փայլուն լամպերի և ծածկույթի վրա, որոնց վրա ազդում են. @media (prefers-reduced-motion. no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > շրջան, .svg-mine[data-animations=on] #mine-lamp-2 > շրջան { լրացնել՝ var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { ցուցադրում `բլոկ; լրացնել՝ var(--overlay-tint); անթափանցիկություն՝ 0,5; } }
Երբ բոցը փոխվում է դեպի նարնջագույն, լամպերը տաքանում են, և տեսարանը տաքանում է նրանց հետ: Երբ բոցը սառչում է, ամեն ինչ նստում է միասին: Լավագույնն այն է, որ ձեռքով ոչինչ գրված չէ: Եթե ես փոխեմ հիմքի գույնը կամ կսմթեմ բոցի անիմացիայի միջակայքերը, լուսավորության ամբողջ համակարգը միաժամանակ թարմացվում է: Վերջնական արդյունքը կարող եք տեսնել իմ կայքում։ Վերաօգտագործում, վերօգտագործում, վերանայում Այդ Hanna-Barbera մուլտիպլիկատորները ստիպված էին անհրաժեշտությունից ելնելով վերափոխել տարրերը, բայց ես նորից օգտագործում եմ գույները, քանի որ դա իմ աշխատանքը դարձնում է ավելի հետևողական և ավելի հեշտ է պահպանել: CSS հարաբերական գունային արժեքները թույլ են տալիս ինձ.
Սահմանեք հիմքի մեկ գույն, Նկարագրեք, թե ինչպես են այլ գույները կապված դրա հետ, Վերօգտագործեք այդ հարաբերությունները ամենուր, և Անիմացե՛ք համակարգը՝ փոխելով մեկ արժեք:
Հարաբերական գույնը ոչ միայն հեշտացնում է թեմաները: Այն խրախուսում է մտածելակերպը, որտեղ գույնը, ինչպես շարժումը, միտումնավոր է, և որտեղ մեկ արժեք փոխելը կարող է վերափոխել ամբողջ տեսարանը՝ առանց դրա տակ գտնվող աշխատանքը վերաշարադրելու:
