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

你可能感兴趣的:(javascript,动画)