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

lightningJS之动画相关推荐

Android Animation (安卓动画）概念简介
Android Animation Android 四种动画分别为逐帧动画和补间动画.属性动画.过渡动画: Frame Animation (逐帧动画) 实现方式:xml 和 Java代码图片跳转的 ...
Android动画之帧动画和补间动画
Android系统提供三种动画:帧动画.补间动画和属性动画.这里先分析总结帧动画和补间动画. FrameAnimation 帧动画,通俗来说就是按照图片动作顺序依次播放来形成动画,创建帧动画可以用 x ...
Android 动画 ViewPropertyAnimator 的使用
ViewPropertyAnimator 说明: ViewPropertyAnimator 可为View对象上的选择属性启用自动和优化的动画, ViewPropertyAnimator 不是由调用方构 ...
Android ViewAnimationUtils (动画) 的使用
先看下ViewAnimationUtils 实现的几个常见的效果图如下: ViewAnimationUtils 的作用: 设置剪切圆动画的动画制作器一般的使用如下: Animator revea ...
Android AnimationUtils (动画)的使用
AnimationUtils 其实就是补间动画(Tween Animation) 在xml 中的写了动画java 中调用这边打算就写一个demo 简答的记录下它的使用详细的请看点击查看,这篇博客 ...
Android ProgressBar 加载中界面实现(loading 动画) 实现菊花的效果
实现的效果图如下: 使用方法ProgressBar ,如果感觉这个动画不是自己想要的,需要根据ui的图片来实现只需要将xml中的animated-rotate 修改为animation-list 贴 ...
Android 属性动画(Property Animation) ObjectAnimator的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 属性动画(Property Animation) ValueAnimator 的介绍
先说下属性动画与视图动画的区别: 视图动画系统仅提供为 View 对象添加动画效果的功能,因此,如果您想为非对象添加动画效果,则必须实现自己的代码才能做到.视图动画系统也存在一些限制,因为它仅公开 ...
Android 补间动画(Tween Animation)
Tween Animation(补间动画): Tween动画,通过对View的内容进行一系列的图形变换 (包括平移.缩放.旋转.改变透明度)来实现动画效果.动画效果的定义可以采用XML来做也可以采用编 ...

lightningJS之动画