h5傻瓜教程（iH5案例优化全攻略）
h5傻瓜教程（iH5案例优化全攻略）相同触发条件下的事件，可以通过设置事件组来实现案例的优化。直接在公众号中回复“加载图”获取链接工具占用的资源从小到大排列的顺序是：页面 < 面板 < 动效 < 时间轴 < 滑动时间轴 ，所以为了节省资源，优化案例，能用前者的情况下就用前者。图片资源太大的情况下，可以在案例开始前，添加加载图，把所有素材放在舞台下，在加载图播放时，一次性加载完所有素材资源，放弃最初的加载速度，提高浏览体验。当所有素材都已经加载完成之后，我们只需要通过控制图片的置顶或者置底来实现我们需要的效果。想要加载图素材的同学
【1】相同元素优化页面中相同元素可以直接放在舞台下面，不再单独放在每一个页面中。比如统一的背景、整个H5统一的背景音乐。
比如上图的对象树中，“原型XX”都是在舞台中不变的元素，所以可以直接放在舞台下，需要变更的元素放在了页面里进行更替。
【2】首页的优化首页放的内容尽量少些，在舞台下调整预加载页面数，减少整个案例的加载时间。在首页显示过程中，加载后面页面数。
每个上传到iH5平台的图像素材都有一个单独的链接，所以在使用相同素材时，可以使用一个链接，直接修改素材中的资源位置即可。
工具占用的资源从小到大排列的顺序是：页面 < 面板 < 动效 < 时间轴 < 滑动时间轴 ，所以为了节省资源，优化案例，能用前者的情况下就用前者。
【5】图片放置位置优化图片资源太大的情况下，可以在案例开始前，添加加载图，把所有素材放在舞台下，在加载图播放时，一次性加载完所有素材资源，放弃最初的加载速度，提高浏览体验。当所有素材都已经加载完成之后，我们只需要通过控制图片的置顶或者置底来实现我们需要的效果。
想要加载图素材的同学
直接在公众号中回复“加载图”获取链接
【6】事件的优化相同触发条件下的事件，可以通过设置事件组来实现案例的优化。
减少图片大小的方法——素材尽量采用单一色彩的绘图方式完成。例如：
上面三张图长宽的像素都相同，第一张大小为9kb，第二张53kb，第三张是87kb。对于H5来说，流畅度往往比画面的精细程度更加重要。
【8】素材优化（1）图片优化：根据需求设计相应素材大小，避免造成图片质量剩余。iH5平台一般通用案例图片宽高为 640 * 1040 px
（2）图片质量需要压缩，图片质量越小，加载越高效。推荐在线压缩网站： tinypng.com
（3）合并图片：把单独的元件合并到背景图片，也可以把相同的元件合并成一张图片。
（4）动态图的优化：在不影响动态图整体效果的前提下，通过修改尺寸、质量、帧数等进行优化。
（5）音乐的优化：音乐的优化可以使用格式工厂这类软件，对音乐进行裁剪和压缩。
（6）图形工具的使用：在需要使用单纯色做背景或者其它的情况下，可以利用图形工具里面的背景色属性或者舞台与页面的背景属性。
（1）用动效取代时间轴：
大家在制作动画效果时，优先选择使用动效，如果动效没有适合的效果，再选择时间轴。
（2）时间轴优化
●能合并的时间尽量合并，不需要显示的元素可以通过调整透明度来使其隐藏；
●在不影响动画效果的情况下，不同轨迹上的关键帧可以略微错开一些；
●注意时间轴时长的合理分配，避免同一时间运行过多关键帧；
（3）画布优化
●将时间轴或滑动时间轴放在画布下，动画部分放在画布中，触发动画效果的部分放在画布外，通过事件控制动画的调度执行；
●当序列帧非常多时，可以用放在画布下的幻灯片控件来实现，记得设置预加载（“预加载完成”和“全部加载完成”事件）
（4）巧用幻灯片工具
当案例中需要使用轮播图，可以使用幻灯片工具取代时间轴或者滑动时间轴。
（1）预加载优化
●如果设定的与加载页面数过多，会影响案例打开的速度，可以设置在第一页显示的时候，更改舞台的预加载页数实现后面页数的加载，优化案例体验；
●测试类案例，如果是通过点击翻页的，可以把测试结果放在第二页上面。
（2）图片显示逻辑优化
如果图片初始显示为no或者在对象树上去掉图片的勾选，图片是不会预加载的。如果担心大图加载慢影响事件的触发，可以在舞台下面添加事件“初始化完成→隐藏图片”。
初始不可见
不勾选图片
（3）顺序优化
●同一时间触发的动作越少越好，可适当用先后顺序触发，如“时间轴为N时触发某个事件”；
●动效的执行最好使用事件控制，避免多个动效自动播放，因为动效即便是设置了延时也是同一时间触发的。
●通过时间轴播放结束的事件，开始执行其他动作，如动效开始播放、时间轴开始播放等；
（4）事件优化
巧妙利用“隐藏同层控件”事件减少事件的数量；
（5）控制计数器的数量
当有N个结果需要显示时，可以使用“计数器范围”属性来实现，或者添加数据库事件，一个事件启用计数器下所有事件；
（6）数据库的应用优化
●对象树下有数据库的，可以直接限制数据库的提交次数；无需后台记录结果的，可以用数据库整数变量限制投票或者点赞次数；如果数量很大，可以分页面来显示。
●无需前端实时刷新数据库时，比如排名、点赞数，可以避免时间轴循环播放而重复输出数据或者重复赋值，改用通过按钮点击来输出实时数据。
●当有多组数据输出时，可以通过禁用不需要执行的输出事件来减少输出运算。
（7）妙用父对象
●直接控制父对象要优于逐个控制父对象下的子对象。例如运算方式中需要变换目标位置的案例，可以把需要变换的元素放在同一父对象下，直接变换父对象目标位置，借助父对象减少运算；
●如果用到碰撞，可在父对象设置碰撞，减少碰撞事件的运算，而且把碰撞加在画布下会流畅很多；
（8）运算优化
用最简式运算方法，例如（700-200）* $a 简化成 500 * $a；
【11】从视觉上出发制作H5（1）明确H5的整体风格
根据H5的主要传播内容和目的，确定H5的风格；
（2）根据主要受众来判断H5的视觉要求：判断主要受众是某一行业内的小资用户，还是大众用户。
●小资用户：那些倾向于酷炫、好玩、有意思的H5类型，这类人对视觉的要求比较高；
·普通大众：属于利益驱动型用户，对视觉的要求没有上一类人群那么高；
（3）重视每个页面的视觉
把每一页当成一个动态海报来设计，重视第一页、过渡页等页面视觉效果的重要性，因为这些页面会直接影响案例后面的主要思想以及其他内容的释放，如果处理不好会直接导致用户的流失。
【12】iH5平台中案例适配及相关技巧探讨（1）iH5移动端案例图片常用适配方案：
iPhone 4 ： 640 * 832px；
iPhone 5 ： 640 * 1008px；
iPhone 6 ： 640 * 1030px；
iPhone 6 ：640 * 1040px；
Android ： 640 * 1008px；
特别需要注意一点，安卓记性太多，大部分主流机型在 640*1008 大小下都是可行的，但是依旧有一些奇葩的终端标新立异，并且如果你需要特别适配部分带虚拟按键的终端，尺寸还是需要根据实际屏幕显示调整的 。
在编辑案例时，使用【移动设备】功能，设置不同方案尺寸，案例就会根据终端设备自动跳转到对应的方案来浏览。
一般情况下，文档按照最大方案（640*1040 px）来创建，坐标原点为左上角（0 0）
（2）iH5案例对象适配
关于案例对象的适配需要注意两点：文本框的适配与APP内嵌H5的适配
<1>文本框的适配：
文本框文字在ios和安卓系统里对比，位置会出现偏差。可以将文本框设置为透明，通过调整坐标位置来使文本框在正确的位置；
<2>APP内嵌H5：
当用 iH5 制作的H5页面需要内嵌到APP中时，应去掉APP内多余的适配代码；
（3）iH5用户系统适配
在制作部分复杂案例时，苹果手机的表现会非常吃力，这个时候，需要通过iH5的“移动设备”来制作两种方案，对不同系统进行参数优化；
【13】百万级浏览量测试类H5案例交互制作经验想要制作百万级浏览量的测试类H5案例，应该在以下三部分下功夫：基本原则、交互反馈、分享裂变；
（1）遵循测试类H5案例的四个基本原则：
●舞台操作无偏差：舞台翻页必须锁定，只能通过按钮进行前后翻页；
●标题简洁又具吸引性：题目一定要有趣，能触及用户心理（最后一题可以神转折），数量10个以内；
●交互方式简单明了：统一采用手机轻触，让用户沉浸在题目之中；
●着重显示测试结果：测试的得分必须着重显示，同时对分数划分等级（通常以超越了全国百分比人数的形式），营造高分虚荣心；
（2）从色彩、声音、动画、心理四层面影响用户交互反馈：
●色彩：对用户的操作按下选项以后，选项的按下状态显示（案例中是色块显示，对为绿，错为红）；
●声音：答题对错都设置相应的声效，带动用户情绪；
●动画：用动画来对整体页面进行补充，在避免单调性的同时提高页面的趣味性（案例中为苏宁的方块狮gif，贱贱的笑萌萌的哭）；
●心理：利用数据库功能统计答错的人数。为什么要做这个统计呢？ 一道题有成千过万人都答错了，而你答对了，你会产生什么感觉？智商优越感！
（3）从结构、内容、标题三个层面引发用户的分享裂变：
●结构：结构上借用了微信段子神转折手法，让人觉得有趣，对广告不反感；
●内容：内容上选择了方言题，因为倒鸭子和你瞅啥有先例可循，捉住用户的猎奇心理；
●标题：根据最后得分，标题自定义为分数形式来诱导用户转发，同时结尾采用挑衅的语调——你敢来试么？吸引朋友圈好友来PK，促使二次转播。
本期关于H5案例优化的分享会回顾整理到此结束，希望大家能从中汲取精华，早日进阶为案例优化大师，同时也感谢大家的支持。
