11-sinf informatika 19-hafta, 22-dars: Web-sahifalarda animatsiyalar va ularni o‘rnatish

Web-sahifalarda animatsiyalar va ularni o‘rnatish

Darslik: 81–83-betlar

MaqsadAnimatsiya tamoyilini (kadr, kalit kadr, oraliq kadrlar, kadr tezligi) tushuntiradi, kadrlar sonini hisoblaydi va CSS yordamida oddiy harakat animatsiyasini yaratadi hamda xavfsizlik talablarini bajaradi.

Yangi so‘zlar

kadr · frame: one still picture of an animationkalit kadr (keyframe) · keyframe: a frame where the author sets the object's position or shapetween (oraliq kadrlar) · tween: the in-between frames that the program calculates between two keyframeskadr tezligi (fps) · frame rate (fps): the number of frames shown per second

Tushuntirish

Animatsiya – bir-biridan ozgina farq qiladigan tasvirlar (kadrlar) ketma-ketligini tez almashtirib ko‘rsatish: ko‘z bunday kadrlarni uzluksiz harakat deb qabul qiladi. Bir soniyada ko‘rsatiladigan kadrlar soni kadr tezligi (fps) deyiladi: kino uchun odatda 24, ekran va o‘yinlar uchun 30 yoki 60; demak, jami kadrlar soni = fps · soniyalar. Animatsiya vositalarida ish vaqt chizig‘i (Timeline) da olib boriladi: qatlamlar (Layer) tasvir qismlarini ajratadi, kadrlar vaqt bo‘yicha joylashadi. Muallif faqat kalit kadrlarni (masalan, birinchi va oxirgi holatni) belgilaydi, oraliq kadrlarni dastur hisoblaydi; bu tween deyiladi: Motion tween (harakat) obyektning o‘rnini, Shape tween (shakl) esa shaklini asta o‘zgartiradi, Macromedia Flash da bunga yo‘l yo‘riqchi (Motion Guide) qatlami qo‘shilgan. Hozirgi veb-sahifalarda xuddi shu g‘oya CSS da bajariladi: @keyframes qoidasi kalit holatlarni, animation xossasi esa davomiylik, takrorlash va tezlik funksiyasini beradi; murakkab holatlar uchun JavaScript, SVG yoki video, GIF va WebP animatsiyalari ishlatiladi. Xavfsizlik: sekundiga 3 martadan ko‘p miltillovchi tasvirlar ba’zi odamlarda tutqanoq xurujini keltirishi mumkin, shuning uchun hech qachon tez miltillovchi yorug‘ effekt yasamang; ko‘plab foydalanuvchilar harakatni kamaytirishni so‘raydi, bunga prefers-reduced-motion qoidasi bilan hurmat qilinadi.

Namunalar

Harakatlanuvchi shar (CSS): <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎ <meta charset="utf-8"> ⏎ <title>Harakatlanuvchi shar</title> ⏎ <style> ⏎ .maydon { position: relative; width: 400px; height: 60px; background: #e8f1ff; } ⏎ .shar { position: absolute; top: 10px; left: 0; width: 40px; height: 40px; ⏎ border-radius: 50%; background: #d9480f; ⏎ animation: yur 3s linear infinite alternate; } ⏎ @keyframes yur { from { left: 0; } to { left: 360px; } } ⏎ @media (prefers-reduced-motion: reduce) { .shar { animation: none; } } ⏎ </style> ⏎ </head> ⏎ <body> ⏎ <div class="maydon"><div class="shar"></div></div> ⏎ </body> ⏎ </html> Shar 3 soniyada chapdan o‘ngga 360 piksel yuradi (tezligi 360:3 = 120 piksel/s), alternate tufayli orqaga qaytadi; 1,5 soniyada left = 360:2 = 180 piksel. Foydalanuvchi harakatni kamaytirishni so‘rasa, animatsiya o‘chadi.

Kadrlar hisobi: 12 fps li animatsiyaning 5 soniyasi 12·5 = 60 kadr. 1- va 24-kadrlar kalit kadr bo‘lsa, oraliq kadrlar 22 ta (2–23-kadrlar). Obyekt 1-kadrda x = 0 va 24-kadrda x = 230 bo‘lsa, har kadrda 10 piksel siljiydi: 11-kadrda x = (11 – 1)·10 = 100.

Sinfda faoliyat

«Qo‘l animatsiyasi»: daftarning chetiga 12 ta kadrdan iborat «sakrayotgan to‘p» chizib, varaqlab ko‘rsatiladi; kalit kadrlarni belgilab, oraliq kadrlarni sherigi chizadi.

Mashq

Kalit kadr va oraliq kadrlar (tween) o‘rtasidagi farq nima?

24 fps li animatsiyaning 5 soniyasida nechta kadr bor?

1-kadrda x = 20, 21-kadrda x = 220 va harakat tekis. 11-kadrda x nechaga teng?

Nima uchun tez miltillovchi tasvirlarni web-sahifaga qo‘ymaslik kerak?