Improving animations

Summary

Animations… Everybody loves animations. They make your desktop look more eye candy, and they also help with guiding or drawing the user’s attention towards certain elements on the screen, for example a new window or a popup or a button, etc. An animation is a just quick series of images to simulate the movement of an object on the screen. For example, consider a basic animation that only lists digits A digits animation. Animation frames. As you can see, it’s just a sequence of individual digit images that are presented quick enough. The animation frames have to presented at a steady pace to maintain the smooth feeling. If one or two frames are late, a frame drop can occur, which the user will likely notice. There are various reasons why a frame may not be presented on time. One reason might be that the app has been busy doing something else, for example loading a big file from the disk. However, there can also be reasons that are not exactly under the direct influence of the app, for example the operating system scheduler may prioritize scheduling other tasks or perhaps the memory scheduler has decided that it needs to do some of its things, etc. An animation with a frame drop may look as follows Frames 4, 5, and 6 have been dropped. If a frame cannot be painted on time, we are in a sticky situation no matter how you look at it. The animation won’t look as smooth as it could. That being said, it is also worth mentioning how some apps (and compositors) drive animations. A lot of them advance animations simply by the amount of time that has passed since the last frame. In pseudo-code, it looks as follows: const milliseconds target = next_presentation_timestamp(); const milliseconds delta = target - previous_repaint_time; previous_repaint_time = target; advance_animations_by(delta); The biggest drawback of this approach is that it can introduce discontinuities to the motion of an object. For example Frame drop analysis. If the app becomes busy for about 48 milliseconds...