Tarkib
- 01. Yarating va saqlang
- 02. Internet uchun optimallashtirish
- 03. HTML hujjatini o'rnating
- 04. Tartibni tuzing
- 05. SVG-ni joylashtiring
- 06. SVG-ga sinflar qo'shing
- 07. Dastlabki holatlar
- 08. Animatsiyalarni e'lon qiling
- 09. Animatsiya va xususiyatlarni tayinlang
- 10. To'rtburchak animatsiyasi
- 11. Matn animatsiyasi
- 12. Boshlanishni kechiktiring
- 13. Chizilgan rasmni taqlid qiling
- 14. Birinchi chiziq chizilgan asosiy kadr
- 15. Chiziqlarni chizish
- 16. Shaklni to'ldiring
SVG-lar bilan animatsiya haqida gap ketganda, bitta muhim o'chirish JavaScript-ni kutubxonalariga kirib qolish fikri bo'lishi mumkin. Biroq, bu shunday bo'lishi shart emas. CSS effektlarni yaratish uchun SVG ichida individual yo'llarni tanlash bilan shug'ullanishi mumkin. Faqatgina asoslarni bilish tekis, kliklangan piktogrammalarni biroz ta'sirchanroq narsaga aylantirish mumkinligini anglatishi mumkin. Ehtimol, SVG-ni optimallashtirish va animatsiyaning asosiy bosqichlaridan o'tish vaqti keldi. Turli xil dizaynlarga qo'shilib, imkoniyatlarning cheksizligini anglash uchun ko'p vaqt talab qilinmaydi.
Ko'proq ilhom olish uchun Creative Bloq-ning CSS animatsiyasi misollari va ularni qanday kodlash bo'yicha qo'llanmasini ko'rib chiqing.
Qushlarning super chiptasi bilan 100 funtni tejang CSS yaratish, Creative Bloq, Web Designer jurnali va net jurnali tomonidan o'tkaziladigan bir kunlik veb-konferentsiya. Bu erda bron qiling.
01. Yarating va saqlang
Birinchidan, ishlash uchun SVG yarating. Ushbu o'quv qo'llanma uchun biz Illustrator-da yaratilgan oddiy grafikadan foydalanamiz. SVG-ni eksport qilish uchun Illustrator-dan foydalanilganda, grafik rasmga mos keladigan artboard hajmini kamaytiring, so'ngra "Saqlash" tugmasini bosing. SVG Options dialog oynasida 'type as save' ochiladigan menyudan SVG-ni, so'ngra 'SVG code…' -ni tanlang.
02. Internet uchun optimallashtirish
Keraksiz teglarni kesib tashlash, rasm bilan ishlashni osonlashtiradi. Kodni sevimli muharriringizga nusxalash va bo'sh teglar va metama'lumotlarni olib tashlash orqali qo'lda bajarish mumkin. Shu bilan bir qatorda, SVGOMG deb nomlangan hayoliy manba buni avtomatik ravishda amalga oshiradi. Kodni SVGOMG interfeysidagi 'Belgilashni joylashtirish' maydoniga qo'ying, so'ngra pastki o'ng tomondagi tugma yordamida rasmni yana nusxalash.
03. HTML hujjatini o'rnating
O'zingiz tanlagan kod muharririni oching va bo'sh HTML hujjatni o'rnating. Biz CSS animatsiyasini faylga yozamiz main.css, shuning uchun ham buni yarating. Ishlarni animatsiyaga yo'naltirish uchun biz Bootstrap 4.1.3 ning faqat CSS versiyasini oldik.
04. Tartibni tuzing
Keling, bizning maketimiz suyaklarini quramiz va SVG uchun joy ajratamiz. Biz sarlavha va ikkita ustunni qo'shdik: bittasi chap tomonda, ikkinchisi o'ngda, biz animatsiya qiladigan SVG-ni ushlab turamiz. Sahifani jonlantirish uchun tana yorlig'i fonida ikkinchi, statik, SVG dan foydalaning.
05. SVG-ni joylashtiring
Sahifaning yuqori qismidagi kirish yanada qiziqarli bo'lishi uchun biz animatsiyamizdan foydalanmoqdamiz. Optimallashtirilgan SVG kodini sahifadagi ikkinchi ustunga joylashtiring. Agar bootstrap dan foydalansangiz, SVG-ga sinf bering img-suyuqlik mobil telefonlarda tarozi borligiga ishonch hosil qilish uchun.
06. SVG-ga sinflar qo'shing
SVG-ga sinflarni qo'shish CSS-ga rasm ichidagi individual shakllarni tanlashga imkon beradi. Bu shuni anglatadiki, siz har xil vaqtda tasvirning turli shakllarini jonlantirishingiz, yanada murakkab effekt yaratishingiz mumkin.
svg> g> rect width = "147.4107" height = "68.7917" x = "31.2946" y = "114.1042" rx = "4.5882" ry = "3.9565" fill = "# 2a7fff" /> path d = "... "vector-effect =" scaling-stroke "stroke-width =". 470476156 "font-size =" 12 "fill =" # fff "fill-rule =" evenodd "stroke =" # fff "stroke-linecap = "round" /> / g> / svg>
07. Dastlabki holatlar
CSS-da bizning SVG elementlarimizni tanlash boshqa elementlar bilan bir xil. SVG ichida ushbu elementlarni tanlash uchun biz sinflarimizdan foydalanamiz. SVG-ning ikkala qismi ham sahifa yuklanganda yashirin bo'lib boshlanadi, shuning uchun ikkala elementning xiralashishini sozlash uchun CSS-dan foydalanamiz 0.
path.rectText {xira: 0; } rect.rectBackground {xira: 0; }
08. Animatsiyalarni e'lon qiling
Biz har bir animatsiya uchun ism va kalit kadrlarni e'lon qilishimiz kerak, shunda CSS effekt so'raganda nima qilishni xohlayotganimizni biladi. Men tanladim textDraw va rectFade, chunki ular har bir animatsiyani tavsiflaydi. rectFade oddiy ikki bosqichli animatsiya bo'ladi. textDraw qo'shimcha o'rta bosqichga ega bo'ladi.
@keyframes textDraw {0% {} 50% {} 100% {}} @keyframes rectFade {dan {} - {}} gacha
09. Animatsiya va xususiyatlarni tayinlang
Biz qo'shamiz rectFade ga animatsiya rectBackground elementi va unga bir soniya davomiyligini bering. An easeOut Kubik bezier uni yanada yumshoq his qilish uchun ishlatilmoqda. Biz qo'shamiz oldinga shuning uchun animatsiya tugagandan so'ng element so'nggi asosiy kadrning xususiyatlarini saqlab qoladi.
rect.rectBackground {xira: 0; animatsiya: rectFade 1s kubikli bezier (0.645, 0.045, 0.355, 1) oldinga; }
10. To'rtburchak animatsiyasi
Faqat ikkita asosiy kadrlar yordamida to'rtburchaklar uchun atributlarning boshlanishi va tugashi to'plami kerak bo'ladi. A bilan boshlaymiz 1% kenglik va tugatish 100% "to'g'ri ta'sirga kengayish" berish. Biz ham sozlashimiz mumkin xira: 1 oxirgi asosiy kadrga qadar shakl bir vaqtning o'zida o'chib ketadi.
@keyframes rectFade {dan {width: 1%; } dan {kenglik: 100%; shaffoflik: 1; }}
11. Matn animatsiyasi
Biz matnimizga chiziq chizish effekti yaratamiz, so'ngra o'chish uchun to'ldirishni ishlatamiz. Matn animatsiyasini o'rnatish uchun biz unga textDraw to'rt soniya davomiyligi bilan. Ushbu qadamda kubik bezagi o'zgartirilib, unga biroz boshqacha harakatlanish tezligini berishdi.
path.rectText {xira: 0; animatsiya: textDraw 4s kubikli bezier (.56, -0.04, .32, .7) oldinga; }
12. Boshlanishni kechiktiring
To'rtburchak so'nib bo'lgandan keyin bizning matnimiz ishlashi kerak. To'rtburchakning davomiyligi bir soniya bo'lganligi sababli, matn animatsiyasining boshlanishini shu vaqtga qoldiring.
path.rectText {xira: 0; animatsiya: textDraw 4s kubikli bezier (.56, -0.04, .32, .7) oldinga; animatsiyani kechiktirish: 1s; }
13. Chizilgan rasmni taqlid qiling
Chizilgan chizish effektimizga erishish uchun biz zarba-dasharray va qon tomirlari parametrlar. Siz foydalanadigan SVG-ga qarab sizning qadriyatlaringiz menikidan farq qiladi. O'zingizning qadringizni topish uchun afzal ishlab chiquvchi vositalaridan foydalaning va oshiring zarba-dasharray dan 0 butun shakl bir zarba bilan qoplanmaguncha.
path.rectText {xira: 0; zarba-dasharray: 735; animatsiya: textDraw 4s kubikli bezier (.56, -0.04, .32, .7) oldinga; animatsiyani kechiktirish: 1s; }
14. Birinchi chiziq chizilgan asosiy kadr
Endi bizda juda katta zarba bor, u butun matn yo'lini qamrab oladi, keling, uni samarali ravishda itarish uchun uni o'z uzunligi bilan qoplaymiz. Foydalanish qon tomirlari biznikiga o'xshash qiymat uchun dasharray buni qilish kerak. Buni birinchi kalit ramkamizga o'rnatamiz. Shuningdek, biz shaklni shaffof qilib, zarbni oq rangga o'rnatamiz, agar u hali bo'lmasa.
0% {fill: rgb (255, 255, 255, 0); qon tomir: #fff; zarba-dashoffset: 800; shaffoflik: 1; }
15. Chiziqlarni chizish
Bizning o'rta kalit kadrimiz paydo bo'ladi 40% animatsiya orqali. Biz keltiramiz qon tomirlari nolga qaytib, chiziqcha butun yo'lni qamrab oladi. To'ldirish faqat rasm chizilganidan keyin paydo bo'lishiga ishonch hosil qilish uchun biz ushbu bosqichda shaffof to'ldirishni yana qo'shishimiz mumkin.
40% {strok-dashoffset: 0; to'ldirish: rgb (255, 255, 255, 0,0); }
16. Shaklni to'ldiring
Animatsiyaning so'nggi qismida biz shaklni oq rangga to'ldiramiz. So'nggi kadrlar uchun biz faqat to'ldirish rangining alfa qiymatini ko'tarishimiz kerak. Bu plomba moddasining pasayib ketishini yaratadi.
100% {to'ldirish: rgb (255, 255, 255, 1); strok-dashoffset: 0; shaffoflik: 1; }
Ushbu maqola dastlab veb-dizayn jurnalida nashr etilgan Veb-dizayneri. 286-sonni sotib oling yoki obuna bo'lish.
