由于公司任务安排，需要笔者先去了解一下LayaAir引擎库，以用来完成公司将要启动的大数据可视化项目，需要借助LayaAir引擎实现复杂的动画。笔者花两天时间将LayaAir引擎的技术文档浏览了一遍，有了一个大致的印象。
LayaAir是一个轻量级、易上手的游戏引擎库，支持ActionScript3、TypeScript、JavaScript三种语言进行开发。同时他能够支持2D，3D，VR ，AR，时间轴动画，缓动、UI系统、粒子动画、骨骼动画、物理系统等动画构建。
LayaAir官网
个人心得：
大致浏览了一下技术文档，总的来说，JavaScript来开发，编码API学习上并没有太大难度，LayaAir引擎封装了在动画制作中需要的各种组件，直接引用就可以了，不过对于笔者这种代码开发人员，他的动画制作就有点不太友好了。
短时间的学习，让笔者感觉，使用这个引擎库，更像是用简单的代码，去调用复杂的动画。动画的制作难度高于代码的编写。
LayaAir IDE：
这个IDE是引擎推荐编辑器，感觉跟VSCode很相似，包含整个游戏制作流程的便利功能，包括：
- 代码开发
- UI编辑器
- 粒子编辑器
- 时间轴动画
- 场景编辑器
- 3D支持
- 脚本扩展
- 预设
- APP打包
- Flash发布
- JS混淆与压缩
-
第三方工具链转换工具（SWF、Unity3D、3Dmax、TiledMap、Spine、龙骨……）
LayaAir IDE界面
For Example：
- 首先说基本的文本创建。
//初始化引擎
Laya.init(1136,640);
var txt = new Laya.Text();
//设置文本内容
txt.text = "hello_world";
//设置文本颜色
txt.color = "#ffffff";
Laya.stage.addChild(txt);
利用Laya.init(width,height)创建舞台或者说画板,参数是舞台的宽高度，然后构建文本对象，设置对象属性，详细可以参考API。最后将构建好的文本对象加入舞台让他显示出来。
从文本创建我们可以看到，我们将舞台构建后，可以任意的想舞台上添加我们构建好的元素，让我在JS开发中有了一种面向对象开发的感觉。
- 矢量图的绘制
LayaAir引擎提供矢量图的绘制API,可以绘制直线、折线、曲线、图形等等。
(function()
{
var Sprite = Laya.Sprite;
var Stage = Laya.Stage;
var WebGL = Laya.WebGL;
var sp;
(function()
{
//初始化舞台
Laya.init(500, 300, WebGL);
drawSomething();
})();
function drawSomething()
{
sp = new Sprite();
Laya.stage.addChild(sp);
//画直线
sp.graphics.drawLine(10, 58, 167, 58, "#ff0000", 5);
}
})();
出去上述代码实现方式外，我们还可以使用LayaAir IDE的设计模式去绘制。
设计模式界面
绘制完成后，绘制文件会在我们
../laya/page目录下，我们可以直接引用绘制文件。
- 然后我们说最主要内容——动画。笔者大概关注了图集动画，缓动动画，时间轴动画。
- 图集动画:将图片做成图片集，然后按顺序播放，常用语游戏人物行走，攻击，死亡等动画的制作。在代码中通过
laya.display.Animation类加载。- 缓动动画：利用
Laya.Tween去加载缓动动画，常用语游戏中道具放入背包，对话框弹出关闭等，提升游戏UI体验的重要因素之一。时间轴动画： 这个厉害了，在笔者看来，复杂动画都需要搞他完成，他跟Android 的补间动画一样，不过他是像制作Flash一样按帧制作。
时间轴动画制作页
- LayaAir引擎还封装了通络通信（基于XMLHTTPRequest）、WebSocket发送与接收数据、JSONP跨域读取数据等。
首次学习后存在问题：
- 这个不太适合前端开发和Native开发快速上手，他更适合动画专业的同学去使用。
- 如果在我们可视化项目中引入它的技术，只能解决动画的问题，页面的开发还是得用常规的H5开发去完成。
- 如何将通过该引擎技术完成的动画页面与常规H5页面结合，现在还比较模糊。
网友评论