Transforms

Published: September 03, 2019
Edited: December 08, 2020

An element can be scaled or rotated along with all of its descendants. Lightning supports rotation and scaling both axes independently.

Transform properties

NameTypeDefaultDescription
scaleFloat1Scale width and height. (1 = 1:1)
scaleXFloat1Scale width. (1 = 1:1)
scaleYFloat1Scale height. (1 = 1:1)
rotationFloat0Rotation in radians.
pivotFloat0.5Pivot position: 0 = top-left, 0.5 = center, 1 = bottom-right.
pivotXFloat0.5Pivot position (horizontal axis)
pivotYFloat0.5Pivot position (vertical axis)

Pivot

The pivot point defines the point (within the element), from 0 to 1, around which the rotation and/or scaling is performed.

class LiveDemo extends lng.Application {
    static _template() {
        return {     
            LilLightning:{
                x: 250, y: 250, w: 100, h: 200, pivotX: 1, pivotY: 1, src: '/Lightning/img/LngDocs_LilLightningIdle.png',
                ChildObject:{ x: 50, y: 0, mount: 0.5, w: 25, h: 25, rect: true }
            }
        }
    };
    
    _init(){
        this._lilLightningAnimation = this.tag('LilLightning').animation({
            duration: 6,
            repeat: -1,
            stopMethod: 'immediate',
            actions:[
                {p: 'rotation', v: { 0: 0, 1: 6.29 }},
                {t: 'ChildObject', p: 'rotation', v: {0: 0, 1: 6.29 }}
            ]
        });
        this._lilLightningAnimation.start();
    }
}

const app = new LiveDemo({stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}});
document.body.appendChild(app.stage.getCanvas());
PHP Code Snippets Powered By : XYZScripts.com