实例：Hype制作动态个人主页页面（三）

这是使用Hype软件制作动态个人主页页面的最后一节，在本节中小编将会使前两节中制作的网页页面动起来，让网页看起来更生动更吸引人，瞬间提升整个个人主页的档次。

关于网页的动态效果可查看本教程第一节《Hype制作动态个人主页页面（一）》中的动图1，接下来跟着小编一起制作网页页面动态效果吧。

先打开前两节中制作好的工程项目，目前制作好的网页预览效果如下图1所示，这是一个展开的个人主页页面，顶部的个人信息（顶部封面、个人头像）被十字形信灰色封覆盖着。

图1：前两节网页预览

第二步：选中“顶部”这个组，确保此时的时间线在起始0秒位置，然后在“度量检查器”中，设置该顶部组沿着X轴方向旋转-180度，如下图右下角红框，完成后此时的个人主页展示如下图。

图2：X轴旋转-180度

第三步：选中“Badge”这个组，也就是选中所有的元素，然后点击“录制”按钮，录制一个从00:00:24到00:02:09，沿着直线路径移动的动画，具体路径如下图正中间红框蓝色线所示。

图3：录制移动动画

第四步：选中“顶部”组，录制一个从00:01:00到00:02:15的，顶部组沿着X轴从-180度到0度旋转的动画。

第五步：选中“十字形”组，然后继续保持Hype的“录制”动画状态，录制一个从00:01:20到00:01:22，不透明度从100到0的动画；再选中“信封上页”这个灰色矩形，录制从00:01:00到00:01:23，不透明度从100到0的动画，这样就完成了十字形信封向上翻转并逐渐消失的动画效果。

此时整个项目的动画时间线如下图4所示，通过录制4个动画，就能完成整个个人主页页面翻转展现的动态效果，大家是不是感觉很神奇呢？

图4：项目动画时间线展示

最后，为了保证动画效果比较好，使其看起来比较流畅，还需要对上述的动画效果类型进行修改。选中带有动画的元素或者组，然后点击时间线右下角的“渐入/渐出”，修改其默认的动画效果，从“渐入/渐出”修改为“正弦型渐入/渐出”，即第五项，如下图5红框所示。

图5：修改时间线动画类型

上述步骤完成以后，关于制作动态的个人主页页面的所有教程也就结束了，小伙伴们跟着小编一步一步地把上述步骤完成，也可以很快做出一模一样的页面效果。