CSS animatsiyalari

Css taqdimoti

Manba: Onlayn dastur

Siz tahrirlashingiz, montaj qilishingiz yoki hatto yaratishingiz mumkin bo'lgan ko'plab dasturlar mavjud ko'rsatuvlar, har safar ushbu turdagi interaktiv loyihalarni qo'shadigan ko'plab dasturlar mavjud. Ushbu postda biz sizni nafaqat animatsiyalar olami bilan tanishtirmoqchimiz, balki sizni yangi do'st bilan ham tanishtirmoqchimiz.

Ma'lumki, hisoblash dunyosi hozirda birga mavjud bo'lgan veb-sahifalar yoki onlayn medialarni ishlab chiqish uchun buyruqlar va foydali vositalar bilan to'la. Biz bilan qoling va ushbu yangi qoʻllanmada kompyuter va interaktivlik bilan oʻz darajangizni oshirishning yana bir usulini toping.

Animatsiyalar nima?

Animatsiyalar dunyosi

Manba: Barcha geymerlar

Biz sizni o'quv qo'llanmasiga to'liq kirishingizni xohlaymiz, ammo buning uchun animatsiyalar olamiga yoki grafik dizaynga tegishli bo'lgan narsalar dunyosiga kirish kerak. interaktiv dizayn. 

Animatsiyalar ham audiovizual dunyoning bir qismidir, agar ular audio va harakatlanuvchi tasvirni taqdim qilsalar yoki ular hech narsa bo'lmaydi. Shu sababli, biz "animatsiya" haqida gapirganda, biz "multfilmlar" deb nomlanuvchi narsalarni nazarda tutamiz.

Yuqorida xulosa qilinganidek, animatsiya biror narsaga, bu holda multfilmlarga harakat berish qobiliyatidan kelib chiqadi. Ammo bu harakatlarning barchasiga qanday erishiladi? chizmalar yoki fotosuratlar ketma-ketligi ketma-ket buyurtma berish orqali ular bizning ko'z o'ngimizda ishonchli harakatni yaratishga muvaffaq bo'lishadi va ular vizual illyuziya o'yiniga kirishadi.

Ilgari birinchi animatsiyalar qog'oz varaqlarida ishlab chiqilgan bo'lib, ularning har birida animatsion qahramon qadamlar bilan chizilgan va varaqning oxiriga etib borgandan so'ng, chizmadagi harakat effektiga erishish uchun birin-ketin tez o'tkazilar edi. .

Animatsiya turlari

Har xil animatsiya turlari mavjud:

Multfilm yoki an'anaviy animatsiya

Bu uslub qahramonga kadrma-kadr harakatini berishdan iborat. Dastlab, audiovizual vositalar etarli bo'lmaganda, ular har bir kadrni (jumladan, fon, sahna yoki animatsiya fonini) chizish va bo'yash orqali amalga oshirildi, keyinchalik biz kino tasmasi deb bilgan narsalarga suratga olindi.

Harakatni to'xtatish

Stop Motion - bu multfilmlarga hech qanday aloqasi bo'lmagan animatsiya texnikasi. Bundan tashqari, uning asosiy maqsadi haqiqatda butunlay statik bo'lgan ob'ektlarning harakatini taqlid qilishdir va u ikki bosqichga bo'linadi: loy yoki loydan yasalgan animatsiya va qattiq jismlarning animatsiyasi.

Piksellanish

Pikselatsiya - bu Stop Motion-dan kelib chiqqan va qo'g'irchoqlar ham, modellar ham emas, balki umumiy ob'ektlar yoki odamlar bilan ishlashdan iborat bo'lgan texnikadir. Ob'ektlar bir necha marta suratga olinadi va har bir ramka bilan bir oz siljiydi.

Rotoskopiya

Bu boshqa chizmaning to'g'ridan-to'g'ri chizishidan iborat bo'lib, masalan, boshqa chizilgan chizilgan rasmni yoki haqiqiy shaxsni chizish. U kino olamida raqamli personajlarni qayta yaratish uchun foydalaniladigan mocap, ya'ni harakatni suratga olishning asoschisi hisoblanadi.

Cutouts yoki Cut Out Animation orqali animatsiya

Bu raqamlarni kesishdan iborat bo'lgan texnikadir, bu raqamlar qog'ozda yoki fotosuratlarda ko'rsatilishi mumkin. Belgilarning tanasi kesiklar asosida qurilgan va harakat va animatsiya aytilgan kesiklarni almashtirishdan kelib chiqadi.

