Events

Published: September 03, 2019
Edited: September 03, 2019

An animation is an EventEmitter that may emit the following events:

NameDescription
startAnimation starts
delayEndDelay has ended
progressAnimation has progressed (args: the progress between 0 and 1 (or 0 and 2 in case of stopMethod onetotwo)
repeatAnimation repeats (args: number of repeats)
pauseAnimation is paused
resumePaused animation is resumed
finishAnimation has finished
stopAnimation is stopped
stopDelayEndStop delay has ended
stopContinuePaused animation that was stopping is resumed
stopFinishAnimation finished stopping

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Progress: {
                x: 50, y: 50, text: {fontSize: 32}
            },
            LilLightning:{
                x: 0, y: 200, src: '/Lightning/img/LngDocs_LilLightningIdle.png'
            }
        }
    }
        
    _init(){
        const lilLightningAnimation = this.tag('LilLightning').animation({
            duration: 2, 
            repeat: -1, 
            repeatDelay: 0.5, 
            actions: [
                { p: 'x', v: { 0: 100, 0.5: 450, 1: 100 } }
            ]
        });
        lilLightningAnimation.on('progress', (p)=>{
            this.tag("Progress").text = "Progress: " + p;
        });
        lilLightningAnimation.start();
    }
}

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