《苏格拉宁地球大暴走》H5项目 - 纪实

《苏格拉宁地球大暴走》H5制作心得体会

前传：

大家好，我叫钟离伯涛【俞伯牙与钟子期 “高山流水” 典故里，钟子期的后裔（族谱记载详见下图，嘻嘻...）】。由于很多网友拿着这项目，找上门（加QQ，微信）找我咨询，找我做项目。所以在此，厚着脸皮，跟大家分享一下使用Annie2X的心得体会。

初识flash2X（Annie2X的前身）是2014年，在跟雪狼团小伙伴们（当年小可带团队，俺乃雪狼团009号成员，目前成员遍布省广，华扬，腾讯，以及创业中，我混的最差...囧）的一场聚会上了解到的，小可大大在开发一个工具flash2x，flash做好动画发布成canvas，支持用egret，laya，lufylegend等引擎，都可以开发成H5，我们都可以去使用。2014年当年我还在使用lufylegend，白鹭egret，html+CSS3+js等开发H5。（文章后面贴上我2014年Egret作品集）。没记错的话，直到2015年上半年，才公布这工具。我们是7，8月左右，才正式开始尝试这工具flash2x。经历了N个版本迭代，由于白鹭egret，layabox，lufylend引擎都在持续更新，每一个引擎的版本的更新，都会有一些废弃的接口，新的接口，导致fash2X工具也需要更新，才能适配新的引擎。最终小可决定才决定开发自己的引擎-----Annie2X.js，这就是大家现在用的引擎的初衷以及由来。（此处应该有掌声：啪啪啪...）

使用Annie2x已经3年多时间，用2X完成了很多优秀作品（客户爸爸，老板，网友都比较喜欢。我脸皮厚，贴一下金）。也多次向其他公司和网友，传播了Annie2X引擎，记得有一次一位看到我官网的网友加我微信为好友，说我个人网站作品很不错。后来得知是兔展公司的一名产品经理。后面邀请我去深圳总部交流。然后去到他们公司，机缘巧合就认识了微信群里的@深圳-H5-嘟嘟（此处老孟应该发个红包...）。后来....嘟嘟就一发不可收拾，爱上了Annie2X。嘿嘿...我的红包呢？

Annie2X给我最大的感受是：我能节省工作中30%时间(布局，制作动效，适配等)，JS也非常容易理解。Annie2X引擎能解决我工作中80%的问题。我本来就是flash从业者，所以面对Annief2X并不陌生，也就看着API直接开始撸了。如今随着3年时间过去了，自己积累了很多Annie2X引擎的经验以及方法论，现在来聊聊我2017年9月份的《苏格拉宁地球大暴走》这个H5。

扫描体验

------------------------------------------------------------------------------------------------------- 我是分割线 --------------------------------------------------------------------------------------------------------

项目背景：

苏宁是公司很重视的一个客户，公司转型中服务的第一个IP - 苏格拉宁（微博搜索@盟主苏格拉宁）。上半年陆陆续续去江苏南京，参与了很多次投标，PK掉了很多知名广告公司，终于拿下了苏格拉宁。它的动漫元素形象设计，双微（微博，微信）运营，H5输出，品牌创意都是我们公司团队服务。团队在制作苏格拉宁地球大冒险的原创漫画期间（可以去微博查看），需要制作一个H5来进行线上传播，于是乎，《苏格拉宁地球大暴走》H5就在这样的一个背景下，诞生了。由于是互动H5游戏，技术实现方面，直接就用Annie2X来执行了。连考虑一下都没有，直接定Annie2X。

技术剖析：

一，各大Annie2X开发者，最想了解的就是如何适配问题。

2017年9月收到需求之后，设计和技术团队就商量是使用竖版，还是横版的设计稿呢？最终讨论完，技术团队给出了解决方案：1462宽度-800高度，设计稿主要内容做在1080宽度-640高度里。无论横竖，都兼容。不显示黑边。为什么这么说呢？

设计稿示例：

flash舞台大小：1040宽 - 640高。设计稿大小：1462宽-800高。

元件的位置：y=-80，x=-211 【左右间距（1462-1040）/2=211，上下间距(800-640)/2=80，可视内容居中】

⑴舞台StageScaleMode缩放模式：采用SHOW_ALL。

⑵当用户开启横屏时候，微信顶部栏会打横。这时候屏幕是超宽的，高度超小。当时iPhone 7plus，小米Mix等，就会显示1080之外的像素。

（备注：我现在用iPhoneX测试，才发现2017年9月当时iphone X ，三星note 8等超长屏手机，还没上市，所以当时最宽屏幕只支持同事的小米Mix全面屏。留给大家的思考：在iPhoneX，小米Mix2，三星Note8等超长屏手机的横屏状态下，兼容要怎么办呢？）

微信状态栏，横屏状态下，显示的最大区域。

⑶如果用户没有开启横屏，这时候微信顶部栏目会显示在顶部，这时候打横浏览，屏幕就会显示1040的宽度。

微信状态栏，竖屏状态下，显示的区域。

⑷那些屏幕小的安卓，微信竖屏时，可视范围小于1040高度的屏幕，就会看见640之外的像素，如下图所示。微信横屏时，效果如上第⑵点（当时最小兼容到了iPhone 4S，上下各80像素）。

微信状态栏，竖屏状态下，显示的范区域。

二，H5的首页，倒计时页，游戏结果页等动画都是由flash完成，flash2X工具导出。

首页动效时间轴

三，页面之间（首页，游戏页，游戏结果页，分享提示页等）的切换，由Tween完成。

贴出一点代码，献丑一下。切换页面的showPage方法里面有“T(top=从上往下切入)，B(bottom=从底部往上切入)，R(right=从右往左切入)，L(left=从左往右切入)，”方向，tween完成事件再播放动画。还可自行拓展缩放，透明出现等。上下左右定位记得参考元件的位置：y=-80，x=-211来定位。