Events

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

A transition is an EventEmitter that may emit in the following events:

NameDescription
startTransition starts
delayEndDelay has ended
progressTransition has progressed (args: the progress between 0 and 1)
finishTransition has finished
stopTransition is stopped using the stop method

Live demo

Press left, right, up or down to move LilLightning, and see how the text is changing when the start and finish events are triggered after completion of each transition.

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning: {
                x: 300, y: 300, src: '/Lightning/img/LngDocs_LilLightningFlying.png',
                transitions: {x: {duration: 1}, y: {duration: 1, timingFunction: 'linear'}}
            },
            Message: {
                x: 50, y: 50, text: {fontSize: 32}
            }
        };
    }

    _handleLeft(){
        const subject = this.tag("LilLightning");
        const targetX = subject.getSmooth('x') - 100;
        subject.setSmooth('x', targetX);
    }

    _handleRight(){
        const subject = this.tag("LilLightning");
        const targetX = subject.getSmooth('x') + 100;
        subject.setSmooth('x', targetX);
    }

    _handleUp(){
        const subject = this.tag("LilLightning");
        const targetY = subject.getSmooth('y') - 100;
        subject.setSmooth('y', targetY);
    }

    _handleDown(){
        const subject = this.tag("LilLightning");
        const targetY = subject.getSmooth('y') + 100;
        subject.setSmooth('y', targetY);
    }

    _init(){
        this.tag("LilLightning").transition('x').on('start', () => {
            this.tag("Message").text.text = "Started X transition to " + this.tag("LilLightning").getSmooth('x');
        });
        this.tag("LilLightning").transition('x').on('finish', () => {
            this.tag("Message").text.text = "Finished X transition";
        });
        this.tag("LilLightning").transition('y').on('start', () => {
            this.tag("Message").text.text = "Started Y transition to " + this.tag("LilLightning").getSmooth('y');
        });
        this.tag("LilLightning").transition('y').on('finish', () => {
            this.tag("Message").text.text = "Finished Y transition";
        });
    }

}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, clearColor: 0x00000000, canvas2d: false, useImageWorker: false}, debug: true}
options.keys = {
    38: "Up",
    40: "Down",
    37: "Left",
    39: "Right",
    13: "Enter",
    9: "Back",
    8: "Back",
    93: "Back",
    174: "Back",
    175: "Menu",
    83: "Search"
};
const app = new BasicUsageExample(options);
document.body.appendChild(app.stage.getCanvas());