H5录音机制作指南

H5录音机是一种广受欢迎的动画形式，本文整理了其制作方法，旨在为爱好者提供实用参考与帮助。

1、 导入PSD素材至编辑界面，进行布局排版，并为各元素添加预设动画效果。

2、 创建新图层，于第二帧添加关键帧并置入录音机素材。

3、 把录音机转为组件，为其两个转轴添加旋转动画。

4、 新建图层并在第2帧添加关键帧，导入按钮等背景素材。在按钮图层的适当位置插入关键帧，放入按钮按下效果的图片素材。

5、 新建图层并插入关键帧，依次添加结果页与分享页素材，完成相应布局排版。

6、 创建行为图层，绘制矩形并设置其出现后立即暂停。

7、 为打开未来录音机按钮设置点击后跳转至第2帧并停止的交互功能。

8、 进入第2帧时，需实现录音机初始静止，仅在点击录音或播放按钮后才开始旋转的效果。新建名为不动的图层，在第2帧插入关键帧并放置不旋转的录音机素材，注意清除该图层后续帧的内容。

9、 为各个按钮设置跳转功能：将录音按钮设为跳转至第5帧并停止；播放按钮设为跳转至第3帧并停止；制成按钮设为跳转至第4帧并停止，具体效果所示。

10、 将录音按钮命名为录音音频，并为其添加两个功能。

11、 在微信中设置控制录音功能，触发方式为点击操作，指定目标元素为录音音频，执行开始录音指令，录音完成后自动跳转至第二帧。

12、 点击触发，控制名为录音音频的媒体，执行暂停操作，实现声音播放的暂停控制功能。

13、 为播放按钮设置点击时播放录音音频；为播放按下按钮添加两个动作：点击后跳转至第2帧并停止，同时暂停录音音频播放。

14、 返回播放按下帧，为该按钮设置两个动作：点击后跳转至第2帧并停止播放，同时停止录音。

15、 为按下按钮添加点击事件，实现跳转至第6帧并停止播放的功能。

16、 要在按下制成按钮后自动3秒跳转至第6帧，可新建一个图层，在制成按下对应的帧处插入关键帧（确保前后均为空白关键帧），接着添加一个时长为3秒的计时器，并为其设置时间到跳转至第6帧并停止的执行动作。

17、 在结果页面的指定位置插入一个标签为姓名的输入框，合理调整其尺寸与布局，并设置默认提示文字为姓名。

18、 在分享栏中输入分享内容，例如：{{姓名}}推荐给朋友收听。

19、 最后可配上一段背景音乐。