不用编程，做手机页面切换效果

blueblue

我给大家分享一个使用vxplo互动大师制作的，不用写任何代码就能做出手机页面切换效果的教程介绍。

先看一个简单的效果，只是用不同颜色区分了页面，在手机端可以上下滑动。


像这样简单的效果可以直接在舞台上插入页面，在页面属性中进行一个简单的设置，即可完成。登录VXPLO互动大师网页，在我的作品页面下方新建一个手机作品。在舞台上插入页面。


为不同的页面设置不同的背景颜色后，如果想上下翻动，在页面属性中的选择“向上”，翻页效果选择你觉得合适的速度即可。这些曲线代表的是速度的加速度，比如先快后慢，先慢后快等，最简单的就是选择线性。




在其他页面做同样的设置，预览就可以观看了。

当你想左右滑动的时候，除了设置页面属性上的左右滑动之外，注意舞台对象的属性也需要设置为左右。


点击预览就可以看到进行左右滑动的效果。


另一种方法是利用滑动时间轴来完成效果。例如下面的案例，在简单的页面上看起来与方法一差不多，但是利用滑动时间轴可以做出更多自然过渡的效果。我们先介绍最基本的。


在舞台上先插入滑动时间轴，在分别插入三个图片（每个图片为一个页面），并在图片下插入轨迹。


轨迹上的可以按时间来添加关键帧，在每个图片的关键帧上比较重要的就是X，Y的坐标属性。当第一张图显示在舞台中央的时候，它的坐标是（0，0），（参考图片左上角为图片坐标）当滑动后，它的位置就会变化到舞台的上方（0，－1008）（因为舞台的高度是1008），同时第二张图片的坐标位置为（0，0）。




提问：图片2在时间为0的时候的坐标是多少呢？图片3呢？若有其他图片呢？
回答：一般我们建议其他图片一开始就放在舞台下方，即（0，1008）。

另一个注意点是如果你希望在滑动过程中，轻轻一下页面会自动跳转，可以在滑动时间轴的属性面板上将自动跳转设置为YES。（你也可以尝试设置为NO，看看会产生怎样的效果。）


乍一看，滑动时间轴的设置有些复杂，但是它的好处是，你可以有更多灵活的变化，而不像方法一那么死板。比如你可以在图片一的滑动末尾的关键帧的地方，将图片的透明图设置为0，那在滑动的同时你能看到的是图片也渐渐隐去的效果。

还有可以利用旋转，缩放等图片属性面板中的参数，做出各样的效果。比如下面一边滑动，页面一边飞出的效果。


设置的关键在于图片的轨迹的末尾，将透明度，大小，及旋转设置一定的参数。


可以进入vxplo互动大师官方网站学习和注册使用该工具做出各种炫酷的交互效果：www.vxplo.cn