Ngui简介这是一个GUI排版显示引擎，也是一个跨平台的GUI应用开发框架，基于NodeJS/OpenGL，也是第一个移动端Android/iOS结合NodeJS的前端GUI项目，至此JavaScript成为真正意义上的前后端通吃的语言。Ngui的目标：在此基础上开发GUI应用程序，既能兼顾Native应用程序的性能和体验，又能拥有开发WEB应用程序的简单和速度。开源跨平台移动项目Ngui【介绍】开源跨平台移动项目Ngui【入门】开源跨平台移动项目Ngui【视图和布局系统】开源跨平台移动项目Ngui【Action动作系统】开源跨平台移动端项目Ngui【CSS样式表格规则及用法】NguiAPI文档什么是Action，什么是Action？顾名思义，它是管理运行环境中所有动作的中心。通俗地说，就是动画。它也是整个框架的核心组件之一，提供动作的创建、删除、插入以及对关键帧和转场的许多操作。关键帧的过渡可以使用三次贝塞尔曲线，也可以使用内置的曲线linear/ease/ease_in/ease_out/ease_in_out，与大多数主流框架和游戏引擎类似。行动的原则是什么，行动又是如何带动见地顺畅移动的呢？其实原理很简单。我们可以把动作系统看成是一个与视图或渲染完全无关的独立系统。它们之间的关系是，action本身的改变最终会映射到view上，而这个过程是通过调用view暴露的公共方法或属性来完成的。这个过程完全是单向的，视图不会向动作发出任何指令。比如现在新建一个关键帧动作，为其设置两个关键帧，1秒后x的值从0变为100。这个过程就是动作本身的变化，并带动相关的视图一起变化。请记住，这个过程的观点是被动的，而行动是主动的改变。import{ngui,Div}from'ngui';importKeyframeActionfrom'ngui/action';vardiv=newDiv();varact=newKeyframeAction();act.add({x:0,time:0});act.add({x:100,time:1e3/*milliseconds*/});div.width=50;div.height=50;div.backgroundColor='#f00';div.action=act;div.appendTo(ngui.root);act.play();Action类下面是框架提供的几种类型和继承链接注：带*的是抽象类型或者没有构造函数的协议[Action]*[GroupAction]*[SpawnAction][SequenceAction][KeyframeAction]Action*这是所有动作的基本类型，也是一个抽象类型，不能直接实例化。提供一些基本的api操作，如播放、停止、跳转等，具体请参考API手册。GroupAction*这是一个集合动作类型，提供增删改查子动作。通过子动作，可以实现更复杂的动画场景。它还有两个具体的子类型[SpawnAction]和[SequenceAction]。顾名思义，SpawnAction并行动作就是它的子动作都是并行运行的。并且将最长的子动作的持续时间作为自己执行动作的持续时间，持续时间较短的子动作在结束时等待动作结束或循环终止。SequenceAction串行动作更容易理解。子动作依次执行，全部执行完毕后结束或开始新的循环。KeyframeAction和Frame关键帧动作这是动作系统的核心。所有动作的实现都在这里完成。它是动作系统的基本单位。前面的[GroupAction]只有包含[KeyframeAction]类型的action才有意义。关键帧动作还包括一个更基本的元素关键帧[Frame]。关键帧中包含的属性与CSS属性同名，是所有视图属性的对应键。通俗点说，比如[View]上会有一个x属性，[Frame]上会有一个x属性。如果关键帧上有一个属性在视图上不存在，那么这个属性对于视图是无效的。比如[View]上没有width属性，那么这个属性的变化不会影响到[View]，但是如果绑定的view是[Div]，那么width的变化肯定会影响它，类似于CSS样式表。请参见下面的示例：//这是一个有效的操作varact1=newKeyframeAction();vardiv=newDiv();div.backgroundColor='#f00';act1.add({width:10,height:10});act1.add({width:100,height:100,time:1e3});div.action=act1;act1.paly();//这是无效的varact2=newKeyframeAction();varview=newView();act2.add({width:10,height:10});act2.add({width:100,height:100,time:1e3});view.action=act2;act2.paly();View.action属性[View.action]作为[View]的一个属性，可以接收各种类型的参数。前面例子中创建一个action是很麻烦的，但是active提供了多种类型的参数类型。支持，包括json数据和Action对象实例本身。Action方法在前面的例子中已经介绍过了，下面重点介绍json数据方法。您还可以研究ngui.js和action.js中的源代码。其他[View.action]属性仅用于简单的呼叫转移。该功能实际上是在action.js文件中的create()方法中实现的。参见示例：//这是创建KeyframeActionvardiv=newDiv();div.action={keyframe:[{x:0},{x:100,time:500},{x:0,time:1000},],loop:-1,};vardiv2=newDiv();div.action=[{x:0},{x:100,time:500},];//这是创建SequenceActionvardiv3=newDiv();div3.action={seq:[[//这是一个subKeyframeAction{x:0},{x:100,time:1e3},],{//这是一个子SpawnActionspawn:[[//这是一个subKeyframeAction{y:100},{y:200,time:2e3}],[//这是一个subKeyframeAction{width:200},{width:100,time:1e3}],]}],};//这是创建SpawnActionvardiv4=newDiv();div4.action={spawn:[//这只包含一个子KeyframeAction{x:0},{x:200,time:2e3}]};可以看到在上面的例子中，有4种典型的创建方式。主要看你给的json数据有没有seq,spawn,keyframe这三个属性，分别对应[SpawnAction],[SequenceAction],[KeyframeAction],加上一个json数据类型检查，如果数据类型是数组，则创建[关键帧动作]。这可以嵌套使用。View.transition()方法这是创建简单过渡动画的简单方法。原型是action.js的transition()方法。和[View.action]一样，[View.transition()]只是做简单的转发。典型应用：view.transition({time:1000,y:100,x:100,})具体请参考手册。View.onActionKeyframe和View.onActionLoop这两个事件是由动作产生和发送的。View.onActionKeyframe在动作执行到关键帧时触发。因为屏幕渲染是固定的帧率，触发总是在渲染帧的时候发生，所以可能会和理想的时间值有一些偏差，提前或者延迟。该延迟值将保存在事件数据的延迟中。提前为负数，延迟为正数。View.onActionLoop在动作循环开始时触发，第一次执行动作时不会触发。同样的，它也会有延迟，也记录在delay中。
