H5页面设计热门案例教程：新年H5.docx_第1页
H5页面设计热门案例教程：新年H5.docx_第2页
H5页面设计热门案例教程：新年H5.docx_第3页
H5页面设计热门案例教程：新年H5.docx_第4页
H5页面设计热门案例教程：新年H5.docx_第5页
已阅读5页，还剩10页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

自从截屏组件优化后，有些效果的实现方式就更加简单，比如，以前想要截取切换到某一张画面时的截图，需要用多个元素的显示隐藏来代替完成，设置过程复杂。今天就以一个案例来为大家讲解：幻灯、序列帧组件参与截屏可实现的效果以及设置。案例展示作品链接：/v2/manage/book/hysiki/案例用到的组件：截屏组件微信头像幻灯组件序列帧组件按钮组件全局变量具体设置一、先添加序列帧组件1.在页面中用序列帧组件添加多张背景图 设置序列帧的播放为循环； 间隔的时间可以自己设置，我这里是0.08秒； 不要勾选可滑动，方式自动播放跟滑动播放冲突；2.给序列帧组件逐次添加播放和暂停的动画，如图：二、添加一个按钮，来控制序列帧的播放跟暂停1.现添加按钮长按开始时的触发器触发背景图切换播放2.再添加按钮长按开始时的触发器触发背景图切换暂停这样基本的控制多张背景图片的效果就完成了，接下来就是添加其他的序列帧或者幻灯组件，按照同样的方式设置播放暂停，一起来看下：三、其他组件的添加1.添加关键词的幻灯组件，并给它添加播放和暂停动画2.添加祝福语的幻灯组件，并给它添加播放和暂停动画3.给之前的按钮的长按开始时的触发追加播放动画，把刚才添加的两个幻灯组件追加进去，如图：4.给之前的按钮的长按结束时的触发追加暂停动画，把刚才添加的两个幻灯组件追加进去，如图：5.添加微信头像组件6.在页面中添加些其他的图片文字等元素四、截屏设置1.截屏组件的添加需要注意下，把要截屏的元素全部添加到截屏组件中。注：截屏可截取的元素组件包括：文本（字号）图片（圆角、边框颜色及粗细）幻灯序列帧头像（含昵称）截屏后的内容是需要一张图片来显示的，我们可以选择在当前页面进行显示，也可以在下一页进行显示（所以上图中截屏成功后跳转页面），现在选择下一页显示。但是需要结合全局变量来传递要到下一页去替换资源。2.添加全局变量，类型为文本，命名为“关键词海报”3.添加按钮，用于触发截屏添加一个按钮“生成图片”，设置触发器点击时触发截屏，并隐藏相关不需要再显示的元素。四、显示截屏1.新建一个页面，并给这个页面分组，防止用户从截屏的那一页直接滑动过来在这一页添加一张用于显示截屏的图片。2.给显示截屏的图片设置参数：勾选二维码可识别；图片的尺寸可以是内框尺寸，并且页面的背景色尽可能设置下，显示截屏时防止个别手机周围显示白色边。3.设置页面触发器切换到当前页时触发替换资源文件以上就是本次案例的设置教程，有任何不明白的地方欢迎各位派友在下方留言
人人文库> 全部分类> 教育资料 > 课设设计

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论