Methods

Published: September 03, 2019
Edited: November 06, 2020

The transition methods can be used to get control over transitions. Like starting, stopping or resetting the transition.

Calling methods of transitions

static _template(){
    return {
        MyObject:{ 
            x: 50, y: 50, w: 100, h: 100, rect: true,
            transitions:{ 'x': { duration: 5 } }
        }
    }
}

In order to call a transition method you have to get the correct transition property first, with .transition(<property>). The following will call the start() method of the x transition.

_init(){
   this.tag('MyObject').transition('x').start();
}

Methods

NameDescription
start()Starts (or restarts if already running) the animation
stop()Stops the animation (at the current value)
pause()Alias for stop()
play()Resumes the paused transition after having stopped it
finish()Fast-forwards the animation (to the target value)
start(targetValue : number)Starts a new transition (similar to calling setSmooth())
reset(targetValue : number, p : number)Sets the transition at a specific point in time (p between 0 and 1)
updateTargetValue(targetValue : number)Updates the target value while keeping the current progress and current value

Live demo

Below an example of the various methods that can be called upon during the transitions. Press left or right to swap between the transitions.

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Description:{ x: 50, y: 28, text:{ text: 'Press left or right to swap transitions.', fontSize: 22, wordWrap: true, wordWrapWidth: 450, lineHeight: 30 }},
            LilLightning:{ x: 50, y: 100, src: '/Lightning/img/LngDocs_LilLightningRun.png', transitions:{'x': {duration: 5}}}
        }
    }
    
    _init(){
       this._index = 0;
       this._animationTypes = ['start','stop','pause','play','finish','startTargetValue','resetTargetValue','updateTargetValue'];
       this._myTransition = this.tag('LilLightning').transition('x');
    }
    
    _handleLeft(){
        if(this._index > 0){
            this._index --;
            this.setTransitionMethod(this._animationTypes[this._index]);
        }
        console.log('left', this._animationTypes[this._index]);
    }
    
    _handleRight(){
        if(this._index < this._animationTypes.length -1){
           this._index ++;
           this.setTransitionMethod(this._animationTypes[this._index]);
        }
    }
    
    setDescription(v){
        this.tag('Description').patch({text:{ text: `Current Method(): ${v}`}});
    }
    
    //Set transition type
    setTransitionMethod(v){
        this.setDescription(v);
        switch(v){
            case 'start':
                if(this.tag('LilLightning').x >= 500){
                    this._myTransition.start(50);
                }else{
                    this._myTransition.start(500);
                }
            break;
            case 'stop':
                this._myTransition.stop();
            break;
            case 'pause':
                this._myTransition.pause();
            break;
            case 'play':
                this._myTransition.play();
            break;
            case 'finish':
                this._myTransition.finish();
            break;
            case 'startTargetValue':
                this._myTransition.start(50);
            break;
            case 'resetTargetValue':
                this._myTransition.reset(50, 1);
            break;
            case 'updateTargetValue':
                this._myTransition.updateTargetValue(250);
            break;
        }
    }
       
}

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

PHP Code Snippets Powered By : XYZScripts.com