工具/原材料
H5页面的制作素材，包括图片，音乐，文案等你的脑洞
方法/步骤
1大体的流程是这样的：1. 添加元素（图片、文字等）到舞台；2. 为添加的元素定义动画；3. 定义和用户的交互行为（例如点击跳转等）；4. 导出或发布内容；
2先创造。
3.然后你需要选择一个动画大小。在这个例子中，我们选择300×250，这是适合移动设备动画的典型大小。选择尺寸后，按OK继续。
4.准备一个300×250大小的舞台，这个时候我们就可以开始制作动画内容了。
5.我们给舞台添加了背景图片。从ide左侧的工具栏中选择“图片”按钮，打开选择图片的对话框。
6.“选择图片”对话框是动画中最常用的对话框之一。他提供了三种上传图片的方式:选择本地文件，输入网址，拖拽批量上传。您也可以在上传时指定目标文件夹。我们可以暂时使用默认的上传位置。在这个例子中，我们在本地上传了一张木质纹理图片。你可以自由选择图片。图片被选中并上传后，其大小、格式和预览都会显示在对话框中。如果您满意，请单击“选择”将图片添加到舞台。
7.由于添加的图片尺寸(370×280)大于舞台，图片将被缩小并显示在舞台中央。
8.要使其全屏显示，可以单击选择图片，然后在ide右侧的属性对话框中编辑其位置和大小，使其全屏显示。
9.接下来，我们为舞台添加一个段落。首先，在IDE上方的时间轴上，点击时间轴左下角的“新建图层”，添加一个新图层。
10.新添加的层将自动命名为“层1”并添加到层0的顶部。
11.下面我们来补充一下文字。从ide左侧的工具栏中选择“文本”，在舞台上单击鼠标添加文本。
12.这是刚刚加到舞台上的词的样子。我们需要调整它的属性。
13.单击左侧工具栏上的选择工具，然后选择添加的文本。文本的属性出现在右侧的属性面板中。
14.在属性面板中将其参数调整到满意的外观。这是调整后的样子。
15.到目前为止，我们已经完成了第一步:向舞台添加元素。接下来，我们为添加的文本定义一个简单的动画。在继续之前，让我们保存工作，单击IDE顶部工具栏上的“保存”按钮，或者从“文件”菜单中选择“文件/保存”。第一次保存工作时，需要提供一个文件名。保存的舞台截图将作为作品的缩略图存在。以后再次保存时，不需要提供文件名，作品缩略图会根据最新的舞台截图进行更新。
16.为了制作动画，我们需要首先将内容的帧数扩展到一个合适的数据。默认情况下，动画内容只有一帧。这可以在时间轴面板上看到:
17.为了制作动画，我们现在将动画帧数调整为20帧。单击时间轴上的第0层，选择第20帧，然后单击鼠标右键，并从出现的菜单中选择“插入帧”( F5)。层0中的帧数可以扩展到第20帧。也可以选择第20帧，直接按键盘的F5键，达到同样的效果。
18.此时，时间线如下所示。注意，层0已经包含20帧，而层1仍然只有一帧。
9.请注意元素(图像、文字等。)只在层的范围内可见。要了解这一点，可以单击工具栏上的“播放”按钮来预览舞台上的作品。
19.注意时间轴的当前帧变化，以及舞台上文字和背景图片的可见性。由于我们要在文字上定义动画，按照和上面一样的方法，选择图层1，然后展开到20帧。
20.你终于可以开始添加动画了。在时间轴上，单击第1层中1到20帧中的任意帧，右键单击，然后在出现的菜单中选择“插入关键帧动画”。
21.此时，图层1变成浅绿色，图层范围的最后一帧(第20帧)出现一个红点。这表明动画已成功添加。第1层中的第1帧和第20帧定义了动画的开始帧和结束帧。中间帧可以由系统通过插值自动生成。我们可以定义不同的(位置、大小等。)动画开始和结束帧处第1层中包含的(文本)元素的属性，从而产生动画效果。
22.选择时间轴上第1层的第一帧，选择ide左侧的“变换”工具，然后选择舞台上的文本。您可以缩放和旋转文本。您也可以直接在属性面板中调整其属性。在本例中，我们将文本的初始透明度设置为10，将其旋转180度，稍微缩小其大小，并将其放在舞台的中央。调整后的属性如下图所示。
23.保存工作。然后点击工具栏中的“播放”，预览舞台上的动画效果。您也可以单击工具栏上的预览，在单独的窗口中预览动画效果。也可以点击工具栏中的“二维码”获取一个二维码，然后在***上预览生成的动画。
24.默认生成的动画会一直循环。如果不想循环，可以通过菜单项“动画/循环”切换循环状态。
25.
到目前为止，我们已经完成了两个步骤:添加元素和定义动画。这已经可以满足相当一部分网页动画的需求了。让我们进一步将最简单的跳跃行为添加到动画中。当你点击文本，你跳转到一个目标网页。
暂停舞台的动画，选择背景图片，然后在其属性面板上向其添加“链接”行为。地址指向百度，打开方式是“对外开放”。
26.通过预览窗口再次检查动画(注意，它不是在舞台上播放的)。点击背景图片，你将导航到网页。至此，一个简单的动画已经完成，H5动画没有编码是必要的。最后一步是导出。
27.为了在您的网站中使用这些动画内容，最简单的方法是导出完整的动画包并将其嵌入到您自己的网站中。请记住在导出之前保存您的工作。然后在工具栏中选择导出按钮，或者在菜单中选择“文件/导出/动画”。此操作会将动画内容打包并下载到您的硬盘上。
28.导出的动画包包含脚本、样式、页面、图像等。动画播放所需。双击index.html文件，直接在浏览器中观看动画内容，或者通过iframe嵌入动画。
本文来自北蕭投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/605973.html
微信扫一扫 
