AEditor 是什么?

AEditor 是一个方便广大 web 开发者进行 H5 动画交互页开发的工具,开发者可以在 AEditor 上对交互动画以进行编辑,最终导出页面项目。与面向大众的 H5 交互页编辑平台(如玉兔,易企秀等)不同的是,AEditor 面向开发者,在提供预设动画模式的同时,支持对动画进行帧的编辑,事件通知模型,以及可二次开发的特性,从而让开发者能更灵活地实现各种自定义的动画交互需求。

浏览器支持:只支持 chrome 浏览器

概览

AEditor 主要由五部分组成,分别是:基础操作栏、时间轴管理栏、元素属性编辑栏、精灵管理栏以及预览区域。

基础操作栏

场景分类:

新建:打开一个全新的作品。

保存:把作品内容保存下来,需要定义作品名称(双击可编辑),默认为 ‘暂无标题’。

载入:点击载入会打开作品列表,我们可以从已保存的作品列表中选择载入指定作品。

导出:把已完成的作品进行导出,下载一个压缩包,里面包含了页面的项目结构,我们可以直接打开 index.html 看到生成的页面,并且可以在此基础上进行二次开发(例如监听事件进行数据上报等)。

基本对象分类:

基本对象包括图片,文字,图层三种。

图片:

用户需要上传需要用到的图片,图片上传之后在编辑器中可进行编辑,并且图片上传后会对体积进行压缩,最终导出之后会被放置到 img 目录下被生成的页面引用。

文字:

可对文字内容以及样式进行编辑,富文本编辑器提供一定程度的样式修改,如果需要进行完全定制化编辑,可在元素属性中对文本内容增加自定义 css 属性(详见 ‘元素属性编辑部分’)。

图层:

图层相当于一个没有内容的容器,我们可以对一个空图层进行动画操作,并且在二次开发的时候再为容器填充完全自定义的 html 内容(详见 ‘二次开发’ 部分)。

元件分类:

AEditor 的元件与 flash 的元件比较类似,元件的作用在于把一组动画作为一个整体,然后再把在该整体的基础上进行其他动画的叠加。

例如,我们需要一个人从左边走到右边的动画,那么我们就可以把人走路四肢的运动封装成一个元件,再对其叠加从左到右移动的动画,元件的作用在于减少我们对每一个动画细节进行动画叠加的繁琐工作。

新建元件:新建一个元件,点击之后需要输入新元件的名称和尺寸,点击确定之后会进入元件模式,元件模式下我们可以编辑元件的大小,名称,并且为元件添加动画元素,最终保存为一个新的元件。

元件模式:

元件模式下所有对动画的编辑,最终都会保存为一个新的元件。

新建逐帧元件:逐帧元件让我们可以生成基于 css3 的逐帧动画,生成的帧动画同样可以进行二次编辑。所谓逐帧动画就是我们是根据一张连续动画动作的图片,切换图片的可视部分从而生成的动画。

示例图片:

点击新建逐帧元件,会打开编辑窗口,需要填写元件名称,帧数,动画方向,每帧时间间隔以及是否重复播放。点击预览可以在预览区域看到效果:

点击确定,进入元件模式,并自动生成逐帧动画关键帧:

插入元件:点击插入元件,打开元件列表,我们可以从元件列表中选择保存过的元件,添加到作品中,在列表右侧,可以预览元件的效果。

预设动画分类:

预设动画是 AEditor 默认提供的一些预设置关键帧的动画效果,我们可以从中挑选动画从而生成关键帧,然后再根据需要对关键帧进行微调。

插入预设动画:打开预设动画选择界面,可以从数十种预设动画中挑选想要添加的动画效果应用到精灵上,列表右边是动画预览区域。

点击确定之后,自动生成预设动画对应的关键帧:

分页分类:

提供对每一页的管理,包括翻页的方向,翻页动画的效果,每一页的增加/删除,顺序控制,页的属性编辑等。

