Value smoothing

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

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