应用Hype制作英文字母卡片学习小动画

对于很多小朋友来说，英文的学习会显得枯燥而乏味。但如果是借助一些视觉性的工具，比如学习英文字母用的卡片动画，可提高学习的趣味性，让小朋友更容易接受。

比如，如图1所示的卡片动画，是通过使用Hype的时间线功能制作的，另外，该动画也使用到了元素的不透明度设置功能。接下来，一起来具体看看怎么制作吧。

图1：英文字母卡片学习小动画

一、创建文本运动路径

首先制作文本Aa由中间移动到左上角的动画效果。

如图2所示，创建文本元素。

图2：创建文本

然后输入文本Aa，作为卡片动画的开始部分。

图3：输入文本

接着，依次进行以下操作：

1. 打开Hype的自动记录功能

2. 将时间线上的指针移动到目标时间点

3. 将文本Aa由中间移动到左上角

4. 打开文本Aa的排印检查器，将其字号缩小一些

图4：创建运动路径

二、添加学习卡片

完成文本Aa的动画制作后，接着完成卡片右侧的图片与单词出现动画制作。

如图5所示，先创建文本Apple。

图5：创建文本Apple

然后，如图6所示，在开始帧处，添加不透明度关键帧，并打开文本Apple的元素检查器，将文本Apple的不透明度设为0，使其变成透明的状态。

图6：设置不透明度为0

接着，如图7所示，将指针移动到文本Aa移动动画的结束帧处，然后，再次添加不透明度关键帧，并将文本Apple的不透明度设为100，使其变成不透明的状态。

图7：设置不透明度为100

接着，进行图像的出现动画制作。

如图8所示，在当前场景中插入图像。

图8：插入图像

然后，如图9所示，将图像移动到右上角，并调整图像的大小以符合场景需要。

图9：完成图像的插入

与文本的出现动画相似，如图10所示，图像的出现动画也是通过在开始帧添加不透明度关键帧，并设置0不透明度来实现的。

图10：设置不透明度为0

同样的，在结束帧添加不透明度关键帧，并设置100不透明度。

完成以上操作后，我们就可以获得文章开头的英文字母卡片动画效果。

图11：设置不透明度为100

三、小结

综上所述，通过使用Hype的属性关键帧功能，可进行属性动态变化的动画制作。比如本例所使用的不透明度关键帧，可控制元素在不同时间点的出现与隐藏。