Men yaqinda veb-saytimdagi animatsion grafiklarni yangi mavzu va bir guruh kashshof qahramonlar bilan yangiladim va ushbu seriyada o'rtoqlashtirgan ko'plab usullarni amalda qo'lladim. Mening bir nechta animatsiyalarim, kimdir ular bilan muloqot qilganda yoki kunning turli vaqtlarida tashqi ko'rinishini o'zgartiradi.
Mening blog sahifalarimning tepasidagi grafikadagi ranglar har kuni ertalabdan kechgacha o'zgarib turadi. Keyinchalik, qor rejimi mavjud bo'lib, u sovuq ranglar va qish mavzusini qo'shadi, qo'shimcha qatlam va aralashtirish rejimi.
Bu ustida ishlayotganda, men CSS nisbiy rang qiymatlari jarayonni soddalashtirish bilan birga menga ko'proq nazoratni berishi mumkinmi, deb o'ylay boshladim. Eslatma: Ushbu qo'llanmada men nisbiy rang qiymatlari va mavzuli grafikalar va animatsiyalar uchun OKLCH rang maydoniga e'tibor qarataman. Agar siz nisbiy ranglarga chuqurroq sho'ng'ishni istasangiz, Ahmad Shadeed ajoyib interaktiv qo'llanma yaratdi. Rangli bo'shliqlar, gamutlar va OKLCHga kelsak, bizning Geoff Graham ular haqida yozgan.
Elementlardan takroran foydalanish muhim edi. Iloji bo'lsa, fonlardan qayta foydalanildi, masshtablar va qoplamalar bir xil san'at asaridan yangi sahnalarni yaratishga yordam berdi. Bu zaruratdan tug'ilgan, ammo u alohida sahnalar emas, balki seriyalar nuqtai nazaridan fikrlashga undadi. Ranglar palitralarini qo'lda yangilash muammosi Keling, to'g'ridan-to'g'ri mening sinovimga o'taylik. 1959 yilgi Yogi Bear Show epizodiga asoslangan "Toon Titles"da "Lullaby-Bye Bear" epizodiga asoslangan va umuman, mening ishim palitralar bir nechta ranglar bilan cheklangan.
Ko'proq ranglar qo'shmasdan palitrani kengaytirish uchun o'zimning "poydevor" rangim deb ataydigan rangdan soyalar va ranglar yarataman.
Sketch-da men HSL rang maydonida ishlayman, shuning uchun bu jarayon mening asosiy rangimning ochiqlik qiymatini oshirish yoki kamaytirishni o'z ichiga oladi. Rostini aytsam, bu mashaqqatli ish emas - lekin boshqa poydevor rangini tanlash butunlay yangi soyalar va ranglar to'plamini yaratishni talab qiladi. Buni qayta-qayta qo'lda qilish tezda mashaqqatli bo'ladi.
Men HSL - H (rang), S (to'yinganlik) va L (yorug'lik) - rang maydonini eslatib o'tdim, ammo bu rangni tasvirlashning bir necha usullaridan biri. RGB - R (qizil), G (yashil), B (ko'k) - ehtimol eng tanish, hech bo'lmaganda Hex shaklida. Shuningdek, LAB - L (yengillik), A (yashil-qizil), B (ko'k-sariq) - va yangiroq, ammo hozir keng qo'llab-quvvatlanadigan LCH - L (engillik), C (xroma), H (rang) - OKLCH shaklida model mavjud. LCH bilan, xususan, CSS-dagi OKLCH - men poydevor rangining ochiqlik qiymatini sozlashim mumkin.
Yoki uning xromini o'zgartirishim mumkin. LCH kromasi va HSL to'yinganligi ikkalasi ham rangning intensivligini yoki boyligini tavsiflaydi, lekin ular buni turli yo'llar bilan bajaradilar. LCH menga ranglar o'rtasida yanada kengroq diapazonni va oldindan taxmin qilinadigan aralashtirishni beradi.
Men bir xil yorug'lik va xrom qiymatlariga ega bo'lgan ranglar palitrasini yaratish uchun rangni o'zgartirishim mumkin. HSL va LCHda ham rang spektri qizil rangdan boshlanadi, yashil va ko'k ranglardan o'tadi va qizil rangga qaytadi.
Nima uchun OKLCH rang haqida o'ylashimni o'zgartirdi OKLCH rang maydoni uchun brauzerni qo'llab-quvvatlash hozirda keng tarqalgan, hatto dizayn vositalari, shu jumladan Sketch ham yetib kelmagan bo'lsa ham. Yaxshiyamki, bu sizni OKLCH-dan foydalanishga to'sqinlik qilmasligi kerak. Brauzerlar siz uchun Hex, HSL, LAB va RGB qiymatlarini mamnuniyat bilan OKLCH ga aylantiradi. Siz istalgan bo'shliqda, jumladan, Hexda asos rangi bilan CSS-ning maxsus xususiyatini belgilashingiz mumkin: /* poydevor rangi */ --asos: #5accd6;
Undan olingan har qanday ranglar avtomatik ravishda OKLCH ga aylanadi: --foundation-light: oklch(dan var(--foundation) [...]; } --foundation-mid: oklch (dan var(--foundation) [...]; } --foundation-dark: oklch(dan var(--foundation) [...]; }
Nisbiy rang dizayn tizimi sifatida Nisbiy rang haqida o'ylab ko'ring: "Bu rangni oling, uni o'zgartiring, keyin menga natija bering." Rangni sozlashning ikki yo'li mavjud: mutlaq o'zgarishlar va proportsional o'zgarishlar. Kodda ular o'xshash ko'rinadi, lekin siz poydevor ranglarini almashtirishni boshlaganingizdan so'ng o'zini juda boshqacha tutadi. Bu farqni tushunish nisbiy rangdan foydalanishni tizimga aylantirishi mumkin. /* poydevor rangi */ --asos: #5accd6;
Misol uchun, mening asosiy rangimning ochiqligi qiymati 0,7837, quyuqroq versiyada esa 0,5837 qiymati bor. Farqni hisoblash uchun men yuqori qiymatdan pastki qiymatni ayiraman va natijani calc() funktsiyasidan foydalanib qo'llayman: --foundation-dark: oklch(var(--foundation dan) calc(l - 0,20) c h);
Yengilroq rangga erishish uchun uning o'rniga farqni qo'shaman: --poydevor-yorug'lik: oklch(var(--foundation dan) calc(l + 0,10) c h);
Chromatuzatishlar xuddi shu jarayondan keyin amalga oshiriladi. Asosiy rangning intensivligini 0,1035 dan 0,0035 gacha kamaytirish uchun men bir qiymatni boshqasidan ayiraman: oklch(var(--foundation dan) l calc(c - 0,10) h);
Ranglar palitrasini yaratish uchun men poydevor rangi (200) va yangi rang (260) o'rtasidagi farqni hisoblayman: oklch(var(--foundation dan) l c calc(h + 60));
Bu hisob-kitoblar mutlaqdir. Belgilangan miqdorni olib tashlaganimda, men samarali ravishda aytaman: "Har doim shu miqdorni olib tashlang." Ruxsat etilgan qiymatlarni qo'shishda ham xuddi shunday: hisoblash (c - 0,10) hisoblash (c + 0,10)
Men bu yondashuvning chegaralarini qiyin yo'ldan o'rgandim. Ruxsat etilgan xrom qiymatlarini olib tashlashga ishonganimda, poydevorni o'zgartirganimdan so'ng ranglar kul rangga tushib ketdi. Bir rang uchun ishlaydigan palitra boshqa rangga tushib ketdi. Ko'paytirish boshqacha harakat qiladi. Xromani ko'paytirganda, men brauzerga aytaman: "Ushbu rangning intensivligini mutanosib ravishda kamaytiring." Ranglar o'rtasidagi munosabatlar, hatto poydevor o'zgarganda ham saqlanib qoladi: hisob (c * 0,10)
Mening ko'chirish, masshtablash, aylantirish qoidalari
Yengillikni ko'chirish (qo'shish yoki ayirish), Skala xromasi (ko'paytirish), Rangni aylantiring (darajani qo'shish yoki ayirish).
Men xromani o'lchayman, chunki intensivlik o'zgarishi asosiy rangga mutanosib bo'lishini xohlayman. Rang munosabatlari aylanma, shuning uchun rangni ko'paytirish mantiqiy emas. Yengillik hissiy va mutlaqdir - uni ko'paytirish ko'pincha g'alati natijalar beradi.
Bitta rangdan butun mavzugacha Nisbiy rang menga asos rangini aniqlash va undan menga kerak bo'lgan boshqa ranglarni - to'ldirishlar, chiziqlar, gradient to'xtash joylari, soyalarni yaratishga imkon beradi. Shu nuqtada rang palitra bo'lishni to'xtatadi va tizim bo'la boshlaydi. SVG rasmlari odatda bir xil ranglarni to'ldirishlar, chiziqlar va gradientlar bo'ylab qayta ishlatadi. Nisbiy rang sizga bu munosabatlarni bir marta aniqlash va ularni hamma joyda qayta ishlatish imkonini beradi - xuddi animatorlar yangi sahnalarni yaratish uchun fonni qayta ishlatgandek.
Poydevor rangini bir marta o'zgartiring va har bir olingan rang qo'lda hech narsani qayta hisoblamasdan avtomatik ravishda yangilanadi. Animatsion grafikadan tashqari, tugmalar va havolalar kabi interaktiv elementlarning ranglarini aniqlash uchun xuddi shu yondashuvdan foydalanishim mumkin. “Lullabye-Bye Bear” toon sarlavhasida ishlatgan tonal asos rangi ko‘k rangga o‘xshaydi. Fon mening poydevorim va quyuqroq versiya orasidagi radial gradientdir.
Mutlaqo boshqa kayfiyatdagi muqobil versiyalarni yaratish uchun men faqat poydevor rangini o'zgartirishim kerak: --asos: #5accd6; --grad-end: var(--foundation); --grad-start: oklch (var(--foundation dan) calc(l - 0,2357) calc(c * 0,833) h);
Ushbu maxsus xususiyatlarni rang qiymatlarini takrorlamasdan SVG gradientimga bog'lash uchun men qattiq kodlangan to'xtash rang qiymatlarini inline uslublar bilan almashtirdim:
Keyinchalik, mening Toon matnim har doim tanlagan poydevor rangiga zid bo'lishini ta'minlashim kerak edi. Rangning 180 gradusga aylanishi qo'shimcha rang hosil qiladi, bu albatta paydo bo'ladi - lekin noqulay tebranishi mumkin: .text-light { to'ldirish: oklch (var(--foundation dan) l c calc(h + 180)); }
90° ga siljish toʻliq qoʻshimcha boʻlmasdan jonli ikkinchi darajali rang hosil qiladi: .text-light { to'ldirish: oklch (dan var(--foundation) l c calc(h - 90)); }
Mening Quick Draw McGrawning 1959 yildagi "El Kabong" nomli filmini qayta tiklashim xuddi shu usullardan foydalanadi, ammo yanada xilma-xil palitraga ega. Masalan, poydevor rangi va quyuqroq soya o'rtasida yana bir radial gradient mavjud.
Orqa fondagi bino va daraxt bir xil poydevor rangidagi turli xil soyalardir. Ushbu yo'llar uchun menga ikkita qo'shimcha to'ldirish rangi kerak edi: .bg-mid { to'ldirish: oklch (dan var(--foundation) calc(l - 0,04) calc(c * 0,91) h); }
.bg-dark { to'ldirish: oklch (dan var(--foundation) calc(l - 0,12) calc(c * 0,64) h); }
Poydevorlar harakatlana boshlaganda
Hozirgacha men ko'rsatgan hamma narsa statik edi. Kimdir poydevor rangini o'zgartirish uchun rang tanlash vositasidan foydalansa ham, bu o'zgarish darhol sodir bo'ladi. Ammo animatsion grafiklar kamdan-kam hollarda to'xtab qoladi - bu nomda. Shunday qilib, agar rang tizimning bir qismi bo'lsa, u ham jonlantira olmasligi uchun hech qanday sabab yo'q.
Poydevor rangini jonlantirish uchun avval uni OKLCH kanallariga ajratishim kerak— yengillik, rang va rang. Ammo muhim qo'shimcha qadam bor: men ushbu qiymatlarni kiritilgan maxsus xususiyatlar sifatida ro'yxatdan o'tkazishim kerak. Lekin bu nimani anglatadi?
Odatiy bo'lib, brauzer CSS-ning maxsus xususiyat qiymati rang, uzunlik, raqam yoki boshqa biror narsani anglatishini bilmaydi. Bu ko'pincha animatsiya paytida ularni muammosiz interpolyatsiya qilish va bir qiymatdan ikkinchisiga o'tish mumkin emasligini anglatadi.
Maxsus xususiyatni ro'yxatdan o'tkazish brauzerga u ko'rsatadigan qiymat turini va vaqt o'tishi bilan qanday harakat qilish kerakligini aytadi. Bunday holda, brauzer mening rangli kanallarimga raqamlar sifatida qarashini xohlayman, shunda ular muammosiz animatsiya qilinadi.
@property --f-l {
sintaksis: "
@property --f-c {
sintaksis: "
@property --f-h {
sintaksis: "
Ro'yxatdan o'tgandan so'ng, bu maxsus xususiyatlar mahalliy CSS kabi ishlaydi. Brauzer ularni kadrma-kadr interpolyatsiya qilishi mumkin. Keyin o'sha kanallardan poydevor rangini tiklayman: --fond: oklch(var(--f-l) var(--f-c) var(--f-h));
Bu har qanday raqamli qiymat kabi poydevor rangini jonlantiruvchi holga keltiradi. Mana, vaqt o'tishi bilan yengillikni muloyimlik bilan o'zgartiradigan oddiy "nafas olish" animatsiyasi: @keyframes nafas oladi { 0%, 100% { --f-l: 0,36; } 50% { --f-l: 0,46; } }
.toon-title { animatsiya: nafas olish 10 soniyada cheksiz; }
To'ldirishlar, gradientlar va chiziqlardagi barcha boshqa ranglar --foundation dan olinganligi sababli, ularning barchasi birgalikda jonlantiriladi va hech narsani qo'lda yangilash kerak emas. Bitta jonlantirilgan rang, ko'p effektlar Ushbu jarayonning boshida men CSS nisbiy rang qiymatlari ko'proq imkoniyatlarni taqdim etishi va ularni amalga oshirishni soddalashtirishi mumkinmi, deb hayron bo'ldim. Men yaqinda veb-saytimning aloqa sahifasiga oltin konining yangi fonini qo'shdim va birinchi iteratsiya yonib turadigan va tebranadigan moy lampalarini o'z ichiga oladi.
Men CSS-ning nisbiy ranglarini jonlantirish qanday qilib konning ichki qismini lampalardagi ranglar bilan bo'yash orqali yanada realroq qilishini o'rganmoqchi edim. Men ularning atrofidagi dunyoga haqiqiy yorug'lik kabi ta'sir qilishlarini xohlardim. Shunday qilib, men bir nechta ranglarni jonlantirish o'rniga, faqat bitta rangni jonlantiradigan kichik yoritish tizimini qurdim.
Mening birinchi vazifam fon va lampalarim o'rtasida qatlam qatlamini joylashtirish edi:
Men aralash-aralash rejimidan foydalandim: rang, chunki bu uning ostidagi yorqinlikni saqlagan holda rang beradi. Men qoplama faqat animatsiyalar yoqilganda ko'rinishini xohlaganim uchun, men qoplamani qo'shib qo'ydim: .svg-mine #overlay { ko'rsatish: yo'q; }
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #overlay { displey: blok; shaffoflik: 0,5; } }
Qoplama joyida edi, lekin hali lampalarga ulanmagan. Menga yorug'lik manbai kerak edi. Mening lampalarim oddiy va ularning har birida filtr yordamida loyqalangan doira elementi mavjud. Filtr butun doira bo'ylab juda yumshoq xiralik hosil qiladi.
Qoplama va lampalarni alohida-alohida jonlantirish o'rniga, men bitta "olov" rangi belgisini jonlantiraman va undan qolgan hamma narsani olaman. Birinchidan, men OKLCH kanallari uchun uchta maxsus xususiyatni ro'yxatdan o'tkazaman:
@property --fl-l {
sintaksis: "
Men o‘sha kanallarni jonlantirdim, ataylab bir necha kadrlarni to‘q sariq rangga surib, miltillash olovli yorug‘lik kabi aniq ko‘rinadi:
@keyframes alangasi { 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; } }
Keyin men ushbu animatsiyani SVG-ga kiritdim, shuning uchun umumiy o'zgaruvchilar lampalar uchun ham, mening qoplamam uchun ham mavjud:
@media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] { animatsiya: olov 3.6s cheksiz chiziqli; izolyatsiyalash: izolyatsiya qilish;
/* Animatsion kanallardan olov rangini yarating */ --olov: oklch(var(--fl-l) var(--fl-c) var(--fl-h));
/* Olovdan olingan chiroq rangi */ --chiroq-yadrosi: oklch(dan var(--flame) calc(l + 0,05) calc(c * 0,70) h);
/* Xuddi shu olovdan olingan qoplama rangi */ --overlay-tint: oklch (dan var(--flame) calc(l + 0,06) calc(c * 0,65) calc(h - 10)); } }
Va nihoyat, men o'sha olingan ranglarni porlayotgan lampalarga va ular ta'sir qiladigan qoplamaga qo'lladim: @media (prefers-reduced-motion: no-preference) { .svg-mine[data-animations=on] #mine-lamp-1 > doira, .svg-mine[data-animations=on] #mine-lamp-2 > doira { to'ldirish: var(--lamp-core); }
.svg-mine[data-animations=on] #overlay { displey: blok; to'ldirish: var(--overlay-tint); shaffoflik: 0,5; } }
Olov to'q sariq rangga o'tganda, lampalar qiziydi va ular bilan sahna isiydi. Olov soviganida, hamma narsa bir-biriga joylashadi. Eng yaxshi tomoni shundaki, hech narsa qo'lda yozilmaydi. Agar poydevor rangini o'zgartirsam yoki olov animatsiyasi diapazonlarini o'zgartirsam, butun yoritish tizimi bir vaqtning o'zida yangilanadi. Yakuniy natijani mening veb-saytimda ko'rishingiz mumkin. Qayta foydalanish, qayta ishlatish, qayta ko'rib chiqish Xanna-Barbera animatorlari zarurat tufayli elementlarni o'zgartirishga majbur bo'lishdi, lekin men ranglarni qayta ishlataman, chunki bu mening ishimni yanada izchil va saqlashni osonlashtiradi. CSS nisbiy rang qiymatlari menga quyidagilarga imkon beradi:
Yagona poydevor rangini aniqlang, Boshqa ranglarning unga qanday aloqasi borligini tasvirlab bering, Bu munosabatlarni hamma joyda qayta ishlating va Bitta qiymatni o'zgartirish orqali tizimni jonlantiring.
Nisbiy rang shunchaki mavzuni osonlashtirmaydi. Bu rang, masalan, harakat kabi, qasddan qilingan fikrlash tarzini rag'batlantiradi - va bu erda bitta qiymatni o'zgartirish butun sahnani uning ostidagi ishni qayta yozmasdan o'zgartirishi mumkin.
