This JavaScript library is aimed to work in conjunction with the animaker package for R. For more information about the animaker package, a technical report describes it.

Note: Underscore is a required dependency.

It has three main responsibilities:

• Import timing information and assign a unit to exported times.
• Register actions to atomic animations (using JavaScript functions).
• Play an animation sequence.

To begin, we assume a JavaScript variable holds the relevant timing information necessary for TimingManager to work. In our example, this will be called timingData. We will first instantiate a new TimingManager instance.

var tm = new TimingManager(timingData, "s");

The first parameter is simply passing in the data, but the second is specifying that the exported data refers to time in seconds. Currently valid values are ms, s and m. The second parameter is optional, by default it is ms.

When creating an animation sequence and timing information in R with animaker, we were not particularly concerned with the actions that an animation is supposed to take. We will now assign an action to atomic animation labelled "Alpha":

// Creating a simple action function
var alphaAction = function(info) {
    console.log("Alpha was called at " info.start + "s");
};

// Registering the action to the 'Alpha' atomic animation
tm.register({
    Alpha: alphaAction
});

Although this does not represent an animation (see D3), merely a simple logging function, the JavaScript function could do anything we like. In this case all the function does is print out its name and when it was called (in seconds).

Now that we have an action registered to our animation "Alpha", we can play it.

tm.play()

This simply plays the animation sequence, and if we observe the browser's console, we can see messages being printed out. This occurs once each time the atomic animation is called.

In cases where we cannot use a library like D3 to perform animations for us, we may need to use a frame-based approach to animation. In this case we need to draw at regular intervals in time. Using HTML, a typical use case for this would be to create animations using the <canvas> element.

To perform a frame-based animation, we will use the frameApply method.

tm.frameApply(10);

The parameter that has been given here is the number of frames per second that the animation sequence is going to draw at. When we encounter the "Alpha" animation, the same animation function will be run 10 times for each second of its duration.

After calling the frameApply method, we should observe a lot more messages in the console than we get with the play method. The reason for this is because it is now being called every frame, rather than once for the atomic animation.