The Art of Animation. Animation principles

ow that we've discussed the effects of motion on different visual aspects of the moving object, let's concentrate on the motion proper and try to figure out what constitutes an engaging but not annoying computer animation. We'll do this by listing a number general principles rather than describing particular tricks or techniques.

The first thing you should bear in mind is that, common as it is, animated graphics on the essentially static Web is still a very strong means on emphasis. As such, it must be used very reservedly so as to avoid annoying or overwhelming the user. For many designers, especially beginners, playing with animation is a lot of fun, but not always they manage to make it equally enjoyable for their viewers. Even if your goal is to dazzle your visitors by an intensive, high quality animated presentation (such as the olympic.org web site) - and if you possess sufficient design skills for such undertaking - remember to leave enough static keystones, i.e. objects of consistent position and appearance that will help your users to navigate through the site and get the message you want to deliver.

Another, much more specific and much less obvious principle is: Follow the natural inherent motions for any objects you animate. In part, this is similar to the "learning from physical world" principle discussed earlier. However, natural motion is a bit more abstract concept; it's not as simple as apples always dropping down, and balloons, always ascending. Finding an engaging natural motion for an object may involve analyzing many of its aspects, including its inherent static dynamism, architectonics, common patterns of perception, etc.

Thus, the text fragment in Fig. 1 moves horizontally exactly because we read it in that direction, which is therefore natural for such an element. (Note, however, that left-to-right is not always the most natural direction for textual objects.) Animation teasers used in my two previous columns (Fig.3) present a more sophisticated example. For Beziers, it is natural to "dance" with their endpoints fixed and the curvature range more or less constant; a superposition of three such dancing lines, with shifted phases, makes for an interesting animation sequence. For circles, one of the most natural "modes of operation" is blowing up (enlarging) and imploding back into a central point; combined with the push and pull forces applied to a horizontal line, they result in a simple yet neat movie making a good use of all of the available space.