附近人在搜什么
H5游戏：碎片时间的生意经
　　(速途网专栏 作者：张书乐)在技术上逐步拉近和手机App游戏、PC端网页游戏、客户端游戏之间的距离，逐步发挥自己跨屏的优势，并让自身的内容不再受限于极简小游戏范畴，才可以逐步延长玩家的游戏时间和黏合度，自然收益模式也就慢慢和其他游戏类型趋同并稳定。在业内，对于H5游戏的未来，观点已经趋于一致。
　　整个夏季，微信朋友圈被一只表情很欠、身材妖娆的猫无情“刷屏”了。“我用了11步围住神经猫，击败89%的人，你能超过我吗?”游戏规则很简单，在一个异化版的围棋界面上，玩家需要做的只是点击圆点围住神经猫。但其默认分享的模板设置，让朋友们纷纷陷入“秀智商”模式，你追我赶地比拼最小步数，按游戏宣传语的话说，就是“根本停不下来”。
　　当然，就如之后流行的冰桶挑战一样，神经猫的流行也只不过一个星期，然而作为移动互联网时常出现的现象级游戏，神经猫却让整个游戏产业见识到了HTML5(以下简称H5)技术可能为游戏带来的巨大变数……
　　神经猫为什么成功?
　　《围住神经猫》、《看你有多色》、《打企鹅》、《捏泡泡》……今年以来，类、不少小游戏一个接一个地占据着微信朋友圈。这些游戏的规则极为简单，游戏时间也极短，一两分钟就可结束游戏。就如同玩游戏的时间很短一样，它们的生命周期也很短。一般几天之内，这些小游戏就会销声匿迹。
　　它们都有一个共同的设定，分享到移动端最为人气集中的微信朋友圈中，和小伙伴们比比高下。这一设定其实从去年年初火爆过的《疯狂猜图》游戏开始，就成为众多手机小游戏的必备设定，而且被腾讯手游的《天天连萌》、《天天爱消除》等“吸纳”，成为了社交游戏的标准配置。
　　利用社交圈的攀比心理，是该类游戏成功的一大关键。游戏《看你有多色》的开发方就曾对媒体表示，他们基于社交圈的好友关系及信息分享链，重点挖掘了用户分享和攀比的模块，促使玩家获得了更好的成绩忍不住一次次在朋友圈炫耀。同时，他们在用户使用朋友圈的高峰时段去推动，更是形成热点和话题。
　　最有效地手段是利用玩家的慵懒心理。“让你的朋友也来试试吧”，“看看你的朋友玩得怎样”等吸引玩家分享游戏的话语，出现在每款游戏中，玩家只需要点击一个键就可以分享到朋友圈，当然，分享的同时，游戏方也会回馈一点彩头，比如增加游戏金币或时间。这一点其实也是从偷菜、买卖奴隶等早期在PC端上流行的社交游戏上，一脉相承而来。
　　这一切并不足以让神经猫这样的小游戏成功。对比两组数据不难发现，2013年，在微信朋友圈中蹿红的现象级小游戏除了腾讯自身几款外，就只有《疯狂猜图》，在火爆的那一周，日增用户最高峰值也只是30万;而在2014年，仅7、8月间，《全民寻找房祖名》2天内被玩了6000万次，“《看你有多色》上线2日用户数达3000万，《围住神经猫》更创造了3天500万用户和1亿访问的奇迹。
　　“前者需要你另外下载App才能玩，这个过程中会流失许多用户，而后者，你只要点开朋友圈的分享，就能通过浏览器在网页上玩，而且不用离开社交应用，比如神经猫就是用微信内置浏览器来玩，等于把碎片化时间中等朋友回信息的空白无聊时间给填充了，孰优孰劣也就一目了然了。”游戏业内人士如此分析。
　　在网页上直接玩，其实恰恰是神经猫们成功的关键，即它们都是基于H5技术的网页小游戏。
　　连乔布斯都点赞的“低科技”
　　乔布斯在2010年的加利福尼亚州库比蒂诺总部的公司会议上说，“没有人愿意使用Flash，全球已经开始步入H5时代。”
　　按照定义来讲，H5是一系列制作网页互动效果的技术集合。简单来说，它能在移动端做出Flash做不出的动画效果，即H5就是移动端的web页面。但如果仅仅将H5看作是替代Flash的一个技术，就过于低估了其真正的能力。
　　“长期以来，游戏要在出现在哪种屏幕上作出选择，主要是与游戏主机对应的电视屏幕、手持游戏机、PC和笔记本电脑的显示器以及手机。”业内人士指出：“而且你几乎不可能在不同的屏幕上玩自己喜欢的同一款游戏，即使是移植过去了，你也很难延续在其他屏幕上的游戏进度。”
　　对于玩家来说，这不是一个好消息。同样，对于游戏厂商来说，让游戏移植到不同屏幕上也是一件很困难的事。“只有特别卖座的大作才会去移植，比如《最终幻想》、《真三国无双》等，而且往往移植的效果不好。”该业内人士称。
　　所谓效果不好，主要是针对游戏的玩法上的矛盾难以调和。如平板和智能手机是用触屏，游戏机以手柄和按键为主，PC则是用键盘操控。而H5技术应用在游戏之上，则可以实现“一次开发，多屏共享”。简言之，就是通过编程语言让玩家能够在任何设备的浏览器上玩游戏，从而让开发者可以面向更广泛的用户呈现游戏。
　　多屏幕的分裂性一旦得到解决，则整个游戏世界的能量将得到充分的释放。而对于移动端来说，这种优势更加明显。不用下载App就能玩，这就是H5在传播上的优势。而在技术上，蜗牛数字科技股份有限公司陈芳就指出：“你可以像写网页一样写游戏，而无需太多的额外学习，而且有大量文档与插件可用，这本身就是一种巨大的改变。现在能够一个人开发一款APP游戏的案例很多，而利用H5开发移动小游戏门槛更低，所需的时间更少。”
　　神经猫的成功也说明了这一点，在媒体报道中，多次提到该游戏只有一个设计加一个程序员，只用了一天半的时间，这较之同样极简但却是App版的《疯狂猜图》成本近10万来说，更为低廉。
　　超低的门槛甚至吸引到了一些企事业利用H5游戏进行口碑营销，一个近期的例子来自珠海市拱北边检站，其开发了一款《拱北无影手》小游戏。这款游戏里，玩家需要帮助边检小哥盖章，在每一轮固定的区域内盖上边检章，然后再进行到下一轮，成功的将日常工作通过游戏，进行了巧妙植入宣传。
　　而更多地游戏企业则在其中看到了利好。一些游戏厂商开始大量囤积H5游戏。据笔者了解，有三线游戏公司已经将大量旧式小游戏转换成H5游戏，预计有千余个，随后将以平台的形式对外发布，以打造手机上的小游戏平台。
　　暂时还只能是小游戏
　　对于H5能够为游戏提供多大实现可能这一问题，为《围住神经猫》提供游戏引擎支持的Egret联合创始人马鉴认为：“在2D方面，H5与原生游戏已没有太大差异。一年后就可以做《刀塔传奇》。两年之后，就可以做《无尽之剑》这样的3D游戏，因为Web游戏的3D化形式和原生的3D化形式就没有技术的划分线了。”
　　但事实上，时下的H5游戏，只能是极简状态下的小游戏，而且暂时只能在移动端上引人注目。
　　世界上最大的H5游戏平台运营商SOFTGAMES公司CEO阿列克斯就指出开发H5游戏，对于研发者来说，有三大难关：其一是要想开发一款能在所有平台都正常运行的HTML5游戏无疑是一项挑战，尽管可以通用，但屏幕不同的条件下，设计者必须在海量支持H5的设备上作测试;其二是游戏需要兼容各种不同的控制方式，你的用户可能通过鼠标、键盘、智能电视遥控器或者他们的iPhone来玩游戏;其三是H5游戏的音频的滞后是导致浏览器尤其是移动浏览器，载入时间过长、游戏卡顿，浏览器崩溃的最直接原因。
　　很显然，在当前状态下，H5游戏还只能暂时以小游戏的方式出现在移动端上，特别是音视频的嵌入还不足以在网页条件下得到充分显示的当下。“太过复杂的呈现方式，就算网页能够正常加载，但用户手机的移动互联网速受不了、流量费用也受不了。”业内人士称：“而在PC端或电视端，较之移动端，对游戏的品质要求更高，如果想要实现跨屏，迁就移动端的H5游戏暂时难有市场。”
　　在H5上，越来越多的公司加入，也会不同程度的恶化生存空间，在神经猫大热不到一天，各种山寨游戏纷纷出现，各类“围住XXX”之流的山寨小游戏也频频见于朋友圈，其中不乏知名公司，如多玩游戏就第一时间山寨了一个《围住YY熊》，低技术含量是让其快速被山寨的一个关键。神经猫的创造者秦川就估计：山寨神经猫大约分走了500万的访问量。
　　弊病已经在国外的H5游戏公司身上显现。9月初，HTML5游戏公司Moblyng宣告倒闭。该公司是全球最早尝试在移动设备上做跨平台的HTML5游戏，并成功地制作了一些游戏，可以让Facebook上用户和手机上的用户一起玩同一个游戏，其下载量亦曾达到千万级。但在用户体验上，仅仅只能做到在社交网络和移动设备上开启游戏很顺利，但在游戏过程中，因为跨平台过程中的诸多技术因素制约，很多游戏都出现了卡机或停顿。
　　亟待破局的盈利难题
　　即使是动辄破千万过亿的这些H5小游戏，依然是人气有余而财气不足。
　　中国青年报的报道中曾经有如下描述：“这类游戏的使用时间往往只需要一两分钟。一位玩家说，这类游戏比不上大型游戏设计精美、情节复杂，但自己不需要坐在电脑前一动不动地盯着电脑屏幕，不需要投入金钱购买装备，不需要绞尽脑汁获得胜利。虽然谈不上爱它，但自己不介意用它来打发时间。”
　　在其中，却折射出另一个问题，碎片化时间里的点滴空闲时间太过短暂，流行时间也十分短暂，这样的游戏很难象App游戏那样靠买装备来获得收益。对此，游戏公司也十分无奈。成功推出了现象级小游戏《打企鹅》的广州百田就将其开发H5游戏的主要目的定位为孵化和积累，目前并没有找到赢利点，仅仅是积累用户的阶段。
　　通过植入广告赚快钱，或许是当前唯一的选择。有报道称，《围住神经猫》就接入了腾讯的广点通广告。据搜狐IT报道，“神经猫”在巅峰时期的收入最高可达每日百万。同时也有业内人士表示，即使是专注山寨H5小游戏也能赚钱，只要保证产品能有百万访问，几天下来赚个十几万是没问题的。
　　但要获得百万访问，从越来越多的H5小游戏中脱颖而出，也非易事。9G游戏创始人黄加阳就认为，时下每100款游戏，才能出现1款现象级游戏。而业内人士则指出，随着H5游戏的海量爆发，爆发率将会更低，而且仅仅靠爆发那几天时间里的广告收益，也不是长久之计。
　　在技术上逐步拉近和手机App游戏、PC端网页游戏、客户端游戏之间的距离，逐步发挥自己跨屏的优势，并让自身的内容不再受限于极简小游戏范畴，才可以逐步延长玩家的游戏时间和黏合度，自然收益模式也就慢慢和其他游戏类型趋同并稳定。在业内，对于H5游戏的未来，观点已经趋于一致。而同时，另一种盈利形态也在悄然出现。
　　只是不属于游戏公司，而是企业级的网络营销。如健康元药业就将测年龄测美貌的App游戏《神奇魔镜》优化成H5游戏，并通过自己的微信公众号，号召粉丝进行游戏，从而形成品牌传播，而诸如《疯狂猜图》这样的游戏，亦可依样画葫芦，为企业的移动社交口碑营造创造无形的口碑效应……
　　H5游戏，或许本身不是游戏那么简单，现在的关键依然强化技术，从现象变为常态，否则玩家审美疲劳之后，或许连点开网页的兴趣都没有了……【作者：张书乐
微信号：zsl】如何利用H5小游戏，做到游戏化极致传播
如何利用H5小游戏，做到游戏化极致传播
说到一个H5的传播要怎么做，想从几个方面去谈谈。
第一点：H5到底能给我们品牌带来哪些价值？
第二点：H5游戏传播适用哪些场景？
第三点：宣传类和销售类的场景，应该侧重哪些方面？
第四点：创意有了，H5也有了，那么流量从哪里来？
那么，首先来讲第一点：H5，到底能给我们品牌带来哪些价值？
大家都知道现在做活动，就去做个H5，但是一个H5小游戏是不是真的能够带动品牌的知名度和销量？这个答案很显然不是肯定的。
其实不难理解，因为很多时候很多企业找到我们，第一句话就是说，我们要做个H5，用来做活动的，目的是曝光品牌，增加销量。但其实很多时候我们都会发现，企业只会想要曝光，要出名，要知名度，要销量而忽略了很重要的一点是，到底是怎么样的H5游戏，才可以真正为品牌创造价值。而永远不是，因为你做了一个H5，因为它是H5，所以有创造了曝光。H5，不是万能的。成功的H5游戏营销，是需要靠创意和强而有力打动用户的点才有了价值。
说到这里，那么到底要做怎样的一个H5游戏才能为你的品牌带来真正的价值？
首先，了解你用户的尿性。
你的用户是针对哪些群体的？他们喜欢什么？
是针对中学生还是小学生？他们喜欢二次元？喜欢TFBOYS？喜欢EXO？还是喜欢一堆可爱搞怪的网络语言，比如萌萌哒、天啦撸。
还是针对中青年？比如像插坐学院一样，针对互联网行业，爱学习的小伙伴，但是就算是插坐的受众，层级也是有不一样的，有基础运营、中级产品、或者是高级市场人员。不同层级的人，能够接受的事物也是不一样，假如插坐忽然有一天办了一场职场人员英语提升技能培训班，那么，你会去听吗？或许并不会得到什么回馈，因为大家之所以会关注插坐，是因为想提高自己在互联网行业里的专业知识，而这个范围里面没有英语这一项。
所以正好也点到了，不是你觉得他们需要什么，而是你作为一个企业里面的产品经理、一个新媒体运营或者是一个市场人员，你想做一个H5游戏来活跃用户的前提是，你要足够了解你们家产品的受众，到底是哪类人？他们最想得到什么？什么才会真正吸引他进来。
举一个我们之前帮优步、佐丹奴、格瓦拉还有绿茵阁做过的一个H5游戏为例子，以光棍节那天为节点，采用了单身汪大作战的这个游戏的创意，其实游戏的玩法很简单，就是设定你控制一只单身汪一直在马路上面跑，一边跑一边躲避情侣，每过一关就会自动升级，本来情侣是蝌蚪的形状，后面就会变成人，而狗狗也会跟着变身，超过指定分数就可以抽奖，奖品就是乘车优惠、购物券、餐饮券和电影折扣券，我们和这四家企业联手做的这个活动，主要针对的受众就很明确，年轻人，20岁-30岁，他们才会知道光棍节，他们会对单身汪这个词特别敏感，而且这几个品牌发放的奖品，也正正是这个群体所需要的。这款游戏只上线了三天，没有通过KOL和大V，等等的渠道推广的情况下，也获得了日均PV 10万的流量。其实反观以上这几个品牌基本都是偏线下投放，所以能获得这个数据，也是因为找对了人群，准确切入受众。
第二点：H5游戏传播适用哪些场景？
我们也经常在接受客户咨询的过程里面，常听到这样的提问，我们是做农产品的，想做一款H5游戏，或者我们的新品在月底有个发布会，可以做个H5吗？答案是肯定的。技术上可以实现的事情，从根本上来讲，都是没有问题的。但是，什么样的活动才会更需要用到H5？这个才是我们需要值得去思考的问题，什么样的H5才能更好地帮助活动快而准地扩散出去，这才是值得去探讨的问题。
那么，到底H5游戏传播适用于哪些类型的活动呢？
我们来看看以往的一些H5游戏活动案例。
大国文化的容祖儿H5，明星开演唱会，一般演唱会前便会在各个平台开始一些预热活动，例如送门票、送抱枕、送周边等等。一般企业的做法是，公众平台直接回复，截图，抽奖，或者是在微博上公开对你的偶像表白，选出最感动的那位送票，又或者是给偶像录制VCR，给偶像送上祝福赢取门票，什么方法也有，层出不穷。但这次容祖儿演唱会的主办方，大国文化找到我们的时候，我们就想利用容祖儿的粉丝最熟悉的东西，是什么呢？当然是容祖儿从出道到现在所发行的歌曲，我们的H5创意和思路都围绕容祖儿猜歌的方向去进行，由容祖儿的粉丝把这个游戏玩起来再传出去，传到她的粉丝群，她的论坛，她的微博和贴吧等等有粉丝在的地方。听歌猜歌名，对于一个自己的偶像来说，完全没有难度，但又有值得炫耀的分数，每个人玩了之后就会跟身边的人炫耀，自己猜了多少多少分，她是我童年到现在一直喜欢的偶像。所以这款H5在短短一周的时间内，也是获得了日均20WPV的可观数字，明星效应，不容小觑。
第三点：宣传类活动，应该侧重哪些方面？
提到宣传类的H5，也给大家找来个几个比较有代表性的例子。
《吴亦凡疑入伍？》，腾讯团队出品的H5。
这款H5几乎是一夜之间刷爆了大家的朋友圈，没错，首先看到的是吴亦凡出现在一则看似是腾讯新闻的网页里面的一张图片里，当你以为这仅仅是一则新闻而已的时候，吴亦凡忽然夺框而出，对，吴亦凡忽然出现了，而且还在跟你讲话，当你还在惊讶不已嘴巴还没来得及合上的时候，最后你发现，这是一个宣传广告，吴亦凡代言的一款游戏要上线了。这款H5无疑是一场成功的一次营销宣传案例，但说到这里的时候，我们可以再回头问问大家，知道这个H5所宣传的游戏是什么吗？基本我问二十个人都没有一个人能回答上来，那么现在，你还认为这是一场成功的H5营销吗？
很多客户常常说，我们要的就是刷爆朋友圈。那么，你在意的，到底是让受众知道你的产品，还是在意大家有没有记住你这个H5呢？
那么到底我们记住了哪些H5里面的产品呢？
《这个陌生电话你敢接吗？》，大众点评网出品的H5。
吴亦凡之前有哪个H5刷爆了我们的朋友圈，应该要数大众点评网为复仇者联盟的票房造势的时候推出的这款H5，我相信，你也记住了。为什么我们会记住呢？因为他是首款陌生人来电的H5，而且巧妙地结合当时正在全民讨论的复仇者联盟2的节点上，H5要多少就有多少的时代里面，做出一款让人记得住的H5是因为什么？出其不意。我们永远想不穿那个策划H5的那个人到底在想什么，但又能给我们带来惊喜。利用这种出其不意，再攻其不备的环境下做出的复仇者联盟H5，让大家都记住了，是大众点评网的出品，我们要在大众点评网买票去看这部让人惊喜期待的电影。
所以分享的这两个案例，目的是让大家知道，如果你的目的是为了达到宣传效果，那么一定要把你的产品的特点在H5里面放大放大再放大，让参与到这个H5的用户快速了解到，这个H5到底想表达什么，我看了这个H5，或者我玩了这个游戏，我有什么好处，我得到了什么，这些都是在计划做一款宣传型H5前必须充分考虑到的因素。
销售类活动，应该侧重哪些方面？
为了达到销售目的的H5，又应该怎么展现呢？
在刚刚过去的双十一里面，我看到了很多天猫出品的H5活动案例。
为此，我们的公众号平台还特意收集了一期《这应该是世界上最会赚钱的猫咪-天猫H5案例合集》，大家可以翻翻我们拇指部落的公众号，查看历史消息或者是直接回复天猫就会找到。
其实销售类活动与宣传类活动同理，你的产品是什么？受众是哪些人？他们更关注的是怎么样的服务或是优惠？只有了解你的用户群，才可能做出一款合胃口的H5。
第四点：创意有了，H5也有了，那么流量从哪里来？
这个问题也是比较核心的一个问题，很多H5有很好的创意和营销的点子，但往往没有办法真正传播到用户里面去，这时候我们就要考虑到两点：你的H5，是否有让用户主动分享出去的理由？还有就是你投放的渠道是什么，找对人群了吗？
微信之前的一个数据显示，仅仅有20%的用户会点击公众号的文章，并把优质的内容分享出来，绝大部分80%的用户，都是通过朋友圈去点击公众号的文章的。所以这个数据放在H5上面也一样，你的H5最先是通过公众号发布出去的，或者是个人号，再由朋友圈里面乐于分享的受众把这个H5分享出去，光靠自己的圈子很多时候是徒劳的，因为我们的资源有限，我们的受众有限，很多时候会出现的现在就是，同一个圈子的人都看见了这个H5，所以这个H5就一直卡在这个圈子的人里面了。比如我们是互联网行业的，本来我们的公众号就是针对互联网的从业者，我们帮一个动漫业的做了一个H5，如果单单只是靠我们自己的公众号，而不去扩散到动漫人群所在的地方，那再好的H5，最后只能是一个结果，就是圈内的人知道了，认可了。但就是传播不到核心人群那里去。
所以对于H5如何传播的这一问题，我们的解决办法是：
1、通过你用户所在的公众号、大V、KOL、微信群等等的地方进行传播：
（所以每个行业的品牌人员在做市场推广之前，一定要有这个意识，提前积累好传播的资源，加入尽可能多的微信群，了解尽可能多的大号，提前做好资料收集，提前做好随时应战的准备，而不是明天就要上H5了，今天再去想要从哪里找到这些资源，这是很不现实的。）
2、可以尝试把花在大V身上的钱，花在用户身上：
其实就是很简单的，发红包，求转发。这个方法不是百发百中，但经过很多次的尝试，这个办法有时候比花钱投个大V还要管用，你的受众接收到了精准的广告，并且还得到了甜头，主动扩散的机会会比在大V上看到一个H5要容易得多。但这个办法通常是特别针对一些已经有了一套系统管理机制的微信群会更为管用，这又是一个需要长期准备的渠道，其实有能力和精力的一些企业，可以试试这么一套玩法。
说到最后总结一下今天所讲的内容：
1、做对胃口的H5：了解受众、认识受众、拉近和受众的距离
2、要记住不是H5火了你的品牌，是你的创意和接地气火了这个H5
3、其实H5广告营销和传统广告还是很有共通点的，分析市场，针对市场做营销策略，广告上线后，数据反应一切。数据会把所有不足与亮点都分析出来，创意是否打动了受众，渠道有没有找对，推广力度有没有打到点子上，数据全部都可以告诉你。让你一直调整自己产品和品牌的战略和打法。
发表评论：
TA的最新馆藏前沿穿越！聊聊HTML5小游戏的制作技巧及经验
优秀网页设计联盟-SDC-网页设计师交流平台-听讲座，聊设计，找素材，尽在优设网
& / & & / & 正文
Hi,我是优设小编
前沿穿越！聊聊HTML5小游戏的制作技巧及经验
编者按：今天腾讯的同学从一款小游戏《植物大战僵尸》说起，分享一些动画实现的知识（动画可控性、如何兼容不同分辨率、如何识别平板手机等），附上众多实现小技巧，来收 &&&
hello~大家好，我是黑米！ Ｏ(≧▽≦)Ｏ
今天我来跟大家分享一些动画实现的相关知识，希望大家能够支持（鞠躬……
我很喜欢很喜欢看动画片，一直有做出好看动画片的梦想……所以最近做了不少动画效果来玩儿，也为自己以后可以做出伟大的动画片打好基础！
Web端动画表现有不少办法，我列一些常见的，然后再说说在实现上的一些小技巧。
进入正题，我要开始认真了！（严肃脸…… (￣ー￣〃)
嗯……首先大家先来跟我一起玩个游戏，请快速的掏出手机，打开微信，“扫一扫”下面的二维码，通关最多的前三名同学……什么奖品都没有！！
相信大家都认真的玩儿了游戏吧？我们这里有一位万技师一直玩到50多关，最后体力透支，主动“自杀”，否则相信他能玩出过百关，怎么做到的？有彩蛋，不知道你有没有发现，哈哈……
嗯……回归正题，这个小游戏当中用到了大量的动画效果，主要是逐帧动画，今天的第一部分，就先来讲讲动画这个事情。
我先来列一排动画效果给大家看……
刚才上面列的动画效果分别是 GIF 动画、Canvas + CSS 动画、逐帧动画。其实说起常见的动画实现，除了 GIF（APNG）、Flash 和 Canvas 外，其他基本都是 CSS 动画，即使是通过 JS 实现，大部分情况下只是通过 JS 来修改 CSS 属性而已。
而 GIF 动画仅支持 8 位色，颜色偏少，虽然 APNG 解决了这个问题，但是存在兼容问题，同时它和 GIF 一样，没有可控性，所以它们一般很少用于动画制作流程中，仅用来展示。相对来说 CSS 动画和 Canvas 动画的可控性更易于制作页面效果动画以及页面游戏。
一、可控性
刚才说了“可控性”，那到底什么是可控性？我们先来看一个动画效果的大概示意图！
一段动画一般由“开始 – 过渡 – 结束”来组成，GIF 动画是无法通过代码来获取到这些状态的，但 CSS 动画可以！
我这里的做法是把每一组图片合成一张“雪碧图”，然后利用 CSS 的 animation 做逐帧动画，写好函数通过不同的参数来调用不同的角色。
Role（dirt）
Role（rises）
Role（cast）
Role（broken）
Role（death）
合成“雪碧图”的逐帧动画
像上面 图2 和 图3 的例子，都是由好几个动画衔接完成，那么它们之间如何衔接呢？有的同学可能会说用setTimeout/setInterval/requestAnimationFrame 一类的延迟功能来做衔接，但是这样会有个问题就是在性能不同的机器上，会有误差，而且维护繁琐。所以，我们需要一个触发形式的衔接方式，即上一个动画完成了，通知下一个动画开始。
CSS 动画实现一般使用 animation 和 transition 来搭配其他属性使元素产生不同变化，从而达到动画效果。
而这两个属性是可以通过 JS 中的事件来监听到“开始”和“结束”状态。具体事件如下：
animationstart：
animationstart 事件在 CSS animation 开始时被触发。如果有 animation-delay ，事件将在延迟时效过期之后立即触发。 如果延迟时效是负值，事件触发时将带有等于延迟时效绝对值的 elapsedTime 。
animationend：
animationstart 事件在 CSS animation 完成时被触发。
transionstart：
transionstart 事件在 CSS transition 过渡开始时被触发。
transitionend：
transitionend 事件会在 CSS transition 结束后触发。当 transition 完成前移除 transition 时，比如移除 CSS 的 transition-property 属性，事件将不会被触发。
这些事件在不同浏览器下需要加前缀什么的大家应该都懂得，至于 transionstart，目前仅在 IE10+ 上有效……
通过事件监听的方式衔接，并利用分层的形式叠加多重动画，最终实现效果：
现在，开始状态和结束状态获取到了，那中间的过渡状态要怎么办呢？比如说我要动画执行到 30% 的时候，执行一个回调，亲一口姐姐，肿么办？?(?ε??)
虽然没有直接的事件可以监听到过渡状态，而且这个需求中也暂时用不到这个过渡状态监听，但是我们也可以稍微做点事情的。（不抛弃，不放弃！）
怎么做呢？比如一个动画的执行时间是10s，那么在动画开始的时候，跑一个 setInterval 来不断的记录过渡状态，然后用当前跑到的值和总时长就能算出具体的进度了。这里要稍微注意一下，因为动画播放控制（animation-play-state）属性的存在，在暂停和重新播放时，需要对计时器稍微进行一下处理，否则得出的进度值会有错误。
这不是一个很完美的办法，因为在不同的性能下，计时器的值可能会有微弱误差，但如果你要求并不是很精确，还是可以尝试这个办法的。
二、如何 Perfect 的兼容各分辨率？
兼容各式屏幕一般有这样的办法：
还有这样的办法：
最后，还有传说中的弹性自适应布局：∑(O_O；)
但是，在这个需求上，统统不适用！为什么？
viewport 和 media Query 在 iOS 和 Android 上识别的单位不同，在 iOS 上识别的是“设备像素”，而在 Android 上识别的是“CSS像素”，这两个词后面会讲到。
因为这个页面游戏上有大量的元素用到绝对定位，如果使用弹性自适应布局的话，会进行大量的布局计算，而且还不一定精准。
所以，这里的解决办法是通过 discrimina.appVersion 获取 UA 信息中的关键字来判断不同的系统，针对不同的系统做不同的解决方案，Android 对最外层 div 进行 zoom 缩放，而 iOS 使用 viewport 缩放：
三、如何 Perfect 的识别平板和手机？
各设备上的布局问题解决了，但是如果设备屏幕比较大，你的图片是糊的，怎么办？
也许有的同学会举手说去检测 CSS 分辨率，但是这里就有问题了……有的老旧平板可能屏幕尺寸大，但 CSS 分辨率小；而有的新手机屏幕尺寸不如平板，但是 CSS 分辨率挺高，咋办？
回归现实，我们分辨平板和手机是以什么来分辨的？屏幕尺寸，对吧？那么我们这里也同样，只要想办法计算出访问者的屏幕尺寸即可，就是平常我们说的几寸屏…几寸屏的那个尺寸。
怎么获取那个尺寸呢？我们这里先来学习一些专业术语……
标红的“屏幕尺寸”是我们的目标，绿色的元素是我们后续会用到的东西，其中我们可以直接通过 JS 获取到的只有最后两项，即“设备像素”和“设备像素比”。
然后我们来看看“屏幕尺寸”的计算公示：
屏幕尺寸 = 屏幕对角线的CSS像素值/（设备像素比*PPI） = (√长?+宽?)/（设备像素比*PPI）
屏幕是矩形，矩形对角线的计算公示就是上方右侧那个公示；现在我们来看一下这个公示中用到的元素如何获得……
现在，万事俱备，就差 PPI，这东西虽然没有直接获取方式，但是我查了一下资料，还是得到了一些数据。
注意，这里给的是基准值，我们常说的 iPhone 多少多少 PPI，那个值是用基准值乘以设备像素比得出来的。由于 Android 手机厂商众多，并没有统一的标准，这里的 160 只是约等值，所以 Android 屏幕尺寸结果会有误差，但是基本也够用了。
现在公式中的所有要素都已经齐备了，具体在代码中实现，就是下面这样子：
得出的值，单位是“英寸”，我们根据这个值就可以考虑针对平板和手机等不同屏幕尺寸做不同的事情了，比如最基本的，换一套高清图……
四、音频之殇 (T^T)
这个小游戏中一共用到3类音频，共6个音频，且存在同时播放问题，iOS 下没问题，但是 Android 下会出现后播放的音频打断之前播放音频的问题。
我测试了一些设备，发现无迹可寻，有的老设备支持，新设备反而不支持。我的解决办法是 Android 用户仅播放关键音频，比如这个游戏当中就是背景音乐，其他的就不放了。因为没办法判断设备到底是否支持多音频同时播放……
五、形变+位移+旋转=？
刚才讲了“活捉兵马俑”那个游戏的一些经验技巧，现在讲讲几个 CSS 小属性搭配起来可以做的东西。
不可否认，做动画 Flash 是走在前面的，它的很多表现形式都值得我们借鉴，比如说这位豌豆射手。
这个豌豆的需求是一个双屏互动需求，PC 端使用 Flash 实现，移动端没办法用 Flash，所以动态效果我就照着临摹了下来。
具体做法是把豌豆拆成不同的小组件，然后再利用 animation、translate、scale、rotate，拼合出一个完整的动态效果，并没有多少技术含量，但几种属性的搭配使用，让这颗豌豆看起来还是挺赞的！
所以，很多属性稍微搭配一下，其实就可以做出很好玩的东西。哈哈……
这个豌豆射手的小游戏体验地址：
六、其他一些小细节……
看了这么久的文章，你可能也累了，下面一些小细节快速过一下……
1）不要放弃 PC 访问的用户，如果没有很好的引导，他们会直接关闭网页的。
2）如果是横屏没法用的页面，给予良好的横屏提示。
3）为用户添加桌面图标，方便用户启动页面。
好的，今天的分享基本就这样告一段落，欲知后事儿如何，请听下回分解！
【h5教程及经验好文合集】
腾讯同学精选的h5热门案例：
给前端工程师的实用干货！
京东出品的H5页面设计心得！
原文地址：
【优设网 原创文章 投稿邮箱：】
================关于优设网================
“优设网“是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：。
设计微博：拥有粉丝量92万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
我们的团队
大家在关注