翻页方向:

翻页方向允许我们选择是上下方向还是左右方向的翻页:

翻页动画:

AEditor 提供四种翻页动画模式:移动,渐变移动,缩放,旋转。

增加页:

增加页按钮可以新增一个新的页面。

页属性配置:

页属性配置方便我们控制每一页的特性:

手形按钮:配置该页是否可以返回上一页。

循环按钮:配置改页动画是否可重复播放(例如从上一页返回该页,是否重新播放该页动画)。

箭头按钮:配置该页动画播放完毕后,是否自动跳到下一页。

时间轴管理栏

时间轴管理栏由播放控制,时间轴以及事件时间轴三部分组成。

播放控制:

控制所有精灵的动画播放。

播放整个作品的动画,包括翻页交互等,相当于导出的页面的预览效果。

播放所选时间轴内的动画,可能是普通时间轴或事件时间轴。

结束当前动画的播放。

编辑当前所选时间轴的动画时长。

如果所选精灵为元件,配置是否在播放该时间轴动画的同时播放元件自身的动画。

是否显示精灵的名字标识(仅仅用于调试)。

时间轴:

精灵名:时间轴对应的精灵的名字。

删除按钮:删除该时间轴

关键帧:时间轴上的关键帧,拖拽可进行移动,右击出现关键帧编辑菜单。

关键帧编辑菜单:包含各种对关键帧的操作:

复制:复制一个关键帧。

删除:删除一个关键帧。

插入预设动画:在当前帧的位置插入一个预设动画,点击打开预设动画选择框。

删除时间轴:删除该时间轴。

设置动画结束行为:设置该时间轴动画播放完毕的行为,点击打开行为设置窗口:

触发自定义事件:添加该动画播放完毕要触发的事件名,其他精灵可以监听该事件并播放对应的动画。添加完成后,会看到时间轴上出现事件名标识:

跳到下一页:配置该动画结束之后自动跳到第一页。配置完成后,会看到时间轴上出现跳到下一页的标识:

事件时间轴:

事件时间轴和时间轴类似,区别只在于事件时间轴内的动画只有在触发某个事件的时候播放。例如上图中,当 event1 事件触发的时候,会播放该动画。

元素属性编辑栏

属性编辑:

元素属性编辑栏用于编辑精灵/精灵关键帧的属性。当精灵被添加到作品时,改变属性值作用于精灵本身,当选择一个关键帧的时候,改变属性值作用于关键帧。

自定义 css 属性:

AEditor 支持我们手动增加自定义的 css 属性(比较常用的例如 background-position 属性)等,方便我们灵活地编辑 AEditor 控制范围外的 css 属性。

名称与类名:

名称仅仅作为精灵在 AEditor 中的标识而存在,而类名会应用在实际生成的 dom 元素中,作为其 className。

模式:

模式的作用是支持不同类型的精灵缩放。

比例缩放模式:该模式下,精灵以 scale 的模式缩放,其内容会一起受缩放影响。

固定尺寸模式:该模式下,精灵以 width/height 的模式缩放,其内容不受缩放影响。

示例:

添加一个图层,双击编辑文字。

左图使用比例缩放,其内容也一起放大。右图使用固定尺寸,其内容不受影响。

精灵管理栏

精灵管理栏负责作品中所有精灵的管理。

精灵名:精灵的名字标识

精灵属性配置:

锁形按钮:配置精灵的上锁状态,上锁后精灵处于不可编辑状态。

视觉按钮:配置精灵是否可见。

删除按钮:删除该精灵。

预览区域

预览区域可以对该页的精灵进行编辑操作,并且观察动画效果。

手柄:

当精灵被添加到页面上,可以使用手柄进行旋转/拉伸操作:

精灵编辑菜单:

右击精灵出现编辑菜单:

复制/粘贴:复制该精灵,同时复制其时间轴(可跨页面复制粘贴)。

