Auto Draft

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

It's also possible to specify, for each control point, how the value curve should behave around it. For example, this produces a 'bouncing ball' effect:

{ p: 'y', 
    v: { 
        0: { v: -100, sm: 1, s:0 }, 
        0.33 : { v: 0, sm: 0.1, s: 0}, 
        0.67 : {v: -40, sm: 1, s: 0},
        1: { v: 0, sm: 0.1 } 
    }
}
NameTypeDefaultDescriptionValues
vFloat0ValueExact value at control point
smFloat0.5SmoothnessSmoothness of the curve around the point
sFloat0SlopeThe slope (value per progress unit, 0 means flat, positive means 'curving upwards', negative means 'curving downwards' )
smeFloat0.5Smooth endOutgoing curve smoothness, if different from (incoming) smoothness (sm)
seFloat0Slope endOutgoing curve sloop, if different from (incoming) slope (s)

Live demo

class BasicUsageExample extends lng.Application {
    static _template() {
        return {
            Wrapper: {
                x: 300, y: 300,
                LilLightning:{
                    src: '/Lightning/img/LngDocs_LilLightningIdle.png'
                }
            }
        }
    }
    
    _init() {
        const myAnimation = this.tag('LilLightning').animation({
            duration: 2,
            repeat: -1,
            actions: [
                { 
                    p: 'y', 
                    v: { 
                        0: { v: -200, sm: 0.8, s:0 }, 
                        0.1 : {v: 0, sm: 0.1, s: 0}, 
                        0.2 : {v: -120, sm: 0.8, s: 0},
                        0.3 : {v: 0, sm: 0.1, s: 0}, 
                        0.4 : {v: -60, sm: 0.8, s: 0},
                        0.5 : {v: 0, sm: 0.1, s: 0}, 
                        0.6 : {v: -30, sm: 0.8, s: 0},
                        0.7 : {v: 0, sm: 0.1, s: 0},
                        0.8 : {v: -10, sm: 0.8, s: 0},
                        0.9 : {v: 0, sm: 0.1, s: 0},
                        1: { v: 0, sm: 0.8 } 
                    }
                }
            ]
        });
        myAnimation.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