Auto Draft

3
(2)
Created on September 03, 2019, Last modified on June 08, 2021

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());

Give feedback

Rating - 3 / 5. . Reviews - 2

No votes so far! Be the first to rate this post.

Go To Top