3d animatsiya

3D animatsiya muharrir dasturidan kelib chiqadi, bu simulyatsiya va animatsiyalarni amalga oshirish imkonini beradi. Ushbu ikkita variant ichida yaxshi yorug'lik, kamera harakatlari va maxsus effektlar aloqa qiladi.

Hozirgi vaqtda boshqa texnikalar ham mavjud, masalan: shisha ustidagi rasm, qum animatsiyasi, gujalar ekrani va selluloiddagi rasm. 

CSS nima?

Dasturning Css interfeysi

Manba: Rosario Session Studio veb-dizayn

Endi siz animatsiyalar olami haqida bir oz ko'proq ma'lumotga ega bo'lganingizdan so'ng, sizni CSS qisqartmalari dunyosi bilan tanishtirish vaqti keldi.

Qisqartma CSS, "Kaskad uslublar jadvallari" ga qarang. U dizayn sohasida va veb-sahifalar taqdimotida qo'llaniladigan tildan iborat, bundan ham yaxshiroq, ular veb-sahifani birinchi marta ko'rishimiz uchun taqdim etish uchun mas'ul bo'lgan bir qator vositalar va buyruqlardir. u allaqachon yaratilgan bo'lsa. Asbob bilan birgalikda ishlaydi HTML (sahifalarning asosiy mazmunidan tashkil etilgan).

Uning nomi o'z ichiga olgan varaqlar soni bilan belgilanadi va ulardan biri boshqalardan xususiyatlar yoki xususiyatlarni meros qilib oladi. Ya'ni, siz oddiy blog shablonlari bilan ishlashingiz mumkin, lekin siz saytning ko'rinishini moslashtirmoqchi bo'lganingizda, CSS-ni qo'llashingiz kerak bo'ladi, bu yaxshi CMS bilan birgalikda kontentingizga kirishni kengaytirishga yordam beradi.

CSS nima uchun?

CSS yordamida siz o'z sahifangizni tartibga solishingiz mumkin, ya'ni veb-sahifangizga barcha ma'lumotlarni qanday joylashtirishni xohlayotganingizni aytishingiz mumkin, shunda tomoshabinni boshqarish oson va bir vaqtning o'zida foydali bo'ladi. Bu erda veb-sahifaning uslubi yoki dizaynining bir qismi bo'lgan ba'zi elementlarning barcha buyruqlarini kiriting, masalan shriftlar, ranglar, o'lchamlar va boshqalar. 

Odatda, ushbu vosita nima ekanligini yaxshiroq tushunishingiz uchun raqamli marketing bo'yicha mutaxassislar buni birinchi bo'lib tushunishadi, chunki ular bilan shug'ullanadiganlar.

CSS-da animatsiya

Xo'sh, endi siz animatsiyalar va CSS dunyosi haqida ozgina bilasiz. O'quv qo'llanmasini boshlash vaqti keldi.

CSS animatsiyalari bir CSS uslubi va boshqasi o'rtasidagi o'tishni jonlantirishga imkon beradi. Bu animatsiyalar ikkita komponentdan iborat: a uslubi qaysi CSS animatsiyasi va to'plamini tavsiflaydi ramkalar uning boshlang'ich va yakuniy holatini, shuningdek, undagi mumkin bo'lgan oraliq nuqtalarni ko'rsatadi.

Ushbu animatsiyalarning har biri bir qator afzalliklarga ega:

  • Oddiy animatsiyalar uchun undan foydalanish juda oson, siz buni hatto Javascript-ni bilmasdan ham qilishingiz mumkin.
  • Animatsiya hatto kam quvvatli kompyuterlarda ham to'g'ri ko'rsatiladi.
  • Brauzer tomonidan boshqarilishi, uning ishlashi va samaradorligini optimallashtirishga imkon beradi, shu bilan chastotani kamaytiradi va yorliqlarni ko'rinmaydigan tarzda bajarishga imkon beradi.

Animatsiya sozlamalari

Animatsiyani boshlash uchun birinchi navbatda biz uni sozlashimiz kerak. Buning uchun biz mulkka boramiz animatsiya va uning pastki xususiyatlariga. Ushbu vosita bizga animatsiyaning ritmini va davomiyligini, hatto uning ketma-ketligini ham sozlash imkonini beradi.

Pastki xususiyatlar quyidagilardir:

animatsiya - kechikish

Element yuklangan vaqt va animatsiya ketma-ketligi boshlanishi o'rtasidagi kechikish vaqti.

