旋转菜单翻页

卡哇伊的渣渣

生活中我们在手机微信上看到的H5页面翻页花样有很多，有翻书的翻页、有最普通的上下翻页，还有更加特别的旋转翻页等等，也许大家都很好奇这些翻页是怎么做出来的。其实这些翻页效果，包括更多的翻页效果，都能用一个工具做出来。这个强大的H5免费在线制作工具到底是什么呢？那就是VX互动大师了。今天我利用这个工具给大家讲讲旋转翻页的效果吧！

第一步：创建手机案例

1.进入互动大师，点击我的作品——创建作品——手机案例



2.设置舞台大小为640*1008，这是手机案例常用的大小。



3.选中舞台，添加6个页面。分别选中页面2、3、4、5、6，添加一个返回按钮，为了辨别，我们把这五个页面都设置成不一样的背景颜色。



4.因为今天我们的这个案例的主题是“2014公路”，所以为了方便，我们将页面重命名为菜单、打老虎、世界杯、冰桶挑战、APEC蓝、终于告别。



第二步：利用滑动时间轴制作滑动旋转

1.选中“菜单”，添加一个滑动时间轴，并设置其宽高为舞台大小，xy坐标为（0,0），这样可以防止出现别人在观看我们作品时出现滑动时间轴显示不全的问题。



2.添加旋转背景，并为其添加轨迹。选装背景其实是一张1500*1500的图，由于舞台默认设置被剪切，所以我们看不完旋转背景的全部，只要把舞台的剪切设置为No就可以看到完整的旋转背景。





3.选中轨迹，添加控制点来设置它位置。我们要制造旋转的效果，所以我们的控制点设置主要在与旋转。例如第一点的旋转是0，第二点的旋转是-72，如此类推。







第三步：制作跳转页面

1.回到控制点1的位置，将舞台剪切设置为NO，选中“旋转背景”，在相应的位置添加可以通过点击它来跳转其他页面的透明按钮并重命名为“打老虎”、“世界杯”、“冰桶挑战”、“APEC蓝”、“终别告”。







2.为了让别人知道牌子可以点，我们在这里添加一个点击提示圈让它不断地在闪。先添加一个时间轴，设置为两秒，且选择自动播放并循环播放。然后在添加图片并为其在时间轴下添加轨迹。







3.添加控制点，通过xy坐标、宽高和透明度的改变，为点击提示圈设置动画。







4.做好之后可以通过复制粘贴的方法粘贴到别的透明按钮下。





第四步：设置跳转页面

1.分别在5个透明按钮下的点击提示圈添加事件，实现点击它可以跳转页面。这里我们将触发条件设置为点击，目标对象设置为舞台，目标动作设置为跳转页面，页面分别设置为“打老虎”、“世界杯”、“冰桶挑战”、“APEC蓝”、“终别告”。





2.选中舞台，将剪切改回YES。



3.选中其他5个页面下的透明按钮，在透明按钮下添加事件，触发条件为点击，目标对象为舞台，目标动作为跳转页面，页面为舞台。设置之后在跳转页面通过点击按钮能返回菜单页。



第五步：旋转提示图标制作

1.为了让别人知道可以旋转，我们还需制作一个提示图标动画，选中菜单添加一个透明按钮，重命名为左右滑动提示后选中这个透明按钮，添加一个时间轴，设置时长为2.2.秒，将时间轴设为yes和循环播放设为yes。



2.在时间轴下添加一个左右箭头的标志“hand”。



3.在时间轴下添加一个透明按钮，在选中透明按钮，添加“手势”图。



4.为透明按钮1添加一条轨迹，并添加控制点，通过控制点来设置手势左右晃动的动画。







任何技术性的问题可以加入“VXPLO互动大师技术服务”群：301817884
或者点击“VXPLO互动大师”直接进入官网体验
VXPLO互动大师欢迎对交互设计有想法的各位朋友们的加入！