Materialning ripple effekti uchun CSS usullari

CSS va JavaScript-dan foydalanib ripple effekti uchun turli xil texnik qo'llanma

Yaqinda men ripple effektini material dizaynidan veb-dasturga tatbiq etishga majbur bo'ldim. Va keyin men bu qanday amalga oshirilganligini bilmasligimni angladim. Bu meni mavjud dasturlarni o'rganish uchun sayohatga olib keldi va hatto siz uchun foydali bo'lishi mumkin bo'lgan yangi texnikani o'ylab topdi.

Bu to'lqin effekti nima?

Kutib turing, Google-ning Material Dizaynidagi to'lqin ta'sirini bilmayapsizmi? Siz necha yildan beri g'orda yashayapsizmi?

Ripple effekti tugmani bosganingizda ishlatiladi. Sichqoncha yoki sensorli shovqinlar uchun xuddi shunday ishlaydi.

Siz bosgan yoki tugmani bosgan joy aloqa nuqtasi deb nomlanadi. U erdan, to'lqin to'lqini butun tugmachani to'ldirguncha kattalashib borar ekan, shaffoflikni yo'qotib, tashqariga yo'naltiriladi. Keyin u butunlay yo'qoladi.

Ushbu to'lqin effektining dinamikasi suyuq yuzaga tegib turganingizda yoki toshni ko'lga tashlaganingizda paydo bo'ladigan to'lqinlarga o'xshaydi.

Yoriqlarni siz Internetda topasiz

Biroz izlanishlar olib borganimdan so'ng, veb-ilovalarda ripple effektini amalga oshirish uchun ishlatiladigan ikkita asosiy texnikani topdim.

Soxta elementdan keyin :: foydalanish

Ushbu texnikadan foydalangan holda :: tugmachaning soxta elementi yarim shaffof doira sifatida bezatilgan va o'sib borishi uchun jonlantirilgan. Konteyner tugmasi toshib ketishi kerak: yashirin, shunda aylana hech qachon tugmachaning sirtidan tashqariga chiqmaydi va joylashuvi: aylanani tugmachaning ichida joylashtirishni osonlashtirish uchun. Ushbu texnikaning tafsilotlarini ushbu maqolada Ionuț Colceriu tomonidan o'qishingiz mumkin.

Ushbu uslubning ajoyib narsalaridan biri shundaki, bu ripple effekti uchun toza CSS yechimi. Biroq, ripple effekti har doim aloqa nuqtasi o'rniga tugmaning o'rtasidan boshlanadi. Bu eng tabiiy fikr emas.

Buni aloqa nuqtasini saqlab qolish uchun JavaScript-dan foydalanib yaxshilash mumkin va uni to'lqinni joylashtirish uchun ishlatish mumkin. Material.io veb-ripple tarkibiy qismi uchun aynan shunday qildi. U aloqa nuqtasini saqlash uchun CSS o'zgaruvchilaridan foydalanadi, va :: soxta element bu joylashuvni aniqlash uchun ushbu parametrlardan foydalanadi.

Bola elementlaridan foydalanish

Aslida, ushbu uslub avvalgidek strategiyani qo'llaydi. Ammo soxta element o'rniga, tugmachaning ichiga bo'sh element qo'shiladi, uni keyin JavaScript orqali joylashtirish mumkin. Ushbu uslub ushbu maqolada Djey Tompkins tomonidan tasvirlangan.

Oddiy amalga oshirish tugmachani har bir bosish uchun oraliq hosil qiladi va sichqonchaning holatini o'zgartirish uchun sichqoncha holatida foydalanadi. CSS animatsiyasi to'liq shaffof bo'lgunga qadar kengayib, yo'qoladi. Animatsiya tugashi bilan biz DOM-dan masofani olib tashlashni tanlashimiz mumkin yoki shunchaki gilam ostiga qo'yib qo'yishimiz mumkin - hech kim atrofda osilgan shaffof spanni sezmaydi.

Men yana bir o'zgarishni topdim, bunda bola elementi bir span o'rniga svg, va svg JavaScript-da jonlantirilgan. Ushbu o'zgarishni Dennis Gaebel tushuntirdi, ammo aslida u bir xil bo'lib tuyuldi va ehtimol murakkab SVG shakllari va effektlaridan foydalanishga imkon beradi.

Kirish ma'lumotlari bilan bog'liq muammo

Yuqorida tavsiflangan ikkala usul ham ajoyib ko'rinadi. Ammo men ularni type = yuborish bilan kiritish elementlariga qo'llaganimda shunday bo'ladi.

Nega ular ishlamaydi?

Kirish elementi almashtirilgan elementdir. Qisqasi, demak, DOM va CSS-ga nisbatan ushbu elementlar bilan ishingiz juda oz. Xususan, ularda bolalar elementlari va soxta elementlar bo'lishi mumkin emas. Ushbu uslublar nima uchun muvaffaqiyatsiz ekanligi endi aniq bo'ldi.

Shunday qilib, agar siz Material Dizayndan foydalansangiz, kirish turidan uzoqroq bo'lganingiz va tugmachaning elementlariga yopishganingiz yaxshiroqdir. Yoki shunchaki o'qishni davom eting.

Kirishlarni kiritish uchun to'lqinlar qo'shilmoqda

