微信H5页面动画如何制作

1、大体的流程是这样的：1. 添加元素（图片、文字等）到舞台；2. 为添加的元素定义动画；3. 定义和用户的交互行为（例如点击跳转等）；4. 导出或发布内容；

2、首先创建

4、准备好一个大小为300x250的舞台，这时候我们就可以开始制作动画内容

6、选择图片对话框是在制作动画中用的最多的对话框之一。他提供了三种上传图片的方式：选择本地文件，输入网址，通过拖拽批量上传。上嗒扬柰旦传的时候还可以指定一个目标文件夹。我们暂时采用默认上传位置即可。这个例子中我们从本地上传一个木质纹理图片。大家可以自由选择一个图片。选择图片并上传后，其尺寸、格式以及预览会显示在对话框中。如果满意了，就点击“选择”将图片添加到舞台上。

8、为了使其全屏显示，可以点击选择图片，然后在IDE右侧的属性对话框中编辑其位置和大小使其全屏显示。

10、新添加的图层会自动命名为”图层1”, 并添加在图层0的上面。

12、这是文字刚添加到舞台的样子。我们需要调整其属性。

14、在属性面板调整其参数到一个满意的样子。下面是一个调整好的样子。

16、为了制作动画，我们需要先将内容的帧数扩展至一个适合的数据。默认情况下，动画内容只有一帧，这个可以时间线面板上看到：

18、这时候时间线显示如下。注意，图层0已经包含20帧，而图层1仍然只有一帧。

20、注意观察时间线的当前帧变化，以及舞台上文字和背景图片的可见性。由于我们要在文字上定义动画，因此，按照上述同样的方法，选中图层1，然后将其也扩展至20帧。

22、这时候，图层1变成了璐围诂在浅绿色，并且在图层范围的最后一帧（第20帧）出现了一个红色的点。这表明，动画已经添加成功了。图层1中的第1帧和第20帧，定义了动画的开始、结束帧。中间的阆仫十矿帧就可以由系统自动通过插值产生了。我们可以为图层1中包含的（文字）元素在动画的开始和结束帧分别定义不同的（位置、大小等）属性，从而产生动画效果。

24、保存作品。然后从工具栏点击“播放”在舞台上预览动画效果。也可以在工具栏上点击“预览”在一个单独的窗口预览动画效果。还可以在工具栏点击”二维码“获取一个二维码，然后在手机上预览产生的动画。

26、到此为止，我们已经完成了添加元素、定义动画两个步骤。这已经可以满足相当一部分网页动画的需求了。下面我们进一步为动画添加一个最简单的跳转行为。就是当点击文字时，跳转到一个目标网页。暂停舞台的动画播放，选中背景图片，然后在其属性面板上，为其添加一个”链接“行为，地址指向百度，打开方式选择“外部打开”。

28、为了在你的网站使用这个动画内容，最简单的方式，就是导出完整的动画包，并内嵌到自己的网站中。记住在导出前保存你的作品。然后在工具栏选择导出按钮，或者在菜单中选择”文件/导出/动画”。该操作会将动画内容打包下载到你的硬盘上。

29、导出的动画包中包含有动画播放所需要的脚本、样式、页面、图像等。双击其中的index.html文件可以直接在浏览器中观看动画内容或者通过iframe的方式嵌入动画。