javascript|lightningJS之动画 javascript|动画

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
参考资料：
【javascript|lightningJS之动画】https://rdkcentral.github.io/Lightning/docs/player/player