微信H5微场景之跟随页面的流动按钮做法

卡哇伊的渣渣

向上滑动页面翻页，上面的图片向上缩小，下面的图片向上切换出来，同时，流动按钮“加号”会移动位置，点开移动按钮会出一张围巾的小图，小图与模特身上的围巾是对应的，点击小图，还可以跳转到店铺。





利用VXPLO互动大师工具，你也可以很快地制作这样的一个交互效果！



第一步：添加滑动时间轴与图片

舞台下添加一个页面，页面下添加滑动时间轴，滑动时间轴下添加10张图片做子对象。





第二步：在图片下添加轨迹。页面的属性面板，剪切设为NO，就可以看到舞台外的图片。



（1）第一张图第一个关键点，XY坐标是(0,0)，大小是640*1008,也就是刚好放满舞台，第二个关键点，图片在舞台上方，大小也改变了。数值可以参考截图。











（2）第二张图第一个关键点，XY坐标是(0,1008)，大小是640*1008，放在舞台下面，第二个关键点，图片在舞台上，大小还是满屏，第三个关键点，图片在舞台上方，并且缩小了。数值可以参考截图。其余图片也是同样的设置。









第四步：添加跟随页面的流动按钮

（1）
在滑动时间轴下添加一个透明按钮或空的图片作为容器，为容器添加一个轨迹。这个图片的轨迹就是移动到啊每一页的围巾下方。











（2）
容器下添加一个时间轴，时间轴下添加“加号”的图片，图片下添加轨迹。加号这个图片会明暗变化，提示用户去点击。







第五步：添加围巾小图

在滑动时间轴下添加一个围巾的容器（可以是透明按钮，也可以是空的图片），容器下加10张小图。为每一张小图，添加轨迹与关键点，设置关键点，让小图会跟着大图运动与缩小。







第六步：点击流动按钮出现小图

舞台下添加一个计数器，流动按钮里的加号图片下添加一个事件，点击加号图片，计数器加1，实现点击同一物体出现不同效果。计数器初始值为0，计数器下添加4个事件。





当计数器是奇数时（点击1次），旋转45度，加号变成叉号。但计数器是偶数时（点击2次），旋转角度为0，图片回到加号状态。







当计数器是奇数时（点击1次），滑动时间轴里的围巾小图父对象，显示。但计数器是偶数时（点击2次），围巾小图隐藏。







第七步：分享作品

保存作品，回到我的作品页面中，点击分享按钮，可以把这个地址分享给朋友，或者扫描二维码，在手机上观看，还可以分享到微信朋友圈。





如果你有独特的创意想法，运用VXPLO互动大师，通过简单的几步设定完成一个微场景，打破生硬的动态图文，增加用户浏览时更有交互性和趣味性，在微信中快速传播。
任何技术性的问题可以加入“VXPLO互动大师技术服务”群：301817884
或者点击“VXPLO互动大师”直接进入官网体验
VXPLO互动大师欢迎对交互设计有想法的各位朋友们的加入！