Lessons 23 · 1 lessons · N. I. Taylaqov (general editor), A. B. Akhmedov, M. D. Pardayeva, A. A. Abdug‘aniyev, U. M. Mirsanov. Informatics and Information Technologies, Grade 11, 1st edition. “Extremum-press”, Tashkent, 2018
23
Practical lesson
Textbook: pp. 83–85
GoalCombines several animation effects in one scene: plans the project, creates the objects as separate layer-like elements, controls them with a button, calculates the speed and tests the result on different screens.
New words
stage: the area where the animated objects are shown; in HTML it is a positioned container · sahna (stage)storyboard: a plan of the scene drawn frame by frame before building it · storyboardanimation-play-state: a CSS property that pauses or resumes an animation · animation-play-statetesting: running the page on different screens and browsers to find mistakes · sinash (testing)
Explanation
To create several animations at once, each moving object lives in its own “layer”: in Flash this was a separate Layer, in HTML it is a separate element inside the stage. The work starts with planning: in a storyboard (a frame-by-frame plan) the objects, their start and end states and durations are written down. Then the stage (width, height, background) is created, and an element and its CSS animation are written for each object. Every animation can have its own duration and speed, so the objects move independently of each other (the cloud in 10 seconds, the sun in 6 seconds). Speed = distance : time; for example, if the cloud goes from –100 pixels on the left to 400 pixels (500 pixels) in 10 seconds, its speed is 50 pixels/s. For user control a button and JavaScript are used: classList.toggle adds or removes a class on the stage, and CSS gives animation-play-state: paused depending on that class. The finished work must be tested: open it in another browser and at phone size, check that the animation does not stop by itself and that the text is readable; if there is a mistake, look at the messages in the console of the browser's developer tools (F12). When the work is done, keep a copy of the code, and do not use other people's pictures or sounds without permission.
Worked examples
A sun-and-cloud scene: <!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> When the button is clicked the class “toxta” is added to the stage and both animations pause; clicked again, they resume.
Speeds: the cloud covers 400 – (–100) = 500 pixels in 10 seconds, a speed of 500:10 = 50 pixels/s; the sun rises from 100 to 10, that is 90 pixels up, in 6 seconds, an average speed of 90:6 = 15 pixels/s (because of ease-in-out this is the average). In 30 seconds the cloud crosses 30:10 = 3 times.
Class activity
“Studio”: groups of three (director, coder, tester) make a scene with 3 objects – for example day and night, a car and a cloud; then they swap roles, test each other's work and write a list of mistakes.
Practice
1
Write in order the main stages of preparing an animated scene.
Planning (storyboard) → stage and objects → animation code → control button → testing → saving.
2
An object moves 600 pixels uniformly in 12 seconds. What is its speed in pixels per second?
50
3
An animation does not run on the page. Which checks do you make? (at least three)
Is the @keyframes name the same as the name in the animation property; does the element have a position and size; is there no error in the code (F12 console); is “reduce motion” not switched on in the browser.
4
Why should a finished scene also be tested at phone size?
A fixed-width stage may not fit or may be cut off on a small screen; many users visit from phones.