h5页面设计热门案例教程：新年h5.docxVIP

自从截屏组件优化后，有些效果的实现方式就更加简单，比如，以前想要截取切换到某一张画面时的截图，需要用多个元素的显示隐藏来代替完成，设置过程复杂。 今天就以一个案例来为大家讲解：幻灯、序列帧组件参与截屏可实现的效果以及设置。 案例展示 作品链接：/v2/manage/book/hysiki/ 案例用到的组件： 截屏组件／微信头像／幻灯组件／序列帧组件／按钮组件／全局变量 具体设置 一、先添加序列帧组件 1.在页面中用序列帧组件添加多张背景图 设置序列帧的播放为循环； 间隔的时间可以自己设置，我这里是0.08秒； 不要勾选可滑动，方式自动播放跟滑动播放冲突； 2.给序列帧组件逐次添加播放和暂停的动画，如图： 二、添加一个按钮，来控制序列帧的播放跟暂停 1.现添加按钮长按开始时的触发器——触发背景图切换播放 2.再添加按钮长按开始时的触发器——触发背景图切换暂停 这样基本的控制多张背景图片的效果就完成了，接下来就是添加其他的序列帧或者幻灯组件，按照同样的方式设置播放暂停，一起来看下： 三、其他组件的添加 1.添加关键词的幻灯组件，并给它添加播放和暂停动画 2.添加祝福语的幻灯组件，并给它添加播放和暂停动画 3.给之前的按钮的长按开始时的触发追加播放动画，把刚才添加的两个幻灯组件追加进去，如图： 4.给之前的按钮的长按结束时的触发追加暂停动画，把刚才添加的两个幻灯组件追加进去，如图： 5.