开源跨平台移动项目Ngui【Action动作系统】
Ngui简介
这是一个GUI的排版显示引擎和跨平台的GUI应用程序开发框架,基于NodeJS/OpenGL,这也是第一个在移动端Android/iOS融合NodeJS的前端GUI项目,至此JavaScript成为了真正意义上前后端通吃的语言。
Ngui的目标:在此基础上开发GUI应用程序可拥有开发WEB应用般简单与速度同时兼顾Native应用程序的性能与体验。
开源跨平台移动项目Ngui【简介】
开源跨平台移动项目Ngui【入门】
开源跨平台移动项目Ngui【视图与布局系统】
开源跨平台移动项目Ngui【Action动作系统】
开源跨平台移动项目Ngui【CSS样式表规则及用法】
Ngui API 文档
什么是Action动作
什么是动作呢?顾名思义它是管理运行环境中所有动作的中枢,通俗点讲就是动画。它也是总个框架核心组件之一,它提供动作的创建、删除、插入,以及提供对关键帧与过渡的诸多操作。关键帧的过渡可以使用三次贝塞尔曲线,或内置的曲线 linear/ease/ease_in/ease_out/ease_in_out,这也和大多数主流框架以及游戏引擎类似。
动作是什么原理
动作怎么驱动视图进行流畅运动的呢?其实原理很简单,我们可以把动作系统看做一个独立的系统与视图或渲染完全不相关。它们之间的关系是动作自身的变化最终会映射调视图,这个过程是通过调用视图暴露的公有方法或属性来完成的。这个过程完全是单向的,且视图不会向动作发出任何指令。
比如说现在创建了一个新的关键帧动作,给它设置两个关键帧,且x的值经过1秒钟从0变化到100。这个过程是动作自身发生的变化并且带动与之相关的视图一同发生改变,请记住这个过程视图是被动的,而动作才是主动的发生改变。
import { ngui, Div } from 'ngui';
import KeyframeAction from 'ngui/action';
var div = new Div();
var act = new KeyframeAction();
act.add({ x: 0, time: 0 });
act.add({ x: 100, time: 1e3/*毫秒*/ });
div.width = 50;
div.height = 50;
div.backgroundColor = '#f00';
div.action = act;
div.appendTo(ngui.root);
act.play();复制代码
动作类别
以下是框架提供的几个类型与继承联系
注:带*号的为抽象类型或协议没有构造函数
- Action*
- GroupAction*
- SpawnAction
- SequenceAction
- KeyframeAction
- GroupAction*
Action*
这是所有动作的基础类型,也是抽象类型不可以直接被实例。
提供了一些基本的api操作,播放
,停止
,跳转
等,具体可查看API手册。
GroupAction*
这是个集合的动作类型,提供子动作的添加删除插入。有了子动作就可以帮你实现更加复杂的动画场景。
它也有两个具体的子类型 SpawnAction 、SequenceAction。
SpawnAction
并行动作顾名思义即就是它的子动作都是并行运行的。并且以最长子动作的时长做为自身的时长来执行动作,较短时长的子动作则在结尾等待动作的结束或一个循环的的终止。
SequenceAction
串行动作这个比较好理解,子动作一个接着一个执行,全部执行完成后结束或开始新的循环。
KeyframeAction与Frame
关键帧动作这是动作系统的核心。所有动作的实现均在这里完成它是动作系统基本单元,前面的GroupAction只有包含KeyframeAction类型的动作才有真正的义意。
而关键帧动作又包含理更加基本的元素关键帧
Frame,关键帧包含的属性与CSS
属性是同名的且与所有视图的属性都是对应关键。通俗的说比如View上会有x
属性而Frame上也会有x
属性,如果关键帧上有视图上并不存在的属性,那么这个属性对视图是无效的。比如View上就不存在width
属性那么这个属性的改变不会影响到View,但如果绑定的视图是Div那么width
的改变一定会影响到它,这与CSS
样式表类似。
看下面的例子:
// 这是有效的动作
var act1 = new KeyframeAction();
var div = new Div();
div.backgroundColor = '#f00';
act1.add({ width: 10, height: 10 });
act1.add({ width: 100, height: 100, time: 1e3 });
div.action = act1;
act1.paly();
// 这是无效的
var act2 = new KeyframeAction();
var view = new View();
act2.add({ width: 10, height: 10 });
act2.add({ width: 100, height: 100, time: 1e3 });
view.action = act2;
act2.paly();复制代码
View.action属性
View.action做为View的一个属性可接收多种类型的参数,之前给大家展示的例子中创建动作是很繁琐的,但active
提供多种类型的参数类型的支持,包括json
数据与Action
对像实例本身。前面的例子中已介绍过Action
方式,下面着重说json
数据方法。大家也可研读ngui.js
与action.js
中的源代码,其它View.action属性只是做简单的调用转发,功能的实现其实是在action.js
文件中的create()
方法里实现的。
看例子:
// 这是创建KeyframeAction
var div = new Div();
div.action = {keyframe: [{ x: 0 },{ x: 100, time: 500 },{ x: 0, time: 1000 },],loop: -1,
};
var div2 = new Div();
div.action = [{ x: 0 },{ x: 100, time: 500 },
];// 这是创建SequenceAction
var div3 = new Div();
div3.action = {seq: [[ // 这是个子KeyframeAction{ x: 0 },{ x: 100, time: 1e3 },],{ // 这是个子SpawnActionspawn: [[ // 这是个子KeyframeAction{ y : 100 }, { y: 200, time: 2e3 }],[ // 这是个子KeyframeAction{ width : 200 }, { width: 100, time: 1e3 }],] }],
};// 这是创建SpawnAction
var div4 = new Div();
div4.action = {spawn: [ // 这里只包含一个子KeyframeAction{x: 0}, {x: 200, time: 2e3} ]
};复制代码
大家可以看到上面的例子中有4种典型的创建方法。主要看你给的json
数据是否存在这三个属性seq
、spawn
、keyframe
,对应SpawnAction、SequenceAction、KeyframeAction,外加一个json
数据类型检查,数据类型为数组就创建KeyframeAction。并且这可以嵌套使用。
View.transition()方法
这是一个简单创建简单过渡动画的方法,实现原型为action.js
的transition()
方法,与View.action一样View.transition()只做简单的转发。
典型应用:
view.transition({time: 1000,y: 100, x: 100,
})复制代码
具体可查阅手册。
View.onActionKeyframe与View.onActionLoop
这两个事件是由动作产生并发送的。
View.onActionKeyframe
为动作执行到达关键帧时触发。因为画面渲染是固定的帧率,触发总是发生在帧的渲染时,所以可能会与理想中的时间值有所误差提前或延后,这个延时值会保存在事件数据的delay
上。提前为负数,延时为正数。View.onActionLoop
动作循环开始时触发,第一次执行动作并不会触发。同样它也会有延时,也同样记录在delay
。
转载于:https://juejin.im/post/5a16869f6fb9a0450f219b17
开源跨平台移动项目Ngui【Action动作系统】相关推荐
- Linux服务器的gou,开源跨平台移动项目Langou【简介】
Langou简介 Langou是一个跨平台(Android/iOS)前端开发框架,核心代码使用C++编写,底层基于OpenGL绘图,上层实现了一个精简的排版引擎以及一个JS/JSX运行环境.目标是想实 ...
- Cocos Creator 的 动作(Action)系统:moveBy的使用
Cocos Creator 快速上手:制作第一个游戏 可以在这里感受一下这款游戏的完成形态: http://fbdemos.leanapp.cn/star-catcher/ 准备项目和资源 我们已经为 ...
- 智能终端会议系统(15)---视频会议十大开源编解码项目排行
视频会议十大开源编解码项目排行 在视频会议领域,有许多可以值得参考的开源项目,这些开源项目有的是协议栈.有的是编码器或者是传输协议,由于视频会议系统是一个综合性的应用系统,里面包含功能较多,如能把这些 ...
- 白嫖项目基于ssm房屋租赁系统源码【开源项目】
ssm房屋租赁系统 运行工具:idea或eclipse均测试,可以运行. 开发技术: 后端ssm(spring springmvc mybatis) 前端:jsp jquery 数据库:mysq ...
- 终于把鸿蒙说明白了,关于安卓系统、AOSP(安卓开源项目)和鸿蒙系统比较
把鸿蒙说得很明白了,小白们不要给小米.蓝绿厂泼污水文忽悠了,以为鸿蒙就和当年的龙芯一样把鸿蒙说得很明白了,小白们不要给小米.蓝绿厂泼污水文忽悠了,以为鸿蒙就和当年的汉芯一样买芯片换掉商标就行! 关于安 ...
- 【新书推荐】《微软开源跨平台移动开发实践》带你走近微软开源开源跨平台技术
上周收到本书作者李争送的一本12月份的新书<微软开源跨平台移动开发实践--利用ASP.NET Core 1.0 .Apache Cordova.Xamarin和Azure快速构建移动应用解决方案 ...
- Android 通过Intent调用系统功能和Action动作和服务广播【大全】
1.从google搜索内容 Intent intent = new Intent(); intent.setAction(Intent.ACTION_WEB_SEARCH); intent.putEx ...
- .NET Core 1.0发布:微软开源跨平台大布局序幕
在6月27日的红帽DevNation峰会上,微软正式发布了.NET Core 1.0.ASP.NET 1.0和Entity Framework Core 1.0,这些产品将全部支持Windows.OS ...
- .NET Core:面向未来的开源跨平台开发技术
作为一种全新的开源和跨平台的开发平台,.NET Core 历经两年多的开发,终于在于2016年6月27日针对所有主流服务器和桌面操作系统发布 1.0 RTM 版本..NET Core 是一种通用开发平 ...
最新文章
- ITFriend站点内測公測感悟
- 11大改革举措!国家自然科学基金2021年项目指南发布
- boost::signals2::slot相关的测试程序
- boost::safe_numerics模块检查外部产生的价值可以被忽略的测试程序
- Windows7上安装TensorFlow——基于Docker镜像
- jQuery WeUI 上传
- Hbase2.0版本安装教程
- kohana的modules集合
- mysql表分区数量限制_MySQL分区表的局限和限制详解
- 两平面平行方向向量关系_空间向量,如果一条直线与一平面平行,那么直线的方向向量与平面的法向量有什么关系??垂直呢?...
- Telnet 详解 及命令使用
- cmake未找到命令解决
- Windows程序设计实验---BOUNCING BALL
- windows下C++实现Unicode和ASCII编码的互转
- java aes ebc_Delphi XE2+标准AES加解密算法(AES/EBC,CBC/PKCS5Padding-base64)
- 想要从编程小白成为达人,这些你必须知道!(附STM32学习指南)
- 贪心 csust1250 绮礼的阴谋
- springboot 导入excel(数据批量导入)
- ora-01407 无法更新 值 为null
- 操作系统ahci aci ide模式
热门文章
- 刚搭建的linux环境的基本优化以及优化脚本---菜鸟初写
- 【推荐】大型网站图片服务器架构的演进
- 又发现一个关于R文件丢失的问题
- Community Server专题五:IHttpHandlerFactory
- 生成allure测试报告时报错的解决方法
- 微型计算机储存数据的基本单位是,计算机储存和处理数据的基本单位是什么
- android 结束if循环_Android Handler 消息循环机制
- python控制结构是_Python之控制结构(if、while、for)
- 10笔记本怎么和台式机联网_笔记本电脑怎么重装系统Win7?给你10分钟能完成系统重装吗?...
- 加工中心宏程序生成器_零件行外球面加工,老师傅告诉你,普通程序与宏加工哪个更方便...