手机滑动交互案例制作

daisyzhu

我教大家做一个手机上的滑动效果，用手滑动就可以看到下一页。
制作好的案例可以直接通过微信端扫二维码，分享到朋友圈进行传播，或者直接把作品发给朋友展示。

这是案例链接：http://www.vxplo.cn/idea/J4OtGWp
也可以通过扫二维码观看这个案例


案例的主要图片


这个案例的重点是用到滑动时间轴的工具。
Step1: 在舞台上添加滑动时间轴

随后将你想要的页面素材添加在这个“滑动时间轴1”之下。比如这个案例中都是图片，注意每个图片的大小都是一样的，和舞台大小相同。


Step 2: 在每个图片下面增加轨迹，并设置位置的变化。这些轨迹会出现在同一个时间轴面板里。


Step 3: 在每个时间点上设定图片的位置，并设置位置的变化。让图片依次出现在舞台的中央即可。比如00的图片首先在舞台（坐标为0，0）上，然后001图片在1秒后出现在舞台上（坐标为0，0）。


Step 4: 按下图设置“滑动时间轴1”的属性

比例：为滑动的页面距离和时间的比例
方向：往上滑，还其他三个方向可以选择
自动跳转控制点：YES，表明到某个跳转控制点它会自动调转。
自动跳转时长：表明到这个调转控制点后自动到达目的位置的时间，这里为0.2s

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