β

AEditor快速上手教程

本教程演示如何使用AEditor制作一个简单的H5交互页demo:

37

交互页demo地址:

点击打开H5交互页demo

AEditor访问地址:

http://aeditor.alloyteam.com

Step1:设置页面背景颜色

首先我们设置页面的背景颜色,右击舞台点击“设置背景”:

1

然后在背景颜色中填上色值rgb(38, 61, 102),或者选择自己喜欢的颜色:

2

点击确定,设置页面背景颜色成功。

Step2:AEditor标题文字动画制作

首先,点击“文字”按钮,添加文本到AEditor,并改变输入内容为AEditor:

4

3

设置文字的颜色为浅蓝,并且设置大小为33px,此时文字样式初始化完成:

4

要对文字应用渐变向下的动画,我们需要把文字添加到时间轴。右击文字,选择”添加到时间轴“:

5

点击后会发现顶部多了对应该文字的时间轴:

5

此时我们就可以开始具体到帧的动画编辑了。

帧动画的时长默认是6s,我们并不需要这么长的动画时间。所以我们选中该时间轴,把时长改成1s,发现此时时间轴变短了,只有1s的动画时长:

6

选择第一个关键帧,把透明度设置为0,缓动选择easeout:

7

再选择最后一个帧,把右则属性编辑器的Y值设置为60(此时会生成新的关键帧):

6

然后点击播放,则可看到文字渐变向下出现的动画。

9

另外描述部分的动画制作过程大同小异,就不详述了,描述部分添加到AEditor的效果:

20

Step2:制作企鹅logo动画

图片素材:

alloy

点击“图片”按钮,上传企鹅logo:

7

图片添加到AEditor:

8

由于图片要应用动画,一样右击添加到时间轴,时长设置为1.2s。

然后选择第一个关键帧,透明度设置为0,缓动设置为easeout:

10

由于我们想让动画延迟0.2s开始,所以把第一个关键帧右击“复制”:

11

然后右击0.2s处的帧,选择“粘贴”,此时就把第一个关键帧复制到0.2s处了:

12

粘贴完成:

9

此时再选择最后一个帧,设置选装rotateZ为720度,透明度为1:

14 13

再次点击播放动画,则可看到翻转动画播放。

Step3:制作企鹅logo点击翻转动画

接下来我们制作点击企鹅logo,logo播放翻转动画。

首先设置企鹅logo的点击行为,右击企鹅Logo,选择“设置点击行为”:

11

勾上触发自定义事件,然后填入要触发的事件名“rotate”:

16

点击确定,此时可以看到企鹅Logo上有点击事件标识,点击企鹅会触发rotate事件:

13

此时我们需要建立事件监听播放翻转动画,右击企鹅Logo,选择添加事件动画:

15

填入需要监听的事件名,所以我们填入“rotate”:

12

点击确定,此时会看到生成的对应事件的动画时间轴,并看到“rotate”的事件标识:

17

然后选择第一个关键帧,透明度设置为1,最后创建一个关键帧旋转rotateY设置为720,中间创建一个关键帧,透明度设置为0:

17

此时点击“播放全部”按钮,并且点击企鹅Logo,会播放对应翻转动画:

19

Step4:添加新的一页

此时第一页交互动画已制作完毕,点击页控制的“+”按钮,添加新的一页,并设置背景颜色同上一页:

21

另外改变一下翻页动画的类型,设置为“渐变移动”:

22

点击“播放全部”按钮,可以通过鼠标上下滑动看到翻页效果:

23

Step5:创建多行文本,添加预设动画

对于单行文本,我们使用“文本”按钮添加对应文字,但对于多行文本,我们可以添加图层,然后在图层上编辑添加文字。

点击“图层”按钮添加图层:

24

通过手柄把图层尺寸拉到一定大小并居中:

14

双击图层,进入文字编辑状态,此时可往图层中填充文字:

15

同样我们要为文字添加动画效果,所以编辑文字完成之后,右击文字区域,添加到时间轴。

此时我们准备从预设动画中选择一个从下向上的动画,应用到文字区域中,选择第一个关键帧,点击插入预设动画:

25

此时会看到弹出的预设动画选择框,从中选择动画“从下弹入”:

26

右则预览窗口可以预览预设动画的效果,点击确定,此时会自动创建对应预设动画的所有关键帧:

27

点击播放按钮,可以看到文字从下往上弹入的动画效果。

此时我们选择1.5s处的帧,再次添加预设动画“橡皮筋”,点击确定,再次自动生成对应的所有关键帧:

28

点击播放按钮预留动画,在从下弹入后会再播放橡皮筋效果动画,如果希望对预设动画进行微调,可以手动对关键帧进行二次编辑。

Step6:建立元件,创建文字的组合动画

最后是“By AlloyTeam”这行文字的动画,这个动画有点特殊,文字边闪烁边往右移动。

如果用上面的方式编辑动画的话,可想而知就很麻烦了,闪烁的位置以及对应移动的位置都要手动设置对应关键帧,难以控制的同时也带来了多个难以维护的关键帧。

因此我们使用元件的方式创建该动画。

我们首先把闪烁的文字作为一个元件创建,再为元件整体创建从左到右移动的动画。

点击“新建元件”按钮,进入元件模式创建元件:

29

元件名称设置为“text”,元件尺寸设置为150*40:

16

进入元件模式之后添加文字并设置为“By Alloyteam”,文字颜色设置为淡黄,同时添加到时间轴。

然后动画时长设置为1s,选择中间关键帧设置透明度为0,最后一个关键帧透明度为1:

17

点击播放,此时可以看到文字的一次闪烁动画。

然而,我们希望文字在动画期间连续闪烁3次,此时我们可以选择该时间轴,勾上“重复播放”选项,并且设置“播放次数”为3:

18

点击播放按钮,此时可以看到动画播放了3次。

点击“保存元件”把元件保存下来,再点击”回到场景”:

30

此时我们需要使用刚才创建的元件,点击”插入元件“:

31

然后在元件选择栏中选择刚刚创建的元件,右则预览窗口可以预览元件动画效果:

19

点击确定,此时元件已经被添加到舞台上了:

32

此时再为元件整体创建从左到右的动画,首先把元件添加到时间轴,动画时长设置为2s,然后对第一个帧的X值设置为-180,缓动设置为ease,最后一个关键帧设置X值为85:

33

点击播放按钮,可以看到文字边闪烁边从左滑动到右边的动画过程。

Step7:设置每页动画可重复播放

当前状态下,播放了一页动画之后,再回到该页,动画并不会再次播放,如果我们希望可以多次播放页的动画,可以开启页动画的重复播放设置:

22

这样每次跳到一页的时候,该页的动画都会再次播放。

Step8:导出交互页

此时整个demo页面的动画完成了,可以点击播放全部预览整体效果。

效果满意之后,点击“导出”按钮,导出该页面的项目结构(zip压缩包):

34

生成的压缩包包含了整个交互页的项目结构:

35

解压到目录,mobile模式下打开index.html即可看到创建的交互页效果:

36

更多关于AEditor的详细教程:

http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/

作者:Web前端 腾讯AlloyTeam Blog | 愿景: 成为地球卓越的Web团队!
腾讯全端 AlloyTeam 团队 Blog
原文地址:AEditor快速上手教程, 感谢原作者分享。

发表评论