Auto Draft

3
(2)
Created on September 03, 2019, Last modified on June 08, 2021

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());

Give feedback

Rating - 3 / 5. . Reviews - 2

No votes so far! Be the first to rate this post.

Go To Top