The Opera Animation library

By Opera Software

The goal of this tutorial is to take you through creating animations using the Opera Animation library. The tutorial requires a basic understanding of JavaScript and CSS.

Including the Animation library

To enable animations in your widgets, copy the animation.js file to your widget's project folder, and include the script in your widget's main document. The animation library can be downloaded here.

<script type="text/javascript" src="animation.js"></script>

Creating an animation using createAnimation()

After the animation library is included, every element in the DOM will have a createAnimation() method available, that is used to create an animation on that element. When invoked, the createAnimation() method returns an Animation object that can later be referenced:

// Get an element
var myElement = document.getElementById( 'myAnimatableElement' );
// Create an animation for 'myElement' and assign the animation to myAnimation
var myAnimation = myElement.createAnimation();

We now have an Animation object available in the variable myAnimation that we can create our animation effects on.

Using addAnimation()

Animation object have a method called addAnimation() used to add an actual animation to our animation object. We can add as many animations as we wish to any object. Each animation consists of a CSS property we wish to change, and a source and destination value. This makes the function prototype for addAnimation() as follows:

@addAnimation( <String> CSS property, <String> from, <String> to)

Going back to our animation named myAnimation, we wish to add the following effects:

  1. We wish to resize the "myAnimatableElement" element width from 0 to 200 pixels.
  2. We wish to resize the "myAnimatableElement" element height from 0 to 200 pixels.
  3. We wish to change it's opacity from 0.0 to 1.0.

We will need to add three animations to myAnimation, one for each property we wish to change:

// Changing the width ...
myAnimation.addAnimation( 'width', '0px', '200px' );
// ... and the height ...
myAnimation.addAnimation( 'height', '0px', '200px' );
// ... and also the opacity ...
myAnimation.addAnimation( 'opacity', '0.0', '1.0' );

The properties we have added to myAnimation will, when they are run, be executed synchronously: Each of our new animation properties start at the same time, and end at the same time when the animation is run.

There is no limit to the number of animation effects we can add to any given animation, but keep in mind that adding too many effects may have an impact on animation performance.

Running the animation using run()

When we have added all of the properties we want to our animation, we can run them using the run() method. This method takes no arguments, and simply executes the animation directly.

View the sample animation.

Adjusting animation speed

Adjusting the overall speed of the animation is done by changing the Animation object's speed property. Setting this to lower values makes the animation run slower

// Slow down animation by setting speed to 3;
myAnimation.speed = 3;

The default value of the speed property is 6.

Animation acceleration profiles

Our first, simple example showed a very simple animation, we shall now proceed with modifying how the animation speeds up and/or slows down during the period of animation.

By default, animations move at a constant interval, but this can be changed by assigning a function to the accelerationProfile attribute on an Animation object. An Animation object has four predefined such acceleration profiles that can be set for the animation.

Sine acceleration profile

This profile gradually speeds the animation up at the start of the animation, and slows it down again when nearing the end. The name of the method is sine, and is set like this, on myAnimation:

myAnimation.accelerationProfile = myAnimation.sine;

"accelerate" acceleration profile

Another pre-made acceleration profile, is to have the animation start slowly, to gradually increase speed as it nears the end of the animation:

myAnimation.accelerationProfile = myAnimation.accelerate;

"decelerate" acceleration profile

This effect is the exact opposite of "accelerate" the animation will start by being quick, and then become gradually slower.

myAnimation.accelerationProfile = myAnimation.decelerate;

Custom acceleration profiles

If the pre-provided acceleration profiles don't suit you, you can easily use your own, as the accelerationProfile is a function pointer you can assign your own function to. In the following example, myAnimation will run through 1/4 of the animation, and then have it's speed set to a constant value.

myAnimation.accelerationProfile=function(x){
    var speed_constant = 1/25;
    if (x<25){
      return speed_constant+x/25;
    } else {
      return speed_constant+1;
    }
  };

In this example we see this custom animation compared to the predefined profiles sine and constant.

Callbacks

Animations using the Animation class has support for two types of callbacks: Callbacks that are executed before the animation runs, and callbacks that are executed after the animation has finished.

onstart callback

The onstart callback is executed right before the animation is run, and can for instance be used to synchronise two animations. The callback is added as a function reference.

// Sync the start of 'mySecondAnimation' to the start of 'myAnimation'
myAnimation.onstart = function(){
  mySecondAnimation.run();
}

Note that because of variable scope, we cannot simply do the following, but instead use the syntax as described above:

myAnimation.onstart = mySecondAnimation.run;

onfinish callback

The onfinish callback is executed when an animation has finished. An example use of this is to synchronise the start of another animation to the end of another. The usage is similar to the onstart callback:

// Sync the start of 'mySecondAnimation' to the end of 'myAnimation'
myAnimation.onfinish = function(){
  mySecondAnimation.run();
}

Animation Events

When animations starts, finishes, or are interrupted (stopped), events will be raised that you, as a widget user can optionally choose to listen to.

The OAnimationStart event

In the same way the onstart callback is executed when the run() method is invoked on an animation, the OAnimationStart event is raised when the run() method is invoked:

// execute some code when an animation is executed
myAnimation.addEventListener('OAnimationStart',function(ev){
  // run some code when the animation is started
},false);

The OAnimationFinish event

In the same way the onfinish callback is executed when the animation has finished executing, the OAnimationDone event is raised when an animation is finished.

// execute some code when an animation is finished
myAnimation.addEventListener('OAnimationFinish',function(ev){
  // run some code when the animation has finished
},false);

The OAnimationStop event

If an animation is interrupted before it has completely finished, the event OAnimationStop event will be raised.

// execute some code if an animation is interrupted
myAnimation.addEventListener('OAnimationStop',function(ev){
  // run some code when the animation is interrupted
},false);

The OAnimationFrame event

The OAnimationFrame event is raised whenever a single frame in an animation has finished rendering.

// execute some code for each frame in an animation
myAnimation.addEventListener('OAnimationFrame',function(ev){
  // run some code for the current frame
},false);

Events example: Measuring FPS

This example demonstrates how we can use the OAnimationStart and OAnimationFrame events to build an FPS meter into one of our animations.

This article is licensed under a Creative Commons Attribution, Non Commercial - No Derivs 2.5 license.

Comments

The forum archive of this article is still available on My Opera.

No new comments accepted.