如何使用AEditor制作一个简单的H5交互页demo

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

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

交互页demo地址：

点击打开H5交互页demo

AEditor访问地址：

http://aeditor.alloyteam.com

Step1：设置页面背景颜色

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

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

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

Step2：AEditor标题文字动画制作

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

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

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

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

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

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

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

再选择最后一个帧，把右则属性编辑器的Y值设置为60（此时会生成新的关键帧）：

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

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

Step2：制作企鹅logo动画

图片素材：

点击“图片”按钮，上传企鹅logo：

图片添加到AEditor：

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

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

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

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

粘贴完成：

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

 

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

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

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

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

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

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

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

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

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

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

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

Step4：添加新的一页

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

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

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

Step5：创建多行文本，添加预设动画

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

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

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

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

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

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

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

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

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

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

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

Step6：建立元件，创建文字的组合动画

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

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

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

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

点击“新建元件”按钮，进入元件模式创建元件：

元件名称设置为“text”，元件尺寸设置为150*40：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Step8：导出交互页

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

效果满意之后，点击“导出”按钮，导出该页面的项目结构（zip压缩包）：

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

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