22 .走马灯效果制作

小常发表于:2018年01月22日 12:14:12更新于:2019年01月08日 11:47:25

视频教程



  • 效果预览

0015a6fe03d415988ee77021c8b9b89

根据现有的一镜到底组件,打造炫酷的走马灯效果。如图:

0015a6fe1135a322546a691cf2d4f12

走马灯可以实现的效果比较酷炫,但制作起来并不困难,在意派Epub360编辑器中,我们是结合Layer来制作的,具体看下:


  • 走马灯组件位置

image.png


  • 走马灯组件内容编辑

在添加走马灯组件之前,先到切换Layer页面去制作要旋转的画面

image.png

  • 内容画布设置

三、layer 页面的尺寸,根据要显示的手机屏幕尺寸一致。建议做得足够大,大到跟自己选择的画布最外框尺寸一致。

1.我现在选择的是370X568px的作品画布尺寸,在做的时候,就要设置layer画布尺寸为370X568px,防止在个别手机中上下漏白边。

image.png

2.完成第一个画面的尺寸修改及图片元素的布局后,可以通过复制粘贴layer页面的方式,制作其他的页面。

image.png

  • 添加走马灯组件

1.点击高级组件中的走马灯组件,弹出layer素材库窗口。

image.png

2.一次选中多个layer画面,点击插入即可。

image.png

3.添加完成后,在右侧面板中调整下尺寸位置,尺寸跟外框尺寸一致,走马灯组件画面铺满画布即可。

image.png

  • 预览效果

点击编辑器左上角预览或者用手机扫描二维码预览。预览时需要注意,要左右滑动屏幕界面,画面才可以播放,如图:

0015a6564bce19d4552687774d5b629

  • 相关功能设置

指定旋转中心:可以指定组件四边作为旋转中心

可设置自动播放/播放速度

可滑动(两个方向)

设置单个画面子元素触发器

设置画面间距

支持重力感应

一、指定旋转中心:

我们以手机屏幕的四个边缘分别为四个轴线,来控制走马灯组件中的图片以哪个轴为基准线,进行多张图片的轮番旋转

  • 0015a698a2fa567d953aa59aa40c08e

二、可设置自动播放/播放速度:

image.png

三、手势可滑动(两个方向)

0015a699ccb4348d4526b0a5bc3607f

四、画面自动播放

即切换到放有走马灯组件的页面时,走马灯画面自动播放。

image.png

五、设置单个画面子元素触发器

切换到当前帧画面时的触发;

image.png

手势指定帧画面的触发;

layer页面内元素的相互触发。

image.png

六、设置画面夹角

image.png

七、支持重力感应

image.png