置顶/置底:设置精灵的显示层级。

删除:删除该精灵以及对应的时间轴。

设置点击行为:设置该精灵点击的行为,点击打开设置窗口:

触发自定义事件:设置精灵点击触发的事件名,之后我们可以设置监听该事件播放的动画,或在进行二次开发的时候监听该事件,进行自定义的操作(如数据上报等)。

跳到下一页:设置精灵点击跳到下一页的行为。

添加到时间轴:把精灵添加到时间轴,方便后续的动画编辑,如果不添加到时间轴,那精灵只是一个静态的元素。点击添加后精灵新增对应的时间轴:

添加事件动画:

为精灵设置事件监听并播放对应动画,一个精灵可以监听多个事件并播放不同动画。点击打开事件监听设置窗口:

事件名:要监听的事件名称。

只触发一次:是否只触发一次对应的动画。

点击确定之后,会生成对应的事件时间轴,然后我们就可以在时间轴上对该事件的动画进行编辑。

设置为全局精灵:当精灵设置为全局精灵之后,不会随翻页而消失,会一直 fix 在同一个位置,当然,全局精灵也可以设置不同的动画与事件动画。

示例:

全局精灵在两页间共存。

页面设置菜单:

右击页面区域,可设置页面背景以及翻页行为。

设置背景:设置页面背景颜色或背景图,点击打开背景设置窗口:

翻页行为设置:设置翻页时触发的事件名,点击打开翻页行为设置窗口,可设置自定义的翻页事件通知。

其他模块:

帐号登录/注销:

AEditor 需要使用 AlloyAccount 帐号系统进行登录:

图片管理:

对于每个用户,可以上传的最大图片容量是 2M,每个用户总可用空间是 10M。用户所有上传的图片可以在图片管理中查看并管理。

二次开发

在 AEditor 上编辑并导出页面之后,可能还需要根据需求进行二次开发,这里介绍一下 AEditor 为方便二次开发提供的一些特性:

Loading 动画接口支持:

如果需要订制等待资源加载的 loading 界面,可以通过调用

MainPage.setResourceLoadedCallback 接口,获取当前资源加载百分比并显示自定义 loading 动画。

示例:

打开 index.html 插入如下代码:

Html:

Css:

Js:

这样就可以在页面显示一个简单的自定义 loading 提示:

事件监听:

在 AEditor 中我们可以触发各种自定义事件,同样这些自定义事件也可以在代码中监听,因此我们可以利用事件机制增加各种行为,例如上报:

以下是 AEditor 提供的一些默认事件:

pageEnter(index): 开始进入某个页面的事件,例如 pageEnter1 为进入索引为 1 的页面的事件。

pageEnterFinish(index): 已经进入某个页面的事件。

pageLeave(index): 开始离开某个页面的事件。

pageLeaveFinish(index): 已经离开某个页面的事件。

pageAnimationFinish(index):某一页动画播放完毕的事件。

allSpriteAdded: 所有精灵已经被添加到页面的事件。

引入自定义 html:

AEditor 提供为容器元素引入自定义 html 内容的能力,例如我们在编辑器中新增了一图层元素,类名为 classA:

在生成的 index.html 中,可以通过模版方式为元素填入自定义 html 内容。

示例:

命名 id 为 t_content + className 的模版,里面定义需要填充到 className 为 classA 的元素的 html 内容:

Html:

Css:

最终播放的动画中,图层容器就拥有其自定义内容了:

