.

9.幻灯/序列帧参与截屏: 随机切换海报

小常发表于:2017年12月07日 17:17:34更新于:2021年07月23日 14:10:32

一、案例效果

0015a72cbd221f900a849919ef3a112

《开启你的2017年关键词》


二、应用场景

节日随机关键词的的合成海报。


三、素材准备

文末附件下载素材,非商用,仅供学习使用。


四、具体设置


1.在页面中用序列帧组件添加多张背景图

(1)设置序列帧的播放为循环

(2)间隔的时间可以自己设置,我这里是0.08秒;

(3)不要勾选可滑动,方式自动播放跟滑动播放冲突;

image.png


2.给序列帧组件逐次添加播放和暂停的动画,如图:

image.png


3.添加一个按钮,来控制序列帧的播放跟暂停,现添加按钮长按开始时的触发器——触发背景图切换播放image.png


4.再添加按钮长按开始时的触发器——触发背景图切换暂停

image.png


5.这样基本的控制多张背景图片的效果就完成了,接下来就是添加其他的序列帧或者幻灯组件,按照同样的方式设置播放暂停,一起来看下:


6.添加关键词的幻灯组件,并给它添加播放和暂停动画

image.png


7.添加祝福语的幻灯组件,并给它添加播放和暂停动画

image.png


8.给之前的按钮的长按开始时的触发追加播放动画,把刚才添加的两个幻灯组件追加进去,如图:

image.png


9.给之前的按钮的长按结束时的触发追加暂停动画,把刚才添加的两个幻灯组件追加进去,如图:

image.png


10.添加微信头像组件

image.png


11.在页面中添加些其他的图片文字等元素

image.png


12.截屏设置。截屏组件的添加需要注意下,把要截屏的元素全部添加到截屏组件中。

注:截屏可截取的元素组件包括:文本(字号)/图片(圆角、边框颜色及粗细)/幻灯/序列帧/头像(含昵称)

image.png


13.截屏后的内容是需要一张图片来显示的,我们可以选择在当前页面进行显示,也可以在下一页进行显示(所以上图中截屏成功后跳转页面),现在选择下一页显示。但是需要结合全局变量来传递要到下一页去替换资源。


14.添加全局变量,类型为文本,命名为“关键词海报”。

image.png


15.添加按钮,用于触发截屏。添加一个按钮“生成图片”,设置触发器——点击时——触发截屏,并隐藏相关不需要再显示的元素。

image.png


16.显示截屏。新建一个页面,并给这个页面分组,防止用户从截屏的那一页直接滑动过来

在这一页添加一张用于显示截屏的图片。

image.png


17.给显示截屏的图片设置参数:勾选二维码可识别;

图片的尺寸可以是内框尺寸,并且页面的背景色尽可能设置下,显示截屏时防止个别手机周围显示白色边。

image.png


18.设置页面触发器——切换到当前页时——触发替换资源文件

image.png

以上就是本次案例的设置教程,有任何不明白的地方欢迎各位派友在下方留言,以便于优化。

image.png


附件:关键词切换案例.zip • 6.46MB • 下载