# 制作接力型H5 **制作首页** 新建图层,分别将首页图片和文字素材添加进舞台,调整位置大小等。同时在时间轴上插入关键帧动画,为各个素材制作动画效果。 ![](https://box.kancloud.cn/75c0a8c43ac4c6e904b4036faadd11bc_900x533.png) 如下图,将“历史”文字图片转化为元件,在元件页面通过遮罩功能制作一个“历史”文字的动态效果。 ![](https://box.kancloud.cn/84156a60883faf07ef02dcb5ac12469a_900x530.png) 最后为其他文字等素材添加预置动画等,设置出现时间和动画效果。 ![](https://box.kancloud.cn/f5186e92e814334c7ea6365be2aa1e4b_900x531.png) **制作擦玻璃过渡动画** 添加背景图片、“擦一擦”“宛平城”等素材,调整位置大小,同时为素材制作相对应的动画效果等。 ![](https://box.kancloud.cn/a9a9b4290290a6115067502d6d0192ed_900x531.png) 新建图层,在最后帧数上插入关键帧,添加一个“擦玻璃”功能,设置其背景图片和前景图片,同时可设置其橡皮擦大小、剩余比例等属性。 ![](https://box.kancloud.cn/d23f80281e91e3289a220082c4507fd8_900x532.png) 新建图层,在“擦玻璃”后一帧插入关键帧,再添加“擦玻璃”背景图片,调整大小位置,使其与“擦玻璃”背景图片大小位置重合。同时为该图层插入关键帧动画设置移动的动画效果。 ![](https://box.kancloud.cn/a6fb6656360db07eefb88b09062d0556_900x531.png) 新建图层,在“擦玻璃”关键帧相同帧数上添加一个“出现即暂停”的行为物体(注意在该帧数后面一帧插入一个空白帧)。 ![](https://box.kancloud.cn/0c5964d0357a9b0e861173d60417d84c_900x539.png) 为“擦玻璃”添加一个“擦玻璃完成即播放下一帧”的行为。 ![](https://box.kancloud.cn/388084c7a018c183d4e3eea3417427d8_900x535.png) 新建图层,在“擦玻璃”下一帧插入文字,“插入进度动画”,设置文字以打字机效果出现的动画。 ![](https://box.kancloud.cn/db26d7ed2fe95f1b64ec80cee4e45cc6_900x536.png) **制作视频页** 导入视频至舞台,可为视频添加背景图片、设置视频大小位置以及其他播放属性。 ![](https://box.kancloud.cn/0f6369c3179e4d91fbc713a08e0c7c4a_900x533.png) 如下图,新建图层,在时间轴合适的位置插入关键帧,插入一个“出现即暂停”行为物体(注意在后面一帧插入一个空白帧)。 ![](https://box.kancloud.cn/7e0a9d5d1abef6ddea6cde2e5f33b22d_900x532.png) 新建图层,在“出现即暂停”帧数后一帧插入关键帧,插入相关文字,为文字“插入进度动画”,设置文字以打字机效果出现的动画。为文字所在的帧命名为“go”。 ![](https://box.kancloud.cn/ca80948baabd846d57c8b01bbccdd270_900x533.png) 为视频添加“视频结束跳转到‘go’帧并播放”的行为。 ![](https://box.kancloud.cn/a6e0c80cae9a919c8c6e139cd254a20e_900x532.png) **制作献花接力效果** 添加相关素材,调整素材的大小位置等,注意为文本框命名为“献花数量”。 ![](https://box.kancloud.cn/263bd55b944b16be126ec6a49c2bfaf7_900x531.png) 新建图层“计数器”,添加一个“计数器”在舞台上,设置默认值为“0”,计数值为“1”,并且为其命名为“计数器1”。 ![](https://box.kancloud.cn/b1bc67235dda5d4b43062465239b3ff1_900x520.png) 为按钮添加行为 数据服务→设置计数器→触发条件:点击→设置参数 计数器名称:“计数器1” 显示计数元素:“献花数量” ![](https://box.kancloud.cn/6382a6f7ca365af8588d208f485562f1_900x531.png) ![](https://box.kancloud.cn/25a81515bddec7bd36a7de8710ac7aa1_900x376.png) 如图,如何制作“点击按钮,花即从按钮中随机移至上面五朵花中任意一朵位置”的动画效果? ![](https://box.kancloud.cn/a3a5b193ab140bb0b9c4076a32812a41_900x537.png) 如下图,制作一个花的元件,设置“从按钮位置旋转移至舞台上面第一朵花的位置上”的动画效果。为元件命名为“花1”。 ![](https://box.kancloud.cn/61c00e8c6d92f56952012e16f425f7bd_900x530.png) 同理再设置一个元件,该元件的花最后停留在舞台上面第二朵花的位置上,为其命名“花2”,将其添加进舞台(此处仅供理解,不再多添加其它三个元件)。 在舞台之外添加一个随机数,设置相关属性,例如最大值为“2”,最小值为“1”,更新间隔“0.1”。 ![](https://box.kancloud.cn/d9211ad3d91742bd2c4b5bcd5a444b7b_900x534.png) 为按钮添加两个行为 动画播放控制→播放元件片段→触发条件:点击→设置参数 元件实例名称:“花1” 是否循环:“不循环” 起始帧号:“2” 结束帧号:“20” 执行条件:检查元素状态→随机数1→文本或取值→等于→1 同理设置跳转“花2”播放的行为。 ![](https://box.kancloud.cn/edb0145e7726e6df5c37bf0c89e91ecd_900x532.png) ![](https://box.kancloud.cn/c5caa595b794790e1eab95f56f4ebc71_900x389.png) 设置画面出现即显示原始数值:新建图层,添加一个文本框,为其添加“出现即将计数器数值显示到‘献花数量’文本框中”的行为。 ![](https://box.kancloud.cn/963fa97232b006039b89bd10890b1ad0_900x513.png) **设置留言** 我们先新建图层,在合适的帧数上添加一个“出现即暂停”的行为物体,将舞台动画停在一帧。 在“暂停”帧数的后一帧添加“我要留言”按钮素材,同时再在下一帧制作“留言页面”,在留言区域添加输入框,为其命名为“文本输入1”。 ![](https://box.kancloud.cn/b7d67fd746999d08e5e7cd4bd1c94f13_900x528.png) 如下图,为“提交”按钮添加“提交‘文本输入1’表单”行为,提交成功或失败后都跳转舞台画面(上一帧)。 ![](https://box.kancloud.cn/b9c7b997abcea8b17b6af891c678f10a_900x531.png) ![](https://box.kancloud.cn/9bcdc629a549c7bc14a3c40c6ef333cb_900x353.png) 同时也可设置点击黑色其他区域也可跳转返回舞台画面(上一帧)的行为。 ![](https://box.kancloud.cn/eee01d65f37fa4ef85d927a4791ba642_900x532.png) 为舞台的“我要留言”按钮添加“点击跳转下一帧”行为。 ![](https://box.kancloud.cn/bc7f947def89b0e4e677df6252be26ee_900x522.png) 最后,我们可在后台查找相关提交的数据。 ![](https://box.kancloud.cn/d5907db2e62fc8336e2b03245a0b2dd4_900x531.png) 观看本节视频教程: http://cdn1.mugeda.com/course/4/4.3/4.3.12.mp4