Ticker uchun salom animatsiyasi. Ticker uchun animatsiya
Ticker animatsiyasi odatda juda katta ekranlarda qo'llaniladi. Buning sababi shundaki, kichik ekran uchun grafik animatsiyani tanlash qiyin, shunda u uyg'un ko'rinadi va barcha e'tiborni chalg'itmaydi. Ammo matn harakati turli xil ekran o'lchamlari uchun ishlatiladi.
LED belgisi to'liq rangli yoki monoxrom bo'lishi mumkin va bu animatsiyadan foydalanish uchun ham katta ahamiyatga ega. To'liq rangli modellarda u cheklovlarsiz ishlatilishi mumkin, ammo bitta rangli ekranlar uchun quyidagilar zarur:
- Bitta rangdan iborat animatsiyani qo'llash;
- Hajmi nisbatini hisobga oling, aks holda animatsiya shunchaki xiralashadi.
Bitta rangli ekranlar uchun animatsiya matni juda murakkab va effektlar bilan yuklanmasligi kerak. Esda tutingki, hamma narsa bir xil rangda amalga oshiriladi va bitta yorqin nuqtaga birlashishi mumkin.
Tasvirlarni almashish uchun qulay format: gif, ko'pincha ekranlar bilan ishlashda ishlatiladi. O'rmalovchi chiziq uchun Gif animatsiyasi bitta rangli yoki ko'p rangli bo'lishi mumkin va 256 tagacha rangni o'z ichiga oladi.
LED displey muharrirlarida GIF fayllari statik holatda ham, parallel harakatda ham yaratilishi mumkin:
- Tasvir uchun o'z harakati;
- Ekran bo'ylab harakatning ta'siri.
Bunday holda, ticker uchun animatsiya maxsus muharrir dasturlari orqali sozlanadi va maxsus skriptlar yordamida ishlab chiqilishi kerak. Siz ularni tayyor formatda yuklab olishingiz yoki qurilmangiz uchun ishlab chiqishga buyurtma berishingiz mumkin.
LED ticker uchun animatsiya
LED displeydagi har qanday tasvirning dizayni, agar siz unga harakat qo'shsangiz, yanada qiziqarli bo'lishi mumkin. Lekin siz LED belgisi uchun animatsiya nima ekanligini va uning dasturiy ta'minot effektlarini farqlashingiz kerak. Shunday qilib, siz jonlantirilgan matn yoki tasvirni sozlash dasturiga tayyor holda yuklashingiz mumkin. Faylda ketma-ket ramkalar va ularning har birining ko'rish vaqti haqidagi ma'lumotlar bo'ladi.
Tikerni jonlantirishning ikki yo'li mavjud.
Birinchi yo'l
Fon bo'ladigan rasmni oching (misol). Yangi qatlam yarating. "To'rtburchaklar maydoni" vositasidan foydalanib, chiziq bo'ylab harakatlanadigan maydon vazifasini bajaradigan kichik to'rtburchakni tanlang va uni biron bir rang bilan to'ldiring, bu muhim emas, chunki undan ko'rinish o'chiriladi.
Matn qatlamini yarating.
Matn qatlamiga qatlam niqobini qo'shing va uni qora rang bilan to'ldiring. To'rtburchak bilan qatlamga qadam qo'ying va tanlangan maydonni yuklang: "Tab" yorlig'i. Uni qatlam niqobiga joylashtiring va tanlangan maydonni oq rang bilan to'ldiring.
To'rtburchak bilan qatlamdan ko'rinishni olib tashlang. "Oyna" yorlig'ida "Vaqt jadvali" ni tanlang va hikoyalar jadvalini yarating. Birinchi kadrda biz "Tsiklni ko'rsatish vaqtini tanlash" va "Tsikl parametrlarini tanlash" ni o'rnatamiz. Matn qatlamini qatlam niqobidan ajratib oling. Chiziqni ko'zdan g'oyib bo'lishi uchun o'ngga siljiting. Bu qatlam niqobida oq rang bilan ta'kidlangan to'rtburchaklar maydonini ta'minlaydi. Ko'chirishda chiziq bir xil darajada bo'lishi uchun siz "Yordamchi elementlar" ni yoqishingiz kerak: "Ko'rish" yorlig'i.
Ikkinchi ramkada biz chiziqni chapga siljitamiz, shunda u ko'zdan g'oyib bo'ladi.
Storyboardda Shift tugmachasini bosib ushlab turing va birinchi va ikkinchi ramkalarni bosing. "Oraliq ramkalar yaratish" belgisini bosing. Muloqot oynasida oraliq kadrlar sonini belgilang.
Biz sudraluvchi chiziqning birinchi usulini olamiz.
Ikkinchi yo'l
Statik bo'ladigan, lekin harakatga taqlid qiladigan matn qatlami yarating.
Matn qatlamidan tashqari barcha qatlamlarda ko'rinishni o'chiring. Matn qatlamidan cho'tka yasang.
Biz rasm bilan qatlamda turamiz, "To'rtburchaklar maydoni" vositasidan foydalanib, o'rmalovchi chiziq taqlid qilinadigan rasmning bir qismini tanlang. Tanlangan maydondan nusxa oling va joylashtiring.
Tasvir parchasi bilan qatlamga qatlam niqobini qo'shing va uni qora rang bilan to'ldiring. Qatlam niqobida qatlamni ochish uchun oq matn qatlamidan cho'tkadan foydalaning. Rasm parchasi bilan qatlam ustida yangi qatlam yarating va uni mos quyuq rangdagi yumshoq cho'tka bilan bo'yash. Tasvirning bir qismi bilan qatlamni elkaga nisbatan kesish niqobi qiling: Alt tugmachasini bosib ushlab turganda qatlamlar oynasida qatlamlar chegarasi bo'ylab bosing.
Biz hikoyalar jadvalini yaratamiz. Birinchi ramkada qatlamni chiziq bilan o'ngga o'tkazing.
Ikkinchi ramkada qatlamni chiziq bilan chapga siljiting.
Biz oraliq ramkalarni yaratamiz.
Biz animatsiyani saqlaymiz va tickerni simulyatsiya qilib, ikkinchi usulni olamiz.
Salom, maket va veb tillarini sevuvchilar! Bugungi nashr mavzusi haqli ravishda: "html sayti uchun animatsiya". Animatsiyalar bugungi kunda juda mashhur va yangi boshlanuvchilar orasida eng ko'p savollar tug'diradi. Shuning uchun men ushbu mavzuga to'xtalib, jonlantirilgan elementlar nima uchun kerakligini, ular qayerda tez-tez ishlatilishini va qanday vositalardan foydalanishini aytib bermoqchiman.
Shuningdek, men mashhur va talab qilinadigan vazifalarni amalga oshirib, aniq kod misollarini ko'rsatishga qaror qildim. Maqolani oxirigacha o'qib bo'lgach, siz lenta va qor yog'ishi kabi texnikani qanday amalga oshirishni o'rganasiz. Endi maqolaning asosiy qismiga o'tamiz!
Animatsiya butun dunyoni zabt etdi
Darhaqiqat, ko'pchilik veb-resurslar o'z mazmunida animatsion ob'ektlardan foydalanadi. Eng yorqin misol bu onlayn-do'konlar bo'lib, ularda kursorni model yoki mahsulot ustiga olib borganingizda ular aylanib chiqadi.
Ilgari animatsiya rolini gif fayllar o'ynagan. Biroq, bugungi kunda harakatlanuvchi elementlarning asosiy qismi kaskadli uslublar jadvallari yordamida amalga oshiriladi. Bundan tashqari, veb-ishlab chiquvchilarning ishini ularga tayyor echimlar bilan ta'minlash orqali soddalashtiradigan ko'plab kutubxonalar mavjud.
Masalan, Animate.css kutubxonasi. Kutubxonani yuklab olish va keyin dastur kodiga ulanish mumkin < havola>.
Tiker
Siz ba'zan veb-saytdagi matn mazmuni gorizontal yoki vertikal ravishda qanday harakatlanishini yoki hatto tasvirlar harakatlanishini payqagan bo'lishingiz mumkin. Bu murakkab ko'rinadi, lekin aslida buning uchun javobgar bo'lgan faqat bitta HTML tili yorlig'i mavjud .
Shuni ta'kidlashni istardimki, bu yangi element emas va html5 bilan bog'liq emas. U dastlab Internet Explorer uchun yaratilgan, ammo bir muncha vaqt o'tgach, boshqa brauzerlar uni qo'llab-quvvatlay boshladilar.
Xo'sh, qanday qilib ticker yaratasiz? Aslida, juftlangan tegga kerakli matnni kiritish kifoya - va u "yugurib ketadi". Uning aniq qanday harakat qilishi boshqa masala.
| Xususiyat | Tavsif |
| xulq-atvor | Kontent qanday ko'chirilishini belgilaydi: muqobil- tarkib ikki chegara o'rtasida harakatlanadi, ulardan sakrab chiqadi; aylantiring– predmet xuddi aylana bo‘ylab harakatlanadi (bir tomonda paydo bo‘ladi, ikkinchi tomondan yo‘qoladi); slayd- tarkib butunlay ketadi va to'xtaydi. |
| halqa | Ta'riflangan tegning mazmuni necha marta takrorlanishini aniqlaydi. Masalan, -1 cheksiz takrorlash uchun ishlatiladi. |
| yo'nalishi | Harakat yo'nalishini belgilaydi: pastga– yuqori chetidan pastga siljiydi; chap- o'ng chetidan chapga; yuqoriga– pastki chegaradan yuqoriga; to'g'ri- chapdan o'ngga. |
| aylantirish | Joriy ob'ekt holati va keyingisi orasidagi piksel masofasini belgilaydi. Harakat tezligiga ta'sir qiladi. Dastlab 6 ga teng. |
| aylantirish kechikishi | Bundan tashqari, "ishlaydigan" tezlikka ta'sir qiladi, lekin yangilanish chastotasi hisobiga. Kechikishni millisekundlarda o'rnatadi. |
Endi olingan bilimlarni amalda sinab ko'rish vaqti keldi. Kod dialog oynasiga tickerlarning quyidagi dasturiy ta'minotini qo'ying va uni brauzerda ishga tushiring.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Sahifada ikkita animatsiya ko'rsatildi: yugurish (aniqrog'i sakrash) chizig'i va chopayotgan ot.
Qish oylari yaqinlashganda, ko'plab onlayn-resurs egalari o'z veb-saytlarini archa shoxlari, bayram o'yinchoqlari yoki qor yog'ishi bilan bezashadi. Biz oxirgi nuqta bilan shug'ullanamiz.
Qor parchalarini turli yo'llar bilan yaratish mumkin. Ba'zilar shablonlarini shaffof fonda chizishadi, boshqalari Internetdan tayyor materiallardan foydalanadilar, boshqalari esa CSS vositalariga murojaat qilishadi. Men oxirgi guruhga qo'shilishga qaror qildim va o'z sehrimni uslublar ustida ishladim.
Siz taxmin qilganingizdek, bu safar animatsiya faqat kaskadli uslublar jadvallarining o'rnatilgan mexanizmlari tomonidan yaratiladi, garchi boshqa yechim skriptlari mavjud bo'lsa ham. Bundan tashqari, biz html dan foydalanmaymiz, faqat standart belgilashdan foydalanamiz.
Yomg'irli qorni yaratish uchun siz quyidagi vositalardan foydalanishingiz kerak:
mulk animatsiya(css3 spetsifikatsiyasida paydo bo'lgan) va blokirovka qiling @keyframes.
@keyframes ma'lum bir vaqtda veb-sahifa elementlarining holatini aniqlashga yordam beradi va shu bilan ularni harakatga keltiradi. Kalit so'z dan ob'ektlarning boshlang'ich joylashuvini va so'zni o'rnatadi uchun- final.
Reklamaning umumiy ko'rinishi: @keyframes nomi (dan (…)ga (...))
Animatsiya u bir nechta parametrlarga bo'linadi, ulardan 4 tasi biz foydalanamiz.
Va endi bir misol:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
