Module 9: Interactive Animation


What is animation?

We ordinarily associate “animation” with TV or movie cartoons. The word actually means to breathe the life into something. Cartoon animation involves the illusion of a moving image created by the consecutive display of series of static images. While there are different types of animation (for example, cell animation, claymation, and stop-motion), our focus in this module is computer (digital) animation. Computer animation works pretty much like cartoons or the other types of animations, by "flashing" a series of still images rapidly to create the illusion of motion. You'll find computer animation in computer games, educational programs, movies, and elsewhere.

What is interactivity?

This is a little more difficult, as people define interactivity in many different ways.

This tutorial focuses on human-computer interactions. We can think of “interactivity” as a dialog between user and computer. The user manipulates an input device such as a mouse or keyboard, which activates a computer application. The computer application responds to that action in the form of visual and/or aural output. In interactive learning environments, learners actively participate in learning tasks and receive immediate response or feedback. Appropriately designed, this can lead to greater interest, motivation, and accomplishment of learning outcomes (Sims, 1999).

What are the differences between regular and interactive animation?

Computer animation may be categorized as regular (continuous) animations and interactive animations. The differences between regular animation and interactive animations are:

Comparison of regular and interactive animation
Regular Animation Interactive Animation
Does not allow users to pause, stop, or rewind. User can start, pause, stop, or rewind.
Does not allow users to participate. Users watch the same scenario continuously. Users actively engage in the animation. They can select, move, or drag an object by using keyboard or mouse.
Does not provide feedback. Provides immediate feedback.

Examples of regular animation:

Examples of interactive animation:

Why use interactivity?

In regular animation, users view but don't control the animation. Adding interactivity to this type of animation may help engage learners and enhance learning (

Jones and Scaife (2002) compare static and animated diagrams to demonstrate dynamic processes and their influence on cognitive interactions. They concluded that animated diagrams are more effective than static ones because learners show greater confidence and attention while working with animations. Nevertheless, learners did not respond clearly and completely to specific questions about the animations. The learners reported that animations were too fast, too complex, and lack user control. The researchers suggest that when animation presents complex information, let learners control the pace, repetition, and feedback.

Students often have difficulty understanding complex scenarios presented with video or still diagrams. Video can sometimes be more expensive to shoot or require large amounts of storage. In some cases, interactive animation can be used to present complex ideas more economically and with greater effectiveness. For instance, learners with little experience of hip surgery may have difficulty understanding it by reading a book or watching a video. However, interactive animation may help them grasp the basics:

What are the advantages of interactive animations in education?

Why is the cognitive process important in interactivity?

Probably the most important thing to remember about interactivity is that it is cognitive interaction that results in improved learning. To the extent that physical interaction (clicking, dragging, and the like) fosters cognitive activity (remembering, selecting, organizing, and integrating), it may enhance learning.

Think of interactivity as the interaction between inside (cognitive structures) and outside (physical, interface) representations.

Here is an example of an interactive animation designed to stimulate cognitive interactivity: (This is part of an experiment with 8 different treatments (versions) involving varying degrees of interactivity and feedback. The version you see here is the "full" version with all the interactivity and feedback.)

Here are two more examples: