手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

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

时间:2024-10-18 07:48:21

1、第一步:添加滑动时间轴与图片舞台下添加一个页面,页面下添加滑动时间轴,滑动时间轴下添加10张图片做子对象。

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

2、第二步:页面的属性面板,剪切设为NO,就可以看到舞台外的图片。

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

3、第三步:在图片下添加轨迹。(1)第一张图第一个关键点,XY坐标是(0,0),大小是640*1008,也就是刚好放满舞台,第二个关键点,图片在舞台上方,大小也改变了。数值可以参考截图。

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

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

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

5、第四步:添加跟随页面的流动按钮(1)在滑动时间轴下添加一个透明按钮或空的图片作为容器,为容器添加一个轨迹。这个图片的轨迹就是移动到啊每一页的围巾下方。

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

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

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

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

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

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

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

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

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

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

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

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

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

12、如果你有独特的创意想法,运用VXPLO互动大师,通过简单的几步设定完成一个微场景,打破生硬的动态图文,增加用户浏览时更有交互性和趣味性,在微信中快速传播。

© 手抄报圈