22 .走马灯效果制作

小常发表于:2018年01月22日 12:14:12更新于:2019年07月19日 15:22:49

视频教程


一、案例效果

0015c8f7758df66008669224943212e

0015a6fe1135a322546a691cf2d4f12

案例链接


二、组件效果原理

0015a698a2fa567d953aa59aa40c08e

三、应用场景

适合多画面展示,内容罗列。

案例《给你一份可以旋转的中秋祝福 》


四、素材准备

需要准备PNG格式或者JPG格式的满屏图即可,右键单击另存为下图到本地,即可尝试效果。

0015d316f9a879e555d6e3501804760

也可至文末附件下载图片素材,非商用,仅供学习使用。


五、组件教程

基本用法

1.在添加走马灯组件之前,要先切换到layer页面编辑走马灯组件的内容。

image.png


2.内容画布设置。layer 页面的尺寸,根据要显示的手机屏幕尺寸一致。建议做得足够大,大到跟自己选择的画布最外框尺寸一致。我现在选择的是370X568px的作品画布尺寸,在做的时候,就要设置layer画布尺寸为370X568px,防止在个别手机中上下漏白边。

image.png


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

image.png


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

image.png


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

image.png

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

image.png


7.手势可滑动(两个方向),勾选拖动手势

0015c8f7bd22df2d9beb5f0b11c8203

0015a699ccb4348d4526b0a5bc3607f


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

image.png



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

image.png


10.支持重力感应,可自行选择是否勾选

image.png


11.选择以屏幕哪个边为轴线及旋转方向

0015c8f7c8a63ae1331e224bcc361d6


12.设置画面夹角

image.png


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

0015c8f79c4375c19115784ca516e8f


高级用法

1.设置单个画面子元素触发器。切换到当前帧画面时的触发;

image.png


2.手势指定帧画面的触发;layer页面内元素的相互触发。

image.png


附件:走马灯素材.png • 54.24KB • 下载