利用Hype的场景跳转功能制作手机页面切换效果

Hype可以使网页变得更加多样化，制作各种炫酷的动画效果。大家应该看过一些网页广告，里面就有手机翻屏动画等高大上得动画效果，那么如何使用Hype制作这种手机翻屏页面切换效果呢？其实用Hype内置的场景切换功能就可以实现。

下面小编就通过一篇教程实现这一酷炫网页效果，先行声明，本教程使用的是Hype 4版本。

一、场景设置

首先，新建一个场景，然后在Hype右侧菜单栏中，切换到“场景”选项卡，点击场景的预设大小，选择场景的型号，这里小编选择iPhone6，具体操作如下图1所示。

图1：设置场景预设大小

然后选择“元素”菜单栏，选择“矩形”，绘制一个和场景大小相同大小的矩形。

图2：创建矩形图案

第二步，为矩形填充一个蓝色的背景色。选择右侧的“元素”选项卡，选择填充颜色为蓝色。

图3：填充矩形蓝色背景色

第三步，复制已经做好的第一个场景。鼠标右键点击该场景，点击“复制场景”，如下图4。

图4：页面效果

第四步，利用第三步的复制场景，复制出2个一模一样的场景后，然后切换Hype右侧菜单到“元素”选项卡，选中第二个场景，设置填充颜色为黄色，选中第三个场景，设置填充颜色为红色，操作完成后，场景列表如下图5所示，这3个场景分别用于模拟手机的3个不同页面。

图5：场景列表

二、动画设置

完成上述场景设置以后，接下来就开始效果制作。

第一步，选中第一个场景，然后在Hype右侧菜单的场景选项卡中，找到下方的“向上推送时”，选择“跳到场景”，选择场景为“下一个场景”，如下图6所示。

图6：选择下一个场景

第二步，找到“向下推送时”，选择“跳到场景”，选择场景为“前一个场景”，如下图7所示。

图7：设置向下推送时跳到前一个场景

第三步，在余下2个场景中也设置场景的跳转，当向上推送时，跳到下一个场景，当向下推送时，跳到前一个场景，设置完成以后手机页面切换效果就做好啦。

最后，大家在自己的iOS移动设备上，进行效果预览，具体操作步骤如下。

首先，从iOS设备的 App Store中，搜索并下载Hype Reflect，如下图8。

图8：下载安装Hype Reflect

第二步，确保Mac电脑和iOS设备连接到同一个Wi-Fi网络中，也可尝试连接手机热点。

第三步，在Hype预览按钮中，找到自己的iOS设备,点击该设备，如下图9所示，然后点击“预览”，即可在移动端预览效页面切换效果。

图9：选择iOS设备

好了，这就是小编整理的利用Hype的场景跳转功能制作手机页面切换效果的具体教程，之后还会有更多更有趣、有用的Hype教程发布在城东书院，欢迎大家前往关注！