h5 life.html,H5 交互页编辑器 AEditor 介绍相关推荐

  1. 我是如何实现前端H5第一个产品详情页实现的思路及步骤。

    今天公司讨论了,接下来,我们为我们的单品网的工作具体任务安排. 由老马来组织召开了三人的简单会议. 会议就在整个开放的大办公室里(40-50人)进行,我,老马,老卢,坐在一个小圆桌上,开始了我们的会议 ...

  2. H5页面与ios交互返回上一级

    H5页面与ios交互时,返回上一级不兼容,安卓兼容 实现方法  (需要加return false) <a href="#" onclick="javascript: ...

  3. 客户端相关知识学习(二)之h5与原生app交互的原理

    前言 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 app 的功能.所以,这次 ...

  4. h5 与原生 app 交互的原理

    作者:senntyou segmentfault.com/a/1190000016759517 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如 ...

  5. [html] H5如何与APP交互?有哪些方式?

    [html] H5如何与APP交互?有哪些方式? jsbridge与app通信 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与歌谣一起通关 ...

  6. h5与原生app交互的原理

    h5 与原生 app 交互的原理 现在移动端 web 应用,很多时候都需要与原生 app 进行交互.沟通(运行在 webview中),比如微信的 jssdk,通过 window.wx 对象调用一些原生 ...

  7. 微信html5展示页,H5科普|微信H5页面的展示形式

    原标题:H5科普|微信H5页面的展示形式 随着移动互联网的不断发展,越来越多的企业开始运用微信H5来营销推广,微信H5凭借着方便快捷.页面丰富的优势,已经成为了如今最受欢迎的微信营销方式.一款微信H5 ...

  8. H5方面(H5适配手机屏幕等)

    一个html页,其文本包含三个方面的信息,逻辑,内容,样式.其中逻辑部分决定页面和用户交互的行为,样式部分决定用户界面的视觉表现,内容部分是结构化的文本信息.对于一个以内容为主的页面(区别于富交互应用 ...

  9. 支付宝H5,微信H5,微信公众号支付回调

    业务场景 应公司需求,需要在项目中接入支付宝h5支付,微信h5支付和微信公众号支付功能,本编主要讲述支付踩坑和h5支付后跳转的回调问题 微信h5支付 微信h5支付时需要校验下单域名,微信从refere ...

最新文章

  1. UIView旋转角度
  2. webstorm 使用svn
  3. matlab的index函数,写论文第九天:MATLAB之rsindex函数
  4. linux使用技巧:自动补全、常用快捷键* ? [] {}
  5. 14.5.5 Creating a File-Per-Table Tablespace Outside the Data Directory
  6. 捋一捋js面向对象的继承问题
  7. Jar 打包 EXE文件,可以脱离java环境运行 Jsmooth的使用
  8. Standard C Episode 8
  9. datagridview选中获取行号_DataGridView控件显示行号的正确代码及分析
  10. IE、firefox下怎样获得自定义属性的值
  11. javaweb课程设计房屋租赁系统
  12. linux怎么增加用户账号,linux怎么添加用户
  13. selenium 确实是好东西,使用selenium-server 加快执行速度,对速度有很大提升,同时可以拆分服务,进行集群部署。
  14. 前端如何用AI实现证件照在线换底色
  15. Linaro交叉编译链配置
  16. jQuery.Revealing图片展示插件
  17. 怎么在Excel 表里的所有sheet查找
  18. Windows XP自动登录 auto login
  19. TTL信号电平3.3v5v电平转换
  20. 淘宝历史价格查询php源码,记录历史采购价并在列表中显示最低价

热门文章

  1. 2022中国大学python语言程序设计测试六答案(北理工嵩天 、黄天羽 、礼欣)
  2. 用计算机分析卫星云图属于什么应用,卫星云图在天气分析及预报中的应用
  3. php支付宝接口参数错误,php支付接口_php支付宝支付接口程序及参数详解
  4. git 主干修改合并到分支_git分支与主干合并操作
  5. 怎么看计算机版本号,如何查看电脑windows版本号(查看电脑版本信息的11种方法)...
  6. 2022年sublime安装教程超简单
  7. Go channel 通道
  8. git via xkcd
  9. 学生php实训个人总结300字,实训总结300字通用版5篇
  10. 数字转换为中文大写(钱数)