脸萌~基于SVG绘制

前阵子在做脸萌APP，采用H5来重构myo脸萌APP。

使用h5来构建app的原因，主要考虑点如下：

优点：

1.素材更新多且更新频率高，所以考虑用h5使得ios,android,win phone，pc端都能快速迭代更新，一套代码多个平台适用。

2.svg矢量图的方式能不失真展示图片细节，在大屏机跟retina屏幕流行的现在比较适用，更核心点是，svg比大图片的体积更小，减少app的体积，另外svg的xml定义的方式，可以用改变图片局部的颜色以及进行变形制作动画交互。

3.h5的页面构建方式使得app分享到web端时更便捷，自定义化更高。

缺点：

1.当素材很多时，进行素材小图展示时，性能太卡（滑动tableview/listview的时候），解决办法：小图素材部分使用原生语言写，另外小图的体积经过tinny png压缩后体积跟小图的svg差不多，所以小图使用svg没有太多优势。

2.webview自身有些bug,以及webview开发出来的借口不够多，很多自定义化的控件开发起来，成本较高。

结论：

对于脸萌拼头像这款产品分析，hybird的架构，优点还是大大多于缺点，所以可以大胆尝试下。

脸萌app h5重构结果：

1.软件体积成功瘦身2/3，android端大小8m,ios也仅为15m,大大提高用户下载量，减少用户流量心里压力。

2.软件素材图片的画风深度改版，变得更cute更萌，我们团队自己开发完，测试时也玩得笑声连连，一个让自己团队都觉得开心好玩的产品，是不会差的。

3.矢量化的图片展示，让用户好评如潮，素材可更改颜色跟变形也一致好评。最终引爆下载点。最高每日500w的下载量，总下载截至今天达到8000w，引来国内国外大规模的刷屏。

小结：

如果不想联网玩那就使用客户端开个webview吧。那高清的绘图以及10M以下的软件体积是怎么做的呢？其实里面还是使用画布绘图的方式，所以存储的是坐标代码，自然比存储bitmap小很多很多，软件体积自然不会太大。

 软件的svg素材那么多，而且在webview，出于安全策略的考虑，image xlink:href并不能直接读取本地文件，所以把svg的素材直接提取里面线条的关键点，关键属性构造成json格式，程序读取json再动态生成svg好了。这里又有个问题，在webview中并不能直接读取json文件然后回调~所以这里也使用了个技巧，把json写在js文件中，直接读取js文件就好。(PS.脸萌的svg素材刚开始是自己手动抽离成json,后面素材越来越多，迭代越来越快，就请了几个助手帮拖，等自己的精力释放出来了才用js写了个自动抽离程序，实现svg文件转json文件全自动化，大大释放了团队压力，另外顺便也给设计师写了些优化她们工作流程的软件，她们很开心，也很赞了哥，棒棒哒，这里又不得不吐槽，h5对文件操作的接口，又少，浏览器的兼容又差，口可口可)

 ok，这里有了素材数据，那就是解析算法跟绘制算法的问题了。这些倒是比较小的问题，不多说。值得注意的是，svg的矢量化不仅能让图像展示很清晰，也因为矢量的属性解决了移动端显示屏大小兼容的问题。一举多得。唯一可惜的是android2.3并不支持svg。刚开始也曾试过将在android2.3中将svg转化为canvas来展示。可惜碍于转换的效率成本以及转换后svg有许多属性失效，最终放弃对android2.3的支持。

ps.svg素材文件是分解成字符串进行数组保存的，展示时需要把各个线条拼接起来，这里有个技巧用array join接口拼接字符串效率很高很多，如果js文件有超过5个的话，另外尽量把各个js文件合并成一个js，这样webview加载的时间可以得到很大的提高。