AnnieJS 是一款专注于Html5 互动交互的2d动画引擎。
AnnieJS 借助于Adobe Flash以及Flash2x工具将以前开发as3项目的工作流程完美复制到HTML5项目开发中来。
AnnieJS 完全仿照as3的语法和架构,动画效果流畅,制作视觉震撼,但学习简单,安装方便!
AnnieJS 支持ts和js两种开发语言环境,使用你熟悉的语言开发事半功倍。
AnnieJS 最大的优势就是短小精悍。全部核心代码压缩后不到70k,该有的功能都有了。
AnnieJS 需要结合Adobe 及 Flash2x工具使用才能发挥它最大的优势。
Flash2x 是一款优秀的Adobe Flash插件。
不得不承认CreateJs非常的优秀,但是它当初不是以移动优先的原则设计的,大量的逻辑和判断代码针对移动端没有任何意义。
CreateJs鼠标穿透非常让人头疼,上层的显示对象无法阻断事件会一直往下冒泡,非常讨厌。
CreateJs鼠标事件也是非常让人头疼,如果你的按钮是有透明的地方或者说接近透明的地方,那么这个地方根本无法获取到鼠标事件
CreateJs多fla项目制作打包,需要自己组织合成,资源压缩,打包还需要我们自己构建
CreateJs对于交互式项目,核心库越小越好,显然CreateJs代码库有点过大
那么AnnieJS的作者经过了长期使用CreateJs经验之后,做了大量的优化和工作才做出了现在的这款AnnieJS引擎
重新定义了Flash开发H5的工作流程,具体优势各位看官接着往下看
#使用前准备工作 1.安装 Ant 或者 Gulp 构建工具,选一种你熟悉的就行 2.如果使用typeScript开发,则需要安装 node.js typeScript 运行环境 3.强烈推荐WebStorm,我们所有的源码和项目也是使用此工具制作 4.安装Adobe Flash CS6 及以上版本 5.强烈推荐google Chrome浏览器,调试利器 6.下载并安装Flash2xManager管理软件,用此软件一健配置工具和引擎(支持Mac和win) ##点击下载Flash2xManager工具 #小试牛刀 1.安装好以上所说的相关工具后,打开Adobe Flash软件 随便新建一个Fla文件制作些东西保存(一定要保存)。 2.打开Flash的菜单->窗口->扩展(cs6是[其他])->Flash2x,这时就启动了我们的Flash2x工具。 3.选择一个你熟悉的语言简单设置或者不需要任何设置,点击发布,直到提示发布成功。 4.发布的项目在你使用的Fla文件的同目录下,用WebStorm打开此项目。这个很重要,如果发布后直接双击index.html是看不到任何效果的。 5.如果是发布的TS语言项目,则需要在WebStorm下方的Terminal命令窗口输入 tsc,等待编译完成,再执行第6步。如果是js项目,则跳过这一步。 6.在打开的webStorm项目里找到index.html 右键点击绿色三角箭头的按钮 Run'index.html',就可以看到你的成果啦。 #使用多fla来制作大型项目 ##经常一个大型项目不可能一个人全部做完,也不可能一个fla文件全部做完。那么Flash2x还支持多fla分开制作最后合成同一项目,使用起来也非常方便简单。 ###确定好开发语言后,大家应该都使用相同语言,如果对flash2x构架特别熟悉,也可以混合开发的那另说。开发大致分为两种情况。 ####A.一个人整合并制作步骤如下: 1.将所有的制作好的fla文件放在同一个目录下 2.用flash打开每个fla文件,在Flash2x工具面板里点击设置按钮,将各个fla的发布目录设置成同一目录名。 3.点击Flash2x 面板的发布按钮,将所有的fla发布到你设置的目录里,但又不会相互干扰和覆盖 4.针对不同模块进行相应的开发。 5.通过Flash2x.loadScene进行分布加载或同时加载所有项目模块 6.加上loading及其他代码。 7.如果中途需要修改fla文件内容,则可以将相应fla文件给到动画师制作,完成后再覆盖回来发布就行。 8.最后测试打包上线 ####B.多个人制作最给再给一个人整合步骤如下: 1.各个fla开发人员在自己的电脑上发布项目,但所有人员都规定发布到命名相同的目录里。 2.各个开发模块功能开发好之后,将fla及发布目录下的src目录和resource目录(如果是ts开发的则是resource 和tsSrc目录)发给整合人员 3.整合人员将所有fla放在同一个目录下,并有fla目录下新建一个发布目录,发布目录名就是大家一致确定的目录名。 4.将src目录和resource目录放入发布目录里。 5.打开所有fla文件用Flash2x 工具重新发布一次。 6.以下步骤和一个人整合并制作的步骤相同 #打包压缩资源并发布成最终版 ##打包的构建工具目前支持两种,一种是Ant,一种是Gulp. ###A.Ant打包构建方案 1.配置好Ant,并能全局使用。所谓的全局使用就是在命令终端只要输入ant三个字母,终端就会有相应的提示,这就表示全局安装成功。没有成功的百度下。 2.在WebStorm里,一般在下面有个Terminal,打开它,在里面输入 'ant',等待片刻,打包完成。 3.打包完成后,会在项目目录里生成一个released目录,这个目录里的内容就是最终你可以发布出去的内容。 ###B.Gulp打包构建方案 1.配置好Glup,并能全局使用,什么是全局和Ant一样。 2.在WebStorm里,打开Terminal 输入 'npm install',这时会安装相应的node.js组件,等待安装完成 3.安装完成后,在Terminal 输入 'gulp' 打包将会进行。 4.如果打包的过程中出现错误,一般是项目目录下的tools文件夹没有执行权限,更改一下tools的目录执行权限,再次运行 'gulp' 5.打包完成后,会在项目目录里生成一个released目录,这个目录里的内容就是最终你可以发布出去的内容。 ###在手机上调出vConsole调试面板查看调试信息 在main.js或者main.ts中将'annie.debug=false;'设成 'annie.debug=true;' #如何更新引擎及工具 下载的Falsh2xManager管理软件不要删除了,引擎及工具的更新和升级都需要用到,长期保留会有惊喜。 #AnnieJS 版本更新列表 ##AnnieJS 1.0.4 版本 优化annie.URLLoader 错误事件提示 增加annie.URLLoader 加载完整事件里返回加载数据类型参数 修复annie.VideoPlayer 播放mp4报错问题 优化video在微信的播放效果 修复annie.DisplayObject.getDrawRect在没有子集的情况下返回null 新增Flash2x.jsonp()方法 重写显示对象的update的算法,大量优化,效率提高200% 矢量不再默认缓存为位图,需要手动设置annie.Shape实例的cacaheAsBitmpa属性开启 暂时去掉对webgl的支持,在2d交互项目使用过程中目前没发现有什么突飞猛进的作用,实用性和性价比不高,反而增加了引擎体积,等webgl成熟后再支持 ##AnnieJS 1.0.3 版本 删除annie.canTouchMove,不再控制html的可移动所有浮在AnnieJS上的Html元素自己管自己,现在canvas本身是不会上下滑动的了 增加支持输入文本在手机端自动回收软键盘 增加支持两点的放大缩小及旋转手势 增加了anneUIFlipPage电子杂志组件 修复annie.URLLoader上传超时没反应的bug 修复annie.Point.distance()计算错误bug 修复android机annie.MouseEvent.CLICK事件不灵敏的bug 修复将一个子对象添加到另一个子对象时,子对象里所有动画信息会被初始化的bug 阻止手机双击屏幕时,界面会往上弹起效果 废弃annie.AObject.getInstanceId()方法,直接使用annie.AObject.instanceId属性获取或则设置 废弃annie.DisplayObject.getWH()和annie.DisplayObject.setWH()方法,直接使用annie.DisplayObject.width和annie.DisplayObject.height属性进行获取和设置 废弃annie.InputText.getText()和annie.DisplayObject.setText()方法,直接使用annie.InputText.text属性进行获取和设置 废弃annie.InputText.setBorder(),直接使用annie.InputText.border 属性进行获取和设置 废弃annie.InputText.setBold(),直接使用annie.InputText.bold 属性进行获取和设置 废弃annie.InputText.setItalic(),直接使用annie.InputText.italic 属性进行获取和设置 增加annie.InputText.color 属性进行字体颜色的获取和设置 增加annie.AObject.instanceType 属性进行获取对象类型 增加Flash2x.loadScene()的完成时回调参数。在加载多场景的时候很有用,比如有些时候,我不想等所有的场景加载完才运行,这样我可以通过完成时回调参数来判断加载到哪里了。 进一步优化引擎内核 ##AnnieJS 1.0.2 版本 新增annie.MoveClip类中的container属性,方便对MovieClip中添加不是用fla生成的子级对象 支持WEBGL渲染,提高渲染性能。 但不能迷恋WEBGL,还是需要看应用情景,偏大量交互动画长篇建议用Canvas渲染;一般交互项目或者偏游戏类型的项目建议用WEBGL。具体性能可实地测试项目后再来定夺 修复动态文本一开始就用数字赋值不显示的问题 优化加载模块,提高加载速度 修复在微信环境里某些手机音乐不能自动播放的问题 修复矢量位图填充在不使用spriteSheet的情况下时无法找到位置资源的bug 增加annie.Tween 中的完成回调参数 增加annie.Tween 中的loop循环参数 增加annie.Rectangle 中testRectCross方法 检测矩形相交 进一步优化引擎内核
修复静态文本多行显示不正确bug
URLLoader支持泛型跨域
修复了Tween中的两个命名不规范的静态缓动方法名
修复annieUI.ScrollPage 在pc端鼠标不按下就能滚动的bug
修复annie.Tween 在动画完成回调函数里继续更改同一对象的动画效果时会无效的bug
将annie.Shape.arc方法的参数由弧度更改成角度
支持vconsole调试,这样在手机上测试的时候就可以查看到调试信息(非常有用)
更改了鼠标事件执行顺序,以前是在渲染前,现在更改后渲染后,逻辑更合理
##AnnieJS 1.0.0 版本 支持flash 剪辑,动画剪辑,按钮,文本,矢量,图形,SpriteSheet,声音等对象 支持flash 遮罩,引导,传统补间,高级补间,骨骼动画 支持Flash 模糊,发光,投影,高级色彩,变色滤镜 支持Flash 显示对象的x,y,alpha,rotation,visible,scaleX,scaleY,skewX,skewY,anchorX,anchorY 支持Flash 时间轴嵌套时间轴动画,多层,多帧,多子级动画 支持Flash 时间轴的正向播放,反向播放 支持Flash 时间轴跳转标签 支持Flash 时间轴EnterFrame事件,EndFrame事件,CallFrame事件 支持Flash 时间轴上运行的脚本 支持Flash 矢量的单色填充,渐变线性填充,渐变径向填充,位图填充 支持Flash Stage缩放自适应,自适应设备方向,resize事件 支持Flash mouse的mouseDown mouseUp mouseOver mouseMove click 事件 支持Flash 显示对象的 addToStage removeToStage 事件 支持Flash 显示对象的 mouseChildren mouseEabale属性 支持tween 动画类 支持urlLoader 加载类 支持flash2x 管理类 #Flash2x 版本更新列表
更新gulp构建模式下支持将fla打包成一个单独的swf资源文件供html5调用,实现一个fla生成一个swf文件别无其他资源文件的完美解决方案
更新AnnieJS引擎及相应的模板包
支持Flash Canvas 文档导出
增加对单帧的动画剪辑的时间轴上的代码脚本导出
修复导出矢量图时偶尔报错的bug
修复多行静态文本导出后只显示一行的bug
修复了清除缓存模式下Main.js没有被清除缓存的bug
修复导出序列视频annie.ImageVideo会抖动的bug
支持将flash以上所提到的资源和功能导出,以提供给AnnieJS引擎使用。
支持自定义开发功能,给需要想导出成其他引擎的开发者开发使用。