☰ Mundarija · Informatika

Amaliy mashg‘ulot: animatsiyali sahna

Darslar 23 · 1 ta dars · N. I. Taylaqov (umumiy muharrir), A. B. Axmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatika va axborot texnologiyalari, 11-sinf, 1-nashr. «Extremum-press», Toshkent, 2018
23

Amaliy mashg‘ulot

Darslik: 83–85-betlar
MaqsadBir nechta animatsiya effektini bitta sahnada birlashtiradi: loyihani rejalashtiradi, obyektlarni alohida qatlam-elementlarda yaratadi, tugma bilan boshqaradi, tezlikni hisoblaydi va natijani turli ekranlarda sinaydi.
Yangi so‘zlar
sahna (stage) · stage: the area where the animated objects are shown; in HTML it is a positioned containerstoryboard · storyboard: a plan of the scene drawn frame by frame before building itanimation-play-state · animation-play-state: a CSS property that pauses or resumes an animationsinash (testing) · testing: running the page on different screens and browsers to find mistakes
Tushuntirish

Bir vaqtning o‘zida bir nechta animatsiya hosil qilish uchun har bir harakatlanuvchi obyekt alohida «qatlam»da bo‘ladi: Flash da bu alohida Layer edi, HTML da esa sahna ichidagi alohida element. Ish rejalashtirishdan boshlanadi: storyboard (kadrma-kadr reja) da obyektlar, ularning boshlang‘ich va oxirgi holati, davomiyligi yoziladi. Keyin sahna (kenglik, balandlik, fon) yaratiladi, har bir obyekt elementi va uning CSS animatsiyasi yoziladi. Har bir animatsiya o‘z davomiyligi va tezligiga ega bo‘lishi mumkin, shuning uchun obyektlar bir-biriga bog‘liq bo‘lmay harakatlanadi (bulut 10 soniyada, quyosh 6 soniyada). Harakat tezligi = masofa : vaqt; masalan, bulut chapdagi –100 pikseldan 400 pikselgacha (500 piksel) 10 soniyada o‘tsa, tezligi 50 piksel/s. Foydalanuvchi boshqaruvi uchun tugma va JavaScript ishlatiladi: classList.toggle sahnaga sinfni qo‘shadi yoki olib tashlaydi, CSS esa shu sinfga qarab animation-play-state: paused beradi. Tayyor ishni sinash shart: boshqa brauzerda va telefon o‘lchamida ochib ko‘ring, animatsiya o‘z-o‘zidan to‘xtamasligini, matn o‘qilishini tekshiring; xato bo‘lsa, brauzerning ishlab chiquvchi vositalari (F12) konsolidagi xabarlarga qarang. Faylni ishlab bo‘lgach, kodning nusxasini saqlang va boshqa odamning rasm yoki ovozini ruxsatsiz ishlatmang.

Namunalar
Quyosh va bulut sahnasi: <!DOCTYPE html> ⏎ <html lang="uz"> ⏎ <head> ⏎  <meta charset="utf-8"> ⏎  <title>Quyosh va bulut</title> ⏎  <style> ⏎    .sahna { position: relative; width: 400px; height: 160px; background: #bfe3ff; overflow: hidden; } ⏎    .quyosh { position: absolute; left: 20px; top: 100px; width: 50px; height: 50px; ⏎              border-radius: 50%; background: #ffb703; animation: chiq 6s ease-in-out infinite alternate; } ⏎    .bulut { position: absolute; left: -100px; top: 20px; width: 100px; height: 36px; ⏎             border-radius: 18px; background: #ffffff; animation: suz 10s linear infinite; } ⏎    @keyframes chiq { from { top: 100px; } to { top: 10px; } } ⏎    @keyframes suz { from { left: -100px; } to { left: 400px; } } ⏎    .toxta .quyosh, .toxta .bulut { animation-play-state: paused; } ⏎  </style> ⏎ </head> ⏎ <body> ⏎  <div class="sahna" id="sahna"> ⏎    <div class="quyosh"></div> ⏎    <div class="bulut"></div> ⏎  </div> ⏎  <button onclick="almashtir()">To‘xtat / davom ettir</button> ⏎  <script> ⏎    function almashtir() { ⏎      document.getElementById("sahna").classList.toggle("toxta"); ⏎    } ⏎  </script> ⏎ </body> ⏎ </html> Tugma bosilganda sahnaga «toxta» sinfi qo‘shiladi va ikkala animatsiya to‘xtaydi; yana bosilsa, davom etadi.
Tezliklar: bulut 400 – (–100) = 500 piksel yo‘lni 10 soniyada o‘tadi, tezligi 500:10 = 50 piksel/s; quyosh 100 dan 10 gacha, ya’ni 90 piksel yuqoriga 6 soniyada ko‘tariladi, tezligi 90:6 = 15 piksel/s (ease-in-out tufayli o‘rtacha). 30 soniyada bulut 30:10 = 3 marta o‘tadi.
Sinfda faoliyat

«Studiya»: uchtalik guruhlar (rejissyor, dasturchi, tekshiruvchi) 3 ta obyektli sahna yasaydi – masalan, kun va kecha, mashina va bulut; so‘ng rollarni almashtirib, bir-birining ishini sinaydi va xatolar ro‘yxatini yozadi.

Mashq
1
Animatsiyali sahnani tayyorlashning asosiy bosqichlarini tartib bilan yozing.
2
Obyekt 600 pikselni 12 soniyada tekis o‘tsa, tezligi necha piksel/s?
3
Sahifada animatsiya ishlamayapti. Qanday tekshiruvlarni bajarasiz? (kamida uchta)
4
Nima uchun tayyor sahnani telefon o‘lchamida ham sinash kerak?