epub怎么打开_H5教程：Epub360实现一镜到底功能效果

原标题:H5教程:Epub360实现了“一面镜子到底”的功能。在

HTML5中，通过拉伸镜头的元素，场景具有远近感，这在业内通常被称为“一面镜子到底”。让我们以Epub360为例，介绍一下“一面镜子到底”的实现方法

效果如下:

案例链接

2，组件效果原理:

对组件的理解是基于原始的x轴和y轴视觉基础，在z轴上来回放置多个元素，设置元素之间来回的间距，并控制元素的持续时间效果如图:

3所示，应用场景

适用于时间线叙事，如大事记、内容枚举、无关内容显示等。

“转向金融一体化新时代，南方作为新的！”

“邦蒂金秋银月享受美好生活”

“2017中国蒙牛可持续发展报告”

“清远30年时光之旅”

“2017时光穿梭，带您走过辉煌的

”2017内蒙古冬季旅游那达慕和第18届中国(呼伦贝尔)冰雪那达慕“

”一镜物种起源 此脱醛净化器太硬芯”

4，材料准备

点击下载材料包

或文本附件下载材料结尾，仅供商业使用传统的一镜底图片是多张PNG图片，上传前需要保证为PNG格式，以保证边缘不被剪切；可以使用段落组件在图层页面上直接编辑文本从一面镜子到底部的组件建议图片层应该控制在50个图片层内。如果材料相对较小，可以控制在60层左右。考虑到手机的性能，每面镜子底部图片的大小应该控制在70KB以内。在材料较大的情况下，各画面层之间的间距设置为500像素以上，较小的画面材料暂时不强制，但需要在发布前在性能相对一般的手机上进行测试，以保证流畅。

5。组件用法教程

基本用法

1。首先编辑底部组件的镜像内容，然后向底部组件添加镜像切换到图层页面编辑镜像的内容每个图层页面放置一个或多个要显示的元素

2。切换回页面，单击高级组件中的镜像，将多个层容器添加到底部组件

3。一层中的元素代表镜子底部的一层图像

3。最后，可以设置间距来控制每两层元素之间的距离，并影响每个元素的出现时间。每层之间的间距可由用户调节。您也可以取消选中“初始视距校正”选项来调整第一个图层元素和屏幕参考点之间的距离。

4。修改/替换材质:不需要切换到图层，只需选择一个镜像底部组件，在右侧找到要替换的材质图层，双击预览图，切换到图层页面进行修改

5。回放设置您可以将检视器设定为手动或自动播放。手动播放点击检查拖动

也可以选择自动播放

:选中“自动播放”,在切换到镜像到底部组件的当前页面时自动播放镜像到底部的图片；

自动播放速度:播放速度值越高，播放的图片飞出越快。

以上的播放速度与自动播放相结合

也可以设置为在设置自动播放的同时可拖动，允许观看者手动控制镜子何时自动播放到底部。

高级用法

1。切换到指定的帧其他元素可用于触发从一面镜子到底部的切换，例如，当按下元素的持续时间时，在开始处添加按钮以切换到指定的帧。切换时间目前是固定时间的1秒。

2。一面镜子到底部播放触发器播放开始时(第一帧出现时)和播放结束时(最后一帧出现时)触发

3层页面中的交互设置可以为图层页面中的元素设置触发器。目前，除了正常的触发行为外，还可以实现视频和音频回放。设置如下:

4。手势滑动速度控制上下两个屏幕笔画可以控制画面的播放，手指滑动的速度影响画面的播放速度，在工作中可以制作滑动提示的元素动画来提示用户。