Home Reference Source
import Animation from 'canvas-gauges/lib/Animation.js'
public class | source

Animation

Animation engine API for JavaScript-based animations. This is simply an animation core framework which simplifies creation of various animations for generic purposes.

Example:

// create 'linear' animation engine, 500ms duration
let linear = new Animation('linear', 500);

// create 'elastic' animation engine
let elastic = new Animation('elastic');

// define animation behavior
let bounced = new Animation('bounce', 500, percent => {
    let value = parseInt(percent * 100, 10);

    $('div.bounced').css({
        width: value + '%',
        height: value + '%'
    });
});

// execute animation
bounced.animate();

// execute animation and handle when its finished
bounced.animate(null, () => {
   console.log('Animation finished!');
});

Constructor Summary

Public Constructor
public

Member Summary

Public Members
public

Callback function for the animation step draw event.

public

Overall animation duration in milliseconds.

public

Callback for the animation complete event.

public

frame: *

public

Animation rule.

Method Summary

Public Methods
public

Performs animation calling each animation step draw callback and end callback at the end of animation.

public

cancel()

Cancels current animation if any

public

Destroys this object properly

Public Constructors

public constructor(rule: string | AnimationRule, duration: number, draw: DrawEventCallback, end: EndEventCallback) source

Params:

NameTypeAttributeDescription
rule string | AnimationRule
duration number
draw DrawEventCallback
  • optional
end EndEventCallback
  • optional

Public Members

public draw: DrawEventCallback source

Callback function for the animation step draw event.

public duration: number source

Overall animation duration in milliseconds. By default is equal to 250 ms.

public end: EndEventCallback source

Callback for the animation complete event.

public frame: * source

public rule: string | AnimationRule source

Animation rule. By default is linear animation. Animation rule is a subject to animation rules, which are a simple object containing math-based methods for calculating animation steps.

Public Methods

public animate(draw: DrawEventCallback, end: EndEventCallback) source

Performs animation calling each animation step draw callback and end callback at the end of animation. Callbacks are optional to this method call. If them are not bypassed will be used that ones which was pre-set on constructing an Animation object or pre-set after construction.

Params:

NameTypeAttributeDescription
draw DrawEventCallback
  • optional
end EndEventCallback
  • optional

Example:

function draw(percent) {
    $('.my-animated-divs').css({
        width: parseInt(percent * 100, 10) + '%'
    });
}
function done() {
    console.log('Animation complete!');
}

// Define 'draw' and 'end' callbacks on construction
var animation = new Animation('cycle', 500, draw, done);
animation.animate();

// Define 'draw' and 'end' callbacks after construction
var animation = new Animation('cycle', 500);
animation.draw = draw;
animation.end = done;
animation.animate();

// Define 'draw' and 'end' callbacks at animation
var animation = new Animation('cycle', 500);
animation.animate(draw, done);

public cancel() source

Cancels current animation if any

public destroy() source

Destroys this object properly