Animations

Published: September 03, 2019
Edited: October 18, 2019

Animations can be used to describe a fixed change of property values over time.

Defining an animation

Animations must be attached to a View (the subject of the animation). An example of creating an animation:

const myAnimation = this.tag('MyAnimationObject').animation({
    duration: 1,                //duration of 1 second
    repeat: 0,                  //Plays only once
    stopMethod: 'immediate',    //Stops the animation immediately
    actions: [
        {p: 'alpha', v: {0: 0, 1: 1}},
        {p: 'y', v: {0: 0, 0.25: 50, 0.75: -50, 1: 0}}
    ]
});

Starting an animation

A previously created animation can be started using the start method.

myAnimation.start();

Live demo


class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{
                x: 275, y: 275, src: '/Lightning/img/LngDocs_LilLightningFlying.png'
            }
        }
    }
        
    _init(){
        this._lilLightningAnimation = this.tag('LilLightning').animation({
            duration: 6,
            repeat: -1,
            stopMethod: 'immediate',
            actions:[
                {p: 'scaleX', v: { 0: {v: 1, s: 1}, 0.5: {v: -1, s: 1}, 1: {v: 1, s: 1}}},
                {p: 'x', v: {0: 50, 0.25: 250, 0.5: 500, 0.75: 450, 1: 50}},
                {p: 'y', v: {0: 50, 0.25: 250, 0.5: 50, 0.75: 100, 1: 50 }}
            ]
        });
        this._lilLightningAnimation.start();
    }
}

const app = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());