Actions

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

Actions define what happens during the animation to the specified views and properties.

Attributes

NameTypeDefaultDescriptionValues
tstringnoneTag selector (see View.tag function) on which the animation has to be appliedSomeTag,SomeTag.SomeSubTag
ppropertynoneObject property you wish to animatex, y, w, h, alpha, rotation, scale, texture.x, shader.someProp
vobject{}Time-value function definitionSee description
rv*noneAfter stopping, the defined value (v) at progress 0 is used. If another value is desired, rv can be used

Value function

The v attribute defines the progress-to-value function: over time.

Live demo

Below an example of some various actions that can be set to the animation property. Like changing the src, x and y position, and scale.


class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            LilLightning:{
                x: 50, y: 250, src: '/Lightning/img/LngDocs_LilLightningIdle.png'
            }
        }
    }
        
    _init(){
        const lilLightningFlying = this.tag('LilLightning').animation({
            duration: 4, repeat: -1, stopMethod: 'immediate',
            actions: [
                { p: 'src', v: { 0: '/Lightning/img/LngDocs_LilLightningIdle.png', 0.2:  '/Lightning/img/LngDocs_LilLightningRun.png', 0.6:  '/Lightning/img/LngDocs_LilLightningFlying.png'} },
                { p: 'x', v: { 0: {v: 50, se: 0}, 0.2: {v: 50, s: 0}, 0.6: {v: 250, s: 0}, 1: 700 } },
                { p: 'y', v: { 0: {v: 250, se: 0}, 0.2: {v: 250, s: 0}, 0.6: {v: 250, s: 0}, 1: -150 } },
                { p: 'scale', v: { 0: {v: 1, se: 0}, 0.2: {v: 1, s: 0}, 0.6: {v: 1, s: 0}, 1: 0.2 } }
            ]
        });
        lilLightningFlying.start();
    }
}

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