Men ishlayotgan veb-dasturda bizda allaqachon yuborish tugmalari ko'p bo'lgan. Ularning barchasini boshqa elementga aylantirish juda ko'p mehnatni talab qiladi va uslublar jadvallari va JavaScript mantiqlarini buzish xavfi yuqori. Shunday qilib, mavjud yuborish tugmalariga qanday qilib to'lqinlarni qo'shishni aniqlashim kerak edi.

O'ralgan idishdan foydalanish

Men topshirish tugmachasini inline-blok elementiga o'rashim va inline-blok elementini ripple yuzasi sifatida ishlatishi mumkinligini tezda angladim. Tez namoyish:

Men ushbu echimni soddaligi uchun yoqtirgan bo'lsam-da, baribir ko'p joylarda belgi o'zgartirishni talab qildi. Va men bu muammoning yechimi bo'lishini bilardim - loyihaga yangi ishlab chiquvchilar kirib, yuborilgan tugmalarni ularni to'lqin yuzasiga to'g'ri o'rashsiz yaratadilar. Shuning uchun men DOMni o'zgartirishni talab qilmaydigan boshqa echimlarni qidirishda davom etdim.

Radial gradientlar

Radial-gradient sintaksisi menga ham markazni, ham gradientning hajmini boshqarishga imkon beradi. Albatta, bu menga gradient rangini, shu jumladan yarim shaffof ranglarni boshqarishga imkon beradi. Va u hech qachon qo'llaniladigan elementni to'ldirib yubormaydi. Shunday qilib, u menga kerak bo'lgan hamma narsani allaqachon bajarganga o'xshaydi!

Bu qadar tez emas ... bitta narsa etishmayapti: fon-rasm xususiyati jonlantirilmaydi. Men CSS animatsiyalaridan foydalanib, gradientning o'sishini va shaffofligini yo'qotolmadim. Men uni fon o'lchamidagi xususiyatni jonlantirish orqali ko'paytirishga muvaffaq bo'ldim, ammo men buni uddalay oldim.

Men bir nechta boshqa narsalarni sinab ko'rdim, masalan, jonlanuvchi tasvir sifatida aylanib yuradigan doiraga ega bo'lish (apng formatidan foydalanish) va uni fon-image sifatida qo'lladim. Ammo keyin men tasvir pastadir qachon boshlanib, qachon tugashini nazorat qila olmadim.

Va nihoyat, JavaScript bilan echim

CSS-da nima qila olmasangiz, uni JavaScript-da qilishingiz mumkin. Bu effektni CSS animatsiyasidan foydalanib ishlashga rozi bo'lganimdan ko'proq vaqt sarflaganimdan so'ng, men taslim bo'ldim va JavaScript-da animatsiyani yozishga qaror qildim.

Men yuqoridagi radial gradient eritmasidan boshladim va windows.requestAnimationFrame-dan radiatsion gradientning suyuq animatsiyasini qilish uchun o'sdim va so'nib qoldim. Mana mening yakuniy qarorim:

Xulosa

Shunday qilib, faqat CSS-da emas, balki yuborish tugmachalarida ripple effektlari paydo bo'lishi mumkin.

Internetda biron bir joyda hujjatlashtirilgan ushbu texnikani topa olmadim, shuning uchun uni o'zimnikiman. Leonardoning ripple texnikasi DOM-ga o'zgartirishlarni talab qilmaydi va har qanday element uchun ishlaydi, chunki u soxta elementlarga yoki bolalar elementlariga ishonmaydi. Biroq, bu benuqson echim emas.

Birinchidan, ishlash. Gradientni JavaScript-da jonlantirish orqali siz ko'plab brauzerlarni optimallashtirishni yo'qotasiz. Faqat o'zgartirilgan xususiyat fon rasmidir, chunki brauzerlarda aks ettirishning hojati yo'q, deb o'ylayman va shunchaki uslublarni qayta ishlatishni va elementni bo'yashni talab qilaman. Amalda, bu aniq sodir bo'ladi va ishlash juda yaxshi. Ushbu bayonot uchun istisno Firefox Mobile bo'lib, u ba'zi sabablarga ko'ra animatsiyaga qo'shilmaydi. (tahrirlash: zamonaviy Firefox Mobile versiyalarida animatsiya silliq)

Ikkinchidan, texnik tugmachaning fon-tasvir xususiyatidan foydalanadi. Agar sizning dizayningiz sizning tugmachangizga rasmning orqa fonda qo'llanilishini talab qilsa, to'lqin effekti buni bekor qiladi. Agar sizga ushbu rasm sizga haqiqatan ham kerak bo'lsa, u holda mavjud fon rasmining yuqori qismiga radial gradyanni chizish uchun JavaScript-ni o'zgartirish mumkin.

Uchinchidan, bu Internet Explorer-da ishlamayotganga o'xshaydi. Ammo, IE10 va undan yuqori versiyalar bilan ishlamasligi uchun biron bir sabab ko'rmayapman. Ehtimol, IE radial-gradient uchun boshqa sintaksisdan foydalanganligi sababli. Ammo hozirgi kunda IE haqida kim qayg'uradi? (tahrirlash: bu usul Internet Explorer 11-da muammosiz ishlaydi)