Actions define what happens during the animation to the specified views and properties.
Attributes
| Name | Type | Default | Description | Values |
|---|---|---|---|---|
t | string | none | Tag selector (see View.tag function) on which the animation has to be applied | SomeTag,SomeTag.SomeSubTag |
p | property | none | Object property you wish to animate | x, y, w, h, alpha, rotation, scale, texture.x, shader.someProp |
v | object | {} | Time-value function definition | See description |
rv | * | none | After 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());