animatsiya - yo'nalish

Animatsiya ketma-ketlikning oxirida boshlang'ich kadrga qaytishi kerakmi yoki oxiriga yetganda boshidan boshlanishi kerakligini ko'rsatadi.

animatsiya - davomiylik

Animatsiya o'z tsiklini yakunlash uchun qancha vaqt kerakligini ko'rsatadi (davomiylik)

animatsiya - takrorlash - hisoblash

U necha marta takrorlanadi. Biz ko'rsata olamiz cheksiz animatsiyani cheksiz takrorlash.

animatsiya - ism

U animatsiyaning har bir ramkasini tavsiflovchi nomni belgilash uchun ishlatiladi.

animatsiya - o'ynash - holat

Animatsiya ketma-ketligini to'xtatib turish va davom ettirish imkonini beradi.

animatsiya - vaqtni belgilash funktsiyasi

Bu animatsiyaning ritmini, ya'ni animatsiya kadrlari qanday ko'rsatilishini ko'rsatadi, buning uchun tezlashtirish egri chiziqlari o'rnatiladi.

animatsiya - to'ldirish rejimi

Animatsiya tugagandan so'ng xususiyatlar qanday qiymatlarga ega bo'lishini belgilaydi.

Ramkalar bilan ketma-ketlikni o'rnating

Vaqtni, nomenklaturani va hokazolarni sozlaganimizdan so'ng. Bizning animatsiyamizga ko'rinish yoki tuyg'u taklif qilish vaqti keldi.

Buning uchun biz ikkita yangi ramka o'rnatamiz va qoidadan foydalanamiz @keyframes. Buning yordamida har bir ramka animatsiya ketma-ketligi davomida har bir element qanday topilganligini tasvirlaydi.

ni ko'rsatish uchun vaqt va ritm, ramka foydalanadi foiz va dan vagachaBuning yordamida biz boshlanishi 0% va oxiri 100% bilan qachon sodir bo'lishini ko'rsatishimiz mumkin.

Kadrlar va matnlarning animatsiyasi

Ko'proq ramkalar qo'shish va ularni matn bilan jonlantirish uchun sarlavha uchun kattaroq shrift o'lchamini qo'llashingiz kerak, shunda sarlavha belgilangan vaqt davomida harakatlanayotganda kattalashadi va keyin asl hajmiga kamayadi. Buning uchun biz quyidagi kodni yaratamiz:

75% shrift - hajmi: 300%; chekka - chap: 25%; kengligi: 150%;

Ushbu kod yordamida biz brauzerga ketma-ketlikning 75% da sarlavhaning chap cheti 25% va kengligi 200% bo'lgan o'lchami 150% bo'lishini taklif qilamiz.

Animatsiyani takrorlash

Animatsiyani takrorlash uchun siz quyidagi xususiyatdan foydalanishingiz kerak animatsiya - takrorlash - hisoblash va biz uning necha marta takrorlanishini xohlayotganimizni ko'rsatishimiz kerak. Biz ham foydalanishimiz mumkin cheksiz shunday qilib, u doimo takrorlanadi.

Xulosa

Ko'rib turganingizdek, CSS-da siz animatsion loyihalar yaratishingiz mumkin va biz sizga bergan amallarni bajarib, unga kirishingiz mumkin. Agar siz o'zingizni so'rashda va xabardor qilishda davom etsangiz, biz uchun juda ko'p imkoniyatlar mavjudligini bilib olasiz.

Siz allaqachon jur'at qildingizmi?


Maqolaning mazmuni bizning printsiplarimizga rioya qiladi muharrirlik etikasi. Xato haqida xabar berish uchun bosing bu erda.

Birinchi bo'lib izohlang

Fikringizni qoldiring

Sizning email manzilingiz chop qilinmaydi.

*

*

  1. Ma'lumotlar uchun javobgardir: Migel Anxel Gaton
  2. Ma'lumotlarning maqsadi: SPAMni boshqarish, izohlarni boshqarish.
  3. Qonuniylashtirish: Sizning roziligingiz
  4. Ma'lumotlar haqida ma'lumot: qonuniy majburiyatlar bundan mustasno, ma'lumotlar uchinchi shaxslarga etkazilmaydi.
  5. Ma'lumotlarni saqlash: Occentus Networks (EU) tomonidan joylashtirilgan ma'lumotlar bazasi
  6. Huquqlar: istalgan vaqtda siz ma'lumotlaringizni cheklashingiz, tiklashingiz va o'chirishingiz mumkin.