如何用vxplo制作打开盒子那种效果的H5作品?

如何用vxplo制作打开盒子那种效果的H5作品?

如何快速制作拆开盒子的效果(无需代码)

向上划开盒子,就会出现一个小人,并且还会有一个香吻的图片。

上图为手机划屏展示的页面效果。你也可以打开微信扫一下二维码:

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

第一步:文字进场动效

页面1中有一张黑色的背景图,标题1“拆开大礼”与标题2“from VX互相大师”可添加进场动效。

第二步:盒子弹跳的效果

“盒子上”添加动效,让其有弹跳的效果,触发后延时2秒,播放次数2次,示意人去把盒子划开。

第三步:盒子的滑动时间轴

滑动时间轴下增加两张图片“盒子上”与“盒子下”,轨迹中改变y坐标,让箱子往上移,那么手指向上滑动,盒子就会向上移,有打开的效果,“盒子上”指盒子的身体,“盒子下”指下边缘。千万不要忘了这个下边缘的哦!

第四步: “盒子上”、“盒子下”、小人图片的顺序

增加一张小人的图片,放在“盒子上”与“盒子下”的中间,就会有小人慢慢从盒子中出现的效果。

(注意:如果小人的图片没有放在“盒子上”与“盒子下”的中间,就会被盒子挡住,如下图所示)

第五步:小人出现的事件

事件1:箱子划开0.3秒时,小人出现。也就是最开始的时候,小人是不显示的,因为小人比盒子高。

事件2:箱子划开0.5秒时,唇印出现,可以唇印下添加动效。

事件3:手指往回划,就是滑动时间轴为0的时候,小人隐藏。因为小人比盒子高。

时间轴、滑动时间轴、动效,如果不矛盾的话,都是可以结合起来使用的。

是不是觉得这样打开盒子的效果很有趣呢?你希望盒子打开后有什么呢?一起来属于你的“拆开盒子”吧!

更多零代码做交互效果,可以查看VXPLO互动大师网站。