Attributes

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

These attributes define the general behaviour of the animation while the actions-attribute define what happens.

NameTypeDefaultDescriptionValues
durationFloat0Duration in seconds of the animation from start to end
delayFloat0Delay in seconds before animation starts
repeatFloat0-1 means infinite, 0 no repeat, > 0 the number of repeats-1, 1, 2, etc
repeatDelayFloat0Delay in seconds before next repetition0, 1, 1.5, 2, etc
repeatOffsetFloat0The offset (value between 0 to 1) to repeat from
actionsArray[]Actions the animation has to follow (see further)
stopMethodStringfadeThe way the animation behaves when it is stopped'fade', 'reverse', 'forward', 'immediate', 'onetotwo'
stopDurationFloat0Duration in seconds of stopping
stopDelayFloat0Delay in seconds before stopping
autostopBooleanfalseAfter the animation is finished, it is automatically stoppedtrue, false

Stop method onetotwo is a special stop method, the action ranges are defined from progress 0 to 2 instead of 0 to 1. When stopping, the current animation is continued normally (up to progress 1), and then the progress is continued up to value 2.

Live demo

Press right to start the animation and press left to stop the animation and reverse it.


class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{
                x: 50, y: 50, src: '/Lightning/img/LngDocs_LilLightningFlying.png'
            }
        }
    }
        
    _init(){
        this._lilLightningAnimation = this.tag('LilLightning').animation({
            duration: 2,
            delay: 1,
            repeat: 3,
            repeatDelay: 0,
            repeatOffset: 0,
            stopMethod: 'reverse',
            stopDuration: 1,
            stopDelay: 0.2,
            autostop: false,
            actions:[
                {p: 'x', v: {0: 50, 0.25: 250, 0.5: 250, 0.75: 500, 1: 50 }},
                {p: 'y', v: {0: 50, 0.25: 250, 0.5: 500, 0.75: 500, 1: 50 }}
            ]
        }); 
    }
    
    _handleLeft(){
        this._lilLightningAnimation.stop();
    }
    
    _handleRight(){
        this._lilLightningAnimation.start();
    }
    
}

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