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	constructor(rule: string \| AnimationRule, duration: number, draw: DrawEventCallback, end: EndEventCallback)

Member Summary

Public Members
public	draw: DrawEventCallback Callback function for the animation step draw event.
public	duration: number Overall animation duration in milliseconds.
public	end: EndEventCallback Callback for the animation complete event.
public	frame: number Current requested animation frame identifier
public	rule: string \| AnimationRule Animation rule.

Method Summary

Public Methods
public	animate(draw: DrawEventCallback, end: EndEventCallback) Performs animation calling each animation step draw callback and end callback at the end of animation.
public	destroy() Destroys this object properly

Public Constructors

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

Params:

Name	Type	Attribute	Description
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: number source

Current requested animation frame identifier

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:

Name	Type	Attribute	Description
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 destroy() source

Destroys this object properly