Methods

Published: September 03, 2019
Edited: September 03, 2019
NameDescription
start()Starts (or restarts if already running) the animation
play()If playing (or stopped) then start. If paused, continue. If playing or finished, ignored
pause()If playing, then stop at the current position (can be resumed by calling play)
replay()Same as play, but if currently finished, then restart
skipDelay()If currently waiting for the (stop) delay, skip it and continue
finish()If currently playing, fast-forwards the animation to the end. If stopping, fast forward it to the end of the stop animation
stop()Stops the animation (effect depends on the stopMethod and properties)
stopNow()Stops the animation immediately (as if stopMethod 'immediate' was set)
isPaused() : BooleanReturns true iff the current state is paused
isPlaying() : BooleanReturns true iff the current state is playing
isStopping() : BooleanReturns true iff the current state is stopping
isActive() : BooleanReturns true iff currently progressing (playing or stopping)
progress(dt : Float)Manually progress the animation forward by dt seconds

States

It is convenient to understand that an animation can be in any of the following states:

Name
idle
playing
stopping
stopped
finished
paused

Live demo


class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            CommandText:{ x: 50, y: 28, text:{ text: '', fontSize: 22 }},
            LilLightning:{
                x: 250, y: 200, src: '/Lightning/img/LngDocs_LilLightningIdle.png'
            }
        }
    }
        
    set commandText(v){
        this.tag('CommandText').patch({ text:{text: `Animation Command: ${v}`} });
    }
        
    _init(){
        this._myAnimation = this.tag('LilLightning').animation({
            duration: 3, repeat: -1, stopMethod: 'immediate',
            actions: [{ p: 'y', v: { 0: { v: 450, sm: 0 }, 0.5: { v: 100, sm: 1 }, 1: { v: 450, sm: 0 } } }]
        });
        this._myAnimation.start();
        this.commandText = 'start';
    }
    
    _handleLeft(){
        this._myAnimation.start();
        this.commandText = 'start';
    }
    
    _handleRight(){
        this._myAnimation.stop();
        this.commandText = 'stop';
    }
    
    _handleUp(){
        this._myAnimation.pause();
        this.commandText = 'pause';
    }
    
    _handleDown(){
        this._myAnimation.play();
        this.commandText = 'play';
    }
}

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