脸萌~基于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加载的时间可以得到很大的提高。

脸萌~基于SVG绘制相关推荐

基于svg绘制北京地铁图（官网数据来源）
北京地铁图北京地铁图,基于svg开发,支持PC.移动端多种浏览器. 线上开源地址 https://github.com/StavinLi/beiJingSubway 点个赞吧! 项目介绍技术点 1 ...
基于svg开发绘制地铁图
中国地铁图中国地铁图,基于svg开发,支持PC.移动端多种浏览器.覆盖北上广多个城市. 线上开源地址 https://github.com/StavinLi/the-subway-of-china ...
RDKit | 基于RDKit绘制带原子和键的索引、注释和立体化学
基于RDKit绘制带原子和键的索引.注释和立体化学导入库 from rdkit import Chem from rdkit.Chem import Draw from rdkit.Chem.Dra ...
RDKit | 基于RDKit绘制化学反应
基于RDKit绘制化学反应导入库 from rdkit import RDConfig import unittest import random from rdkit import Chem fr ...
设计一个基于svg的涂鸦组件（一）
基于svg写了一个涂鸦组件,说项目之前先附上几张效果图: 项目地址:https://github.com/linmingdao/SVGraffiti 效果预览: 功能演示: 由于篇幅问题,本文先总体介 ...
html流程svg动画,12款基于SVG的HTML5应用和动画
本文作者html5tricks,转载请注明出处 SVG是HTML的扩展标记语言,利用SVG可以做非常多的矢量动画,结合 1.HTML5 SVG 3D蝴蝶飞舞动画逼真超酷这次我们要分享的这款HTML ...
了解什么是SVG并使用SVG绘制圆，椭圆，矩形
一.了解SVG概念 SVG英文全称为Scalable Vector Graphics,意思为可缩放的矢量图 HTML5支持内联SVG HTML<svg>元素是图形的容器 SVG有多种绘制路 ...
SVG绘制圆环进度条
在我们的大屏可视化项目中,经常会用到各种各样的图表.与传统的表格展示.枯燥的文字阐述相比,图表展示则使用户看起来更加直观.数据的展示则更加一目了然.本文基于svg绘图技术结合前端技术栈vue,以工作中 ...
matlab制作有趣动画制作,18个超有趣的SVG绘制动画赏析
本文作者html5tricks,转载请注明出处 SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目.由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种 ...

脸萌~基于SVG绘制

脸萌~基于SVG绘制相关推荐

最新文章

热门文章