Мен жақында веб-сайтымдағы анимациялық графиканы жаңа тақырыппен және жаңашыл кейіпкерлер тобымен жаңартып, осы серияда бөліскен көптеген әдістерді іс жүзінде қолданамын. Кейбір анимациялар біреу олармен әрекеттескенде немесе күннің әртүрлі уақыттарында сыртқы түрін өзгертеді.
Менің блог беттеріндегі графикадағы түстер күн сайын таңертеңнен кешке дейін өзгереді. Содан кейін қабат қабаты мен араластыру режимінің арқасында салқын түстер мен қыстық тақырыпты қосатын қар режимі бар.
Осымен жұмыс істей отырып, мен CSS салыстырмалы түс мәндері процесті жеңілдете отырып, маған көбірек бақылауды қамтамасыз ете алады ма деп ойладым. Ескерту: Бұл оқулықта мен салыстырмалы түс мәндеріне және тақырыптық графика мен анимацияларға арналған OKLCH түс кеңістігіне назар аударамын. Егер сіз салыстырмалы түстерге терең бойлағыңыз келсе, Ахмад Шадид керемет интерактивті нұсқаулық жасады. Түс кеңістігі, гамма және OKLCH болсақ, олар туралы біздің Джефф Грэм жазды.
Элементтерді қайталап пайдалану маңызды болды. Фондар мүмкіндігінше қайта пайдаланылды, масштабтау және қабаттастыру бір өнер туындысынан жаңа көріністер жасауға көмектесті. Бұл қажеттіліктен туды, бірақ ол жеке көріністерден гөрі сериялар тұрғысынан ойлауды ынталандырды. Түс палитраларын қолмен жаңарту мәселесі Менің шақыруыма тікелей көшейік. Осы сияқты Toon Titles-те — 1959 жылғы Yogi Bear шоуының «Бесік жыры-қош аю» эпизодына негізделген және менің жұмысым, әдетте, палитралар таңдаулы бірнеше түстермен шектеледі.
Бояғышты қосымша реңктерді қоспай кеңейту үшін мен «негіз» түсі деп атайтын түстен реңктер мен реңктерді жасаймын.
Sketch бағдарламасында мен HSL түс кеңістігінде жұмыс істеймін, сондықтан бұл процесс негіз түсімнің ашықтық мәнін арттыруды немесе азайтуды қамтиды. Шынымды айтсам, бұл қиын тапсырма емес, бірақ негіздің басқа түсін таңдау реңктер мен реңктердің жаңа жиынтығын жасауды талап етеді. Мұны қолмен қайта-қайта жасау тез еңбекқорлыққа айналады.
Мен HSL — H (реңк), S (қанықтылық) және L (ашықтық) — түс кеңістігі туралы айттым, бірақ бұл түсті сипаттаудың бірнеше тәсілдерінің бірі ғана. RGB — R (қызыл), G (жасыл), B (көк) — кем дегенде оның Hex түрінде ең таныс болуы мүмкін. Сондай-ақ LAB — L (жеңілдік), A (жасыл-қызыл), В (көк-сары) — және жаңарақ, бірақ қазір кеңінен қолдау көрсетілетін LCH — L (жеңілдік), C (хрома), H (реңк) — OKLCH түріндегі үлгі бар. LCH көмегімен - әсіресе CSS-тегі OKLCH - мен негіз түсімнің ашықтық мәнін реттей аламын.
Немесе оның хромасын өзгерте аламын. LCH хромасы және HSL қанықтылығы түстің қарқындылығын немесе байлығын сипаттайды, бірақ олар мұны әртүрлі жолдармен жасайды. LCH маған кең ауқымды және түстер арасындағы болжамды араласуды береді.
Мен сондай-ақ бірдей ашықтық пен хрома мәндерін бөлісетін түстер палитрасын жасау үшін реңкті өзгерте аламын. HSL және LCH екеуінде де реңк спектрі қызылдан басталып, жасыл және көк түстер арқылы жылжиды және қызылға оралады.
Неліктен OKLCH менің түс туралы ойлайтынымды өзгертті OKLCH түс кеңістігіне арналған шолғыш қолдауы қазір кең таралған, тіпті дизайн құралдары, соның ішінде Sketch — жетпесе де. Бақытымызға орай, бұл сізге OKLCH пайдалануды тоқтатпауы керек. Браузерлер сіз үшін Hex, HSL, LAB және RGB мәндерін OKLCH-ге қуана түрлендіреді. Сіз кез келген кеңістікте негіз түсі бар CSS теңшелетін сипатын анықтай аласыз, соның ішінде Hex: /* негіз түсі */ --негізі: #5accd6;
Одан алынған кез келген түстер автоматты түрде OKLCH түрлендіріледі: --foundation-light: oklch(var(--foundation) [...]; } --foundation-mid: oklch(var(--foundation) [...]; } --foundation-dark: oklch(var(--foundation) [...]; }
Дизайн жүйесі ретінде салыстырмалы түс Салыстырмалы түсті: «Осы түсті алыңыз, оны өзгертіңіз, содан кейін маған нәтиже беріңіз» деп ойлаңыз. Түсті реттеудің екі жолы бар: абсолютті өзгерістер және пропорционалды өзгерістер. Олар код бойынша ұқсайды, бірақ негіз түстерін ауыстыра бастағаннан кейін мүлдем басқаша әрекет етеді. Бұл айырмашылықты түсіну салыстырмалы түстерді жүйеге айналдыруы мүмкін. /* негіз түсі */ --негізі: #5accd6;
Мысалы, негіз түсімнің ашықтық мәні 0,7837, ал күңгірт нұсқада 0,5837 мәні бар. Айырмашылықты есептеу үшін жоғарыдан төменгі мәнді алып тастаймын және нәтижені calc() функциясы арқылы қолданамын: --негіз-қараңғы: oklch(var(--негізінен) calc(l - 0,20) c h);
Ашық түске қол жеткізу үшін оның орнына айырмашылықты қосамын: --іргетас-жарық: oklch(var(--негізінен) calc(l + 0,10) c h);
Chromaтүзетулер бірдей процеске сәйкес жүреді. Негізгі түсімнің қарқындылығын 0,1035-тен 0,0035-ке дейін азайту үшін мен бір мәнді екіншісінен шегеремін: oklch(var(--негізінен) l calc(c - 0,10) h);
Реңктер палитрасын жасау үшін негіз түсімнің реңк мәні (200) мен жаңа реңкімнің (260) арасындағы айырмашылықты есептеймін: oklch(var(--негізінен) l c calc(h + 60));
Бұл есептеулер абсолютті. Мен белгіленген соманы шегергенде, мен тиімді айтамын: «Әрқашан осыны алып тастаңыз». Тұрақты мәндерді қосқанда да солай болады: есептеу(c - 0,10) есептеу(c + 0,10)
Мен бұл тәсілдің шегін қиын жолмен білдім. Бекітілген хрома мәндерін шегеруге сенген кезде, негізді өзгерткеннен кейін түстер сұрға қарай түсіп кетті. Бір түс үшін жұмыс істейтін палитра басқа түс үшін бұзылды. Көбейту басқаша әрекет етеді. Мен хроманы көбейткенде, мен браузерге: «Осы түстің қарқындылығын пропорцияға азайтыңыз» деп айтамын. Түстер арасындағы байланыс негіз өзгерсе де, өзгеріссіз қалады: есептеу(c * 0,10)
Менің оны жылжыту, масштабтау, айналдыру ережелері
Жеңілдікті жылжыту (қосу немесе азайту), Шкаланың хромасы (көбейту), Реңкті бұру (дәрежелерді қосу немесе азайту).
Мен хромды масштабтаймын, себебі қарқындылық өзгерістері негізгі түске пропорционалды болғанын қалаймын. Реңк қатынастары айналмалы, сондықтан реңкті көбейтудің мағынасы жоқ. Жеңілдік перцептивтік және абсолютті - оны көбейту жиі біртүрлі нәтиже береді.
Бір түстен бүкіл тақырыпқа дейін Салыстырмалы түс маған негіз түсін анықтауға және одан маған қажет кез келген басқа түсті - толтырулар, штрихтар, градиенттік аялдамалар, көлеңкелерді жасауға мүмкіндік береді. Бұл кезде түс палитра болуды тоқтатып, жүйе бола бастайды. SVG иллюстрациялары бояулар, штрихтар және градиенттер бойынша бірдей бірнеше түстерді қайта пайдаланады. Салыстырмалы түс сол қатынастарды бір рет анықтауға және оларды барлық жерде қайта пайдалануға мүмкіндік береді — аниматорлар жаңа көріністер жасау үшін фонды қайта пайдаланған сияқты.
Негіз түсін бір рет өзгертіңіз және әрбір алынған түс қолмен ештеңені қайта есептеместен автоматты түрде жаңартылады. Анимациялық графикадан басқа, мен түймелер мен сілтемелер сияқты интерактивті элементтердің күйлерінің түстерін анықтау үшін дәл осы тәсілді қолдана аламын. Мен «Бесік жыры-қош аю» атты тақырыпта пайдаланған негіз түсі көгілдір түсті көк. Фон - бұл негіз мен қараңғы нұсқа арасындағы радиалды градиент.
Мүлде басқа көңіл-күймен балама нұсқаларды жасау үшін, маған тек негіз түсін өзгерту керек: --негізі: #5accd6; --grad-end: var(--foundation); --grad-start: oklch(var(--foundation) calc(l - 0,2357) calc(c * 0,833) h);
Түс мәндерін қайталамай сол теңшелетін сипаттарды SVG градиентімен байланыстыру үшін мен қатты кодталған тоқтату түс мәндерін кірістірілген мәнерлермен ауыстырдым:
Әрі қарай, менің Toon мәтінім мен таңдаған негіз түсімен әрқашан қарама-қайшы келетініне көз жеткізуім керек еді. 180 градус реңктің айналуы қосымша түс береді, ол сөзсіз шығады, бірақ ыңғайсыз тербелуі мүмкін: .text-light { толтыру: oklch(var(--фундаменттен) l c calc(h + 180)); }
90° ығысу толық толықтырушы болмай-ақ жарқын екінші түсті береді: .text-light { толтыру: oklch(var(--фундаменттен) l c calc(h - 90)); }
Менің Quick Draw McGraw-ның 1959 жылғы «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 секундтық тыныс алу шексіз; }
Толтырулардағы, градиенттердегі және штрихтардағы кез келген басқа түстер --foundation мәнінен алынғандықтан, олардың барлығы бірге жанданады және ештеңені қолмен жаңарту қажет емес. Бір анимациялық түс, көптеген әсерлер Бұл процестің басында мен CSS салыстырмалы түс мәндері көбірек мүмкіндіктер ұсына ала ма, сонымен қатар оларды іске асыруды жеңілдете ме деп ойладым. Жақында мен веб-сайтымның байланыс бетіне жаңа алтын кенішінің фонын қостым және бірінші итерация жарқырап, тербелетін май шамдарын қамтыды.
Мен анимациялық CSS салыстырмалы түстері шахтаның интерьерін шамдардағы түстермен бояу арқылы қалай шынайырақ ететінін зерттегім келді. Мен олардың қоршаған әлемге нақты жарық сияқты әсер еткенін қаладым. Сонымен, бірнеше түстерді жандандырудың орнына, мен бір түсті ғана жандандыратын шағын жарықтандыру жүйесін жасадым.
Менің бірінші тапсырмам фон мен шамдар арасында қабаттасатын қабатты орналастыру болды: <жол id = "қабаттау" fill="var(--overlay-tint)" [...] style="mix-blend-mode: color" />
Мен аралас араластыру режимін қолдандым: түсті, себебі бұл негізгі жарықты сақтай отырып, оның астындағыны бояйды. Мен қабаттасудың анимациялар қосылған кезде ғана көрінуін қалағандықтан, мен қабаттасуды қосуды жасадым: .svg-mine #қабаттау { көрсету: жоқ; }
@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));
/* Жалыннан алынған шам түсі */ --lamp-core: oklch(from var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Бірдей жалыннан алынған қабат реңктері */ --overlay-tint: 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 салыстырмалы түс мәндері маған мүмкіндік береді:
Бір іргетас түсін анықтаңыз, Басқа түстердің оған қалай қатысы барын сипаттаңыз, Бұл қатынастарды барлық жерде қайта пайдаланыңыз және Бір мәнді өзгерту арқылы жүйені анимациялаңыз.
Салыстырмалы түс тақырыпты жеңілдетіп қана қоймайды. Ол қозғалыс сияқты түс әдейі болатын және бір мәнді өзгерту оның астындағы жұмысты қайта жазбай-ақ бүкіл көріністі өзгерте алатын ойлау тәсілін ынталандырады.
