Animations can be used to describe a fixed change of property values over time.
Defining an animation
Animations must be attached to a View (the subject of the animation). An example of creating an animation:
const myAnimation = this.tag('MyAnimationObject').animation({
duration: 1, //duration of 1 second
repeat: 0, //Plays only once
stopMethod: 'immediate', //Stops the animation immediately
actions: [
{p: 'alpha', v: {0: 0, 1: 1}},
{p: 'y', v: {0: 0, 0.25: 50, 0.75: -50, 1: 0}}
]
});
Starting an animation
A previously created animation can be started using the start method.
myAnimation.start();
Live demo
class BasicUsageExample extends lng.Application {
static _template() {
return {
LilLightning:{
x: 275, y: 275, src: '/Lightning/img/LngDocs_LilLightningFlying.png'
}
}
}
_init(){
this._lilLightningAnimation = this.tag('LilLightning').animation({
duration: 6,
repeat: -1,
stopMethod: 'immediate',
actions:[
{p: 'scaleX', v: { 0: {v: 1, s: 1}, 0.5: {v: -1, s: 1}, 1: {v: 1, s: 1}}},
{p: 'x', v: {0: 50, 0.25: 250, 0.5: 500, 0.75: 450, 1: 50}},
{p: 'y', v: {0: 50, 0.25: 250, 0.5: 50, 0.75: 100, 1: 50 }}
]
});
this._lilLightningAnimation.start();
}
}
const app = new BasicUsageExample({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());