20.一镜到底组件

小常发表于:2017年11月15日 13:44:57更新于:2018年01月30日 17:28:22

点击下载素材包

教程视频网页版

百度云盘——密码:zq1v

一镜到底可实现更多炫酷的画面交互效果。

我们已经使用该组件做了一个简单的DEMO,为大家展示新功能的效果。

0015a0c0cc6d2bfaea1ad8eba3d61d7

快来扫码体验

0015a0d699e6227449f5acbe91ec685


效果原理:

对于该组件的理解,是基于原有的X轴、Y轴视觉基础,在Z轴上将多个元素前后放置,并设定前后元素间距,同时也控制了元素出现的时长效果。如图:

0015a0e47c009522a0daba71aea5f51

素材准备

图片部分,需要上传前保证是PNG格式的,保证边缘没有被裁切的痕迹;

文字部分;可以直接在Layer页面使用段落组件编辑。

注意事项:

  • 一镜到底组件建议画面层控制在50个画面层以内,如果素材相对较小,可以控制在60个层左右;

  • 每个画面层之间的间距,特别是素材较大的情况下,建议层间距设置为500PX及以上,小一些的画面素材暂时不做强制,但是需要在发布前在性能相对一般的手机上进行测试,保证流畅。

需要结合哪些组件来使用

Layer容器组件、图片组件、文本组件、一镜到底组件

添加方式:

点击高级组件下的一镜到底组件使用

image.png


如何设置:

因为要结合Layer容器使用,所以首先要却换到Layer页面进行素材的编辑。

  1. 每个Layer页面放置一个或多个要展示的元素(默认Layer画布尺寸可暂不修改。)

  2. 每个元素都可以添加动画,在播放一镜到底画面的同时一起播放动画。如果选择自动播放动画,默认打开当前页面时播放动画。也可设置等待触发器触发,给画面中的某个元素添加触发器触发该动画的播放。

image.png编辑版式文档_-_后台管理系统.jpg

2.切换到页面中,点击高级组件中的一镜到底组件添加多个Layer容器。

一个layer中的元素表示一镜到底中的一层画面。

image.png

3.最后可设置间距,控制每两层元素间的距离,影响到每个元素的出现时间,每个层之间的间距都可以自定义调整。

也可去掉勾选“初始视距修正”选项,来调整第一层元素与屏幕基准点的距离。

编辑版式文档_-_后台管理系统.jpg

修改/替换素材:

不需要切换到layer中,只需选中一镜到底组件,右侧找到要替换的素材layer,双击预览图,即可切换到layer页面修改。

image.png

播放设置:

1.可以设置观看者手动控制播放

点击勾选可拖动即可。

image.png

2.也可以选择自动播放

自动播放:勾选自动播放,在切换到一镜到底组件当前页时,自动播放一镜到底画面;

自动播放速度:播放速度的值越大,播放的画面飞出越快。

image.png

以上自动播放跟播放速度是结合使用的。

也可在设置自动播放的同时设置可拖动,在一镜到底自动播放时也允许观看者手动控制。

image.png

3.切换到指定帧:

可以在放置一镜到底组件的页面上,放置其他元素,用其他元素去触发一镜到底画面的切换,如添加一个按钮,在某个手势动作时切换到指定帧,切换时间目前为固定时间1秒(s)。

image.png

4.一镜到底播放触发器:

开始播放时(第一帧画面出现时)、结束播放时(最后一帧画面出现时)的触发器。

image.png

5.layer页面中的交互设置

可对layer页面中的元素设置触发器,目前可实现除了常规的触发器行为,还有视音频播放等。

设置如图:

image.png

注: 该子元素触发器触发的是放置在页面中某个元素的动画,非layer中的元素的动画;

如果想要触发页面中的layer中的某个元素动画,需要切换到layer页面中就设置好。如点击layer页面中某个元素,触发同一个layer页面中的另一个元素动画,如图:

此图为切换到layer页面中操作的。

image.png


手势滑动速度控制

上下划屏可以控制画面的播放,手指滑动的快慢速度影响画面播放的速度,这个可以在作品中,做一个滑动提示的元素动画,给用户提示。

一镜到底组件对手动控制播放时设置滑动速度,暂时不支持,但后期会继续优化。