简单几步做高大上的手机翻页效果

简单几步做高大上的手机翻页效果

互动大师VXPLO是一款兼具在线交互式网页设计工具和互动作品分享平台的一款设计工具，支持HTML5和Flash，不用任何代码便可生成HTML网页，支持所有主流浏览器。我们的工具不需要任何插件，学习难度低，只要了解工具的各个属性加上逻辑分析能力就能高效制作出你想要的互动作品。

今天我们介绍一下如何使用VXPLO互动大师来制作手机翻页效果的流程。先来看一下翻页的完成效果，手指上下滑动时，页面会翻转看到各个颜色的变化：

这个效果的关键是做图片的变形，按手指滑动的时间轴来安排图片形变的样式。

为了看起来的效果是翻页的，首先准备的所有图片素材的尺寸和图案是一致的，保证看起来没有特别的差别。此外图片需要做一些处理，比如上下翻页都需要上下对半切图，左右翻页的需要左右对半切图。

准备好素材就可以打开VXPLO互动大师的编辑器在舞台上进行排版了。

在我的作品页面下，选择创建手机案例。

插入滑动时间轴工具，此工具自带时间轴属性，且在手机上由手指的滑动控制时间轴的播放。

在滑动控制时间轴下插入图片素材。

小贴士：可以先插入第一张和第二张图确认好位置之后，用复制粘贴的手法添入其他图片素材。这样的好处是，新的图片只要在原有图片的拷贝版本上双击，上传新图替换即可。保证了图片位置和大小的一致性。

在每张图片下增加轨迹，然后设置图片的变形节点。

这是最关键的一步，翻页的效果实际为一个图片形变的视觉差。手指滑动时，图片1-2渐渐向中间形变为一条细线，同时，图片2-1开始从一条细线渐渐变形为完整的半张图。

图片1-2的起点到终点的变形过程：

另外要特别注意的是，

1）1-2渐渐向上变形的时候，2-2在底下也要设置为可见。

2）其他图片的初试可见可一开始设置为NO，这样使得在手机端观看作品的时候不会一打开加载所有的图片，加快加载速度。

竖向的效果原理相同。只是形变的方向是向垂直的中心线靠拢。