滑动浏览的微网站

卡哇伊的渣渣

现在H5可以说是爆了朋友圈，各式各样的H5页面，我们几乎每天都能在朋友圈上看到朋友分享出来。想要做一个特别一点的H5页面，怎么办？其实H5还能做一个微网站，今天我来用vx互动大师这个在线工具来告诉大家怎样做吧！顺带说一句，个人感觉VX互动大师真是一个很强大的H5在线制作工具，最重要的一点是，它免费啊！而且我们用它就不需要苦逼地写代码了，就算不懂代码也能制作。

第一步：创建手机案例

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



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



3.新建4个页面，并分别选中每个页面上传一张图片。







第二步：设置滑动时间轴

1.选中舞台，添加一个滑动时间轴，添加滑动时间轴的目的是滑动的时候页面跟随着移动，为了更好的显示，我们将滑动时间轴的xy坐标设置为（0,0），将宽度设置为舞台的宽度，即640。



2.选中滑动时间轴，添加4张图片，并为其添加轨迹。



3.分别选中4条轨迹，添加控制点并设置其4张图的x坐标位置，制作滑动时间轴的滑动动画。



4.以第一个幅图为例，由于是最先显示出来的图，所以设置其xy坐标为（0,0），在第2控制点时，我们已经看不到第一张图了，但其实它是通过x坐标的位移造成的动画，实际上第一张图现在已经在舞台的左边了，由于舞台默认剪切，所以我们是看不到它的。一次类推制作来设置其他图片的控制点和它的位置。









第三步：滑动翻页效果制作

1.选中滑动时间轴，添加为了方便设置，我们前面已经将每条轨迹的控制点之间的间隔都设置为1秒，在滑动时间轴下添加四个事件，触发条件为播放时间，时间分别为0,1,2,3，目标对象是舞台，目标动作是跳转页面，而页面分别是页面1、页面2、页面3、页面4。



2.添加定位原点的图片及蓝点的图片。



3.在滑动时间轴下添加四个事件，制作滑动页面时蓝点的光标移动效果。事件5、6、7、8的触发条件均设置为播放时间，由于每条轨迹间的控制点的距离都是1秒，所以时间从0开始，分别是0、1、2、3，目标对象分别是蓝点1、蓝点2、蓝点3、蓝点4，目标动作都是隐藏同层控件，这样其中一个蓝点出现的时候其他三个蓝点都会隐藏。



4.滑动翻转的微网页效果完成了！是不是很简单？赶紧去互动大师官网上做一个属于你自己的微网站吧！

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