lightningJS之动画

1、元素位置

支持的属性

名称	类型	默认值	描述
x	Float	0	相对父对象的x坐标
y	Float	0	相对父对象的y坐标
w	Float	0	宽度，如果没有设置，从激活的纹理继承
h	Float	0	高度，如果没有设置，从激活的纹理继承
mount	Float	0	相对坐标（与x,y相等）的纹理对齐
mountX	Float	0	水平轴的纹理挂载点
mountY	Float	0	竖直轴的纹理挂载点

• https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Elements/Positioning

 2、动画

• https://lightningjs.io/docs/#/lightning-core-reference/Animations/index

 3、过度

• https://lightningjs.io/docs/#/lightning-core-reference/Transitions/index

 4、纹理图片

• https://lightningjs.io/docs/#/lightning-core-reference/RenderEngine/Textures/Image

5、实现功能

 pixJS实现的功能，跟踪目标点，如果与目标点距离小于1，重新设置目标点。要求使用lightningJS实现相似功能

const app = new PIXI.Application();
document.body.appendChild(app.view);

app.stage.interactive = true;

const bg = PIXI.Sprite.from('examples/assets/bg_plane.jpg');

app.stage.addChild(bg);

const cells = PIXI.Sprite.from('examples/assets/cells.png');

cells.scale.set(1.5);

const mask = PIXI.Sprite.from('examples/assets/flowerTop.png');
mask.anchor.set(0.5);
mask.x = 310;
mask.y = 190;

cells.mask = mask;

app.stage.addChild(mask, cells);

const target = new PIXI.Point();

reset();

function reset() {
    target.x = Math.floor(Math.random() * 550);
    target.y = Math.floor(Math.random() * 300);
}

app.ticker.add(() => {
    mask.x += (target.x - mask.x) * 0.1;
    mask.y += (target.y - mask.y) * 0.1;

    if (Math.abs(mask.x - target.x) < 1) {
        reset();
    }
});

使用lightningJS中的Transition的x,y属性以及事件finish，代码参考：

https://github.com/wuli2496/OJ/tree/master/topcoder/lightningjs/com.medium

参考资料：

https://rdkcentral.github.io/Lightning/docs/player/player