Lessons 22 · 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
22
Animations on web pages and how to add them
Textbook: pp. 81–83
GoalExplains the principle of animation (frame, keyframe, in-between frames, frame rate), calculates the number of frames and creates a simple motion animation with CSS while following safety requirements.
New words
frame: one still picture of an animation · kadrkeyframe: a frame where the author sets the object's position or shape · kalit kadr (keyframe)tween: the in-between frames that the program calculates between two keyframes · tween (oraliq kadrlar)frame rate (fps): the number of frames shown per second · kadr tezligi (fps)
Explanation
Animation is the quick replacement of a sequence of pictures (frames) that differ only slightly: the eye takes such frames as continuous movement. The number of frames shown in one second is the frame rate (fps): usually 24 for cinema and 30 or 60 for screens and games; so the total number of frames = fps · seconds. In animation tools the work is done on a timeline: layers separate the parts of the picture and frames are placed along time. The author sets only the keyframes (for example the first and last position), and the program calculates the in-between frames; this is called tweening: a motion tween changes the position of an object gradually and a shape tween changes its shape; Macromedia Flash added a Motion Guide layer for paths. In today's web pages the same idea is done in CSS: the @keyframes rule gives the key states and the animation property gives the duration, repeats and speed function; for complex cases JavaScript, SVG, or video, GIF and WebP animations are used. Safety: images flashing more than 3 times a second may trigger seizures in some people, so never make a rapidly flashing light effect; many users ask for less motion, which is respected with the prefers-reduced-motion rule.
Worked examples
A moving ball (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> The ball moves 360 pixels from left to right in 3 seconds (speed 360:3 = 120 pixels/s) and, because of alternate, comes back; at 1.5 seconds left = 360:2 = 180 pixels. If the user asks for less motion, the animation is switched off.
A frame calculation: 5 seconds of an animation at 12 fps is 12·5 = 60 frames. If frames 1 and 24 are keyframes, there are 22 in-between frames (frames 2–23). If an object is at x = 0 in frame 1 and x = 230 in frame 24, it moves 10 pixels per frame: in frame 11, x = (11 – 1)·10 = 100.
Class activity
“Flip-book animation”: a “bouncing ball” of 12 frames is drawn on the edge of a notebook and flipped to show it; the author marks the keyframes and a partner draws the in-between frames.
Practice
1
What is the difference between a keyframe and in-between frames (tween)?
The author sets a keyframe; the program calculates the in-between frames between them.
2
How many frames are in 5 seconds of a 24 fps animation?
120
3
At frame 1 x = 20, at frame 21 x = 220 and the motion is uniform. What is x at frame 11?
120
4
Why should rapidly flashing images not be put on a web page?
Flashing more than 3 times a second can trigger seizures in some people.