xml地图|网站地图|网站标签 [设为首页] [加入收藏]
HTML5会成为移动应用的天敌吗,制作动画
分类:web前端

使用 Snap.svg 制作动画

2017/02/22 · HTML5 · SVG

原文出处: 凹凸实验室   

图片 1

HTML5会成为移动应用的天敌吗?

2011/07/22 · HTML5 · HTML5

好几年来,我们一直在谈论有关应用程序的众多用途。手机应用程序依然是移动设备推出新服务或内容的首要选择。

你需要知道HTML5的五件事

“应用程序”的整体概念或许已悄然发生巨变,在未来的某一天,我们可能不再需要访问手机应用商店,不论是Apple的还是Google的,我们只需要点击手机主菜单页面上的一个链接,手机就会立即在它的浏览器上启动一个“应用程序”。

1. “原生应用”占统治地位

当我们为移动设备开发应用程序时,程序员通常都会选择开发“原生应用”,“原生应用”是一种用户必须通过手机应用商店购买下载并安装在手机存储器内的应用程序。“原生应用”现已成为新增手机功能的首选业界标准。

因此,大多数的程序员都认为跟浏览器应用相比,不论是渲染效果,还是执行能力,“原生应用”都拥有明显的优势。大部分的用户都会尽量避免使用手机浏览器,因为浏览器使用并不方便,尤其是需要输入数据的时候。

“原生应用”比浏览器应用更容易预见。因为“原生应用”是在手机内存中运行的,它们不会遭遇不可预知和易见等在浏览器应用常发生的问题。

此外,“原生应用”对网络的依赖性更少。“原生应用”大部分的数据都是存储在手机内,它们不需要连接网络才能获取数据。但浏览器应用则是典型的依赖云端服务器的应用程序,它们必须得连接网络才能获得内容。如果网络连接不稳定或很弱,浏览器应用的表现性能将会遭受非常大的打击。

2. “原生应用”很麻烦

长期以来,程序员都是在有限的资源的情况下开发Apple的iOS设备和Android设备开发的应用程序,因为这么做可以让他们的手机应用进入最大的移动市场。

但这种理由已经开始失去说服力,部分原因是程序员要在手机应用商店销售“原生应用”并不容易。以iOS应用为例,就连通过官方的审核也不容易。不过,Apple公司要求每一个提交申请审核的手机应用都必须遵从它的标准,程序员说如果Apple不喜欢那个手机应用,无论是什么理由,它都会拒绝审核。

尽管要在Android市场通过应用审核并不难,但却通过审核后却很容易被埋没在茫茫的Andorid应用海洋里,并且大部分Android应用都是低质量的。

手机程序员面对的另一个问题是他们还必须针对不同的手机操作系统(iOS、Android或者其他)开发不同版本的手机应用,并且同一个操作系统还会有几个版本的应用。因此,手机程序员需要投入大量的时间和金钱给他们的应用程序“定版本号”,而提高产品质量和开发新产品的时间却所剩无几。

3. 迷失在“超级”市场

如前面提到的,一个“原生应用”要在应用商店上架开售并获得成功的希望是十分渺茫的。随着应用商店的扩大,假冒伪劣的应用将会越来越多,而获得有用的手机应用将变得越来越困难。 WildTangent公司的副总裁Matt Shea表示大型手机应用商店的应用程序都是一站式购物,他们看起来很笨拙,而且应用程序的分类和组织均是显而易见的失败。因此,应用买主就更难物色到他心目中的理想手机应用,就算这个应用真的就藏在应用商店内,他也难以从中找出。这也是手机程序员面对的最大问题。

Shea还说,大型手机应用商店的糟糕分类让像WildTangent这样的专业商店觅得了商机。WildTangent是一个专业的手机游戏分类网站,他们会对游戏进行严格的分类和审查,这样访客就能更容易获取到他们的理想应用。

4. HTML5是答案吗?

许多移动社区的用户相信开发者可以避免这样的烦恼——是否选用HTML5技术开发基于浏览器的应用。HTML5技术是1999年推出的超本文语言的一次大升级。尽管外界消息指在 2014年到来前,W3C不会出台HTML5技术标准,但现在,许多现代的手机浏览器已经提前支持这种技术,许多Web程序员已经开始设计HTML5网站。

简单说,HTML5会让浏览器、桌面应用和移动设备展现更多酷炫的功能,例如坐标定位、无插件的视频和音频播放等。同步功能也会更完善,你将可以在工作时观赏一部分电影,然后在家的电脑继续观看余下的片段。

或许HTML5技术最大的潜在优势就是它可以让应用程序员将精力集中在一个版本的应用上,而这个应用却在多个浏览器流畅运行,将程序员从多平台多版本的束缚中解放出来,让他们有更多的精力和资金进行推广营销。

网络是一个关键因素。如果4G网络出来到来,网速将会得到更大幅度的提高,用户从互联网获取内容时将会更加迅速和可靠,浏览器应用也将因此迎来生机。

至于宣传方式,基于浏览器的手机应用将大大减少程序员或开发商对手机应用商店的依赖。为了让“原生应用”成功,程序员需要更多的推广投入,而基于浏览器的应用(只需一个链接地址)会让程序员更容易通过社交媒体(如Twitter、Google+)等进行推广。

5. 留下还是离开?

尽管大多数程序员相信HTML5技术的水平正在提高,“原生应用”的运行速度和真实用例依然比浏览器应用要好。

造成它们差役的一大原因就是“原生应用”可以访问手机设备的硬件功能,而浏览器应用却无法做到。许多程序员表示HTML5的应用目前还没能控制和充分利用智能手机各种各样的硬件功能,如智能手机的CPU和重力加速器,而“原生应用”却能充分利用这些硬件资源。

虽然如此,但围绕HTML5技术的争论依然非常的多,HTML5技术究竟需要多长的时间才能像“原生应用”那样操控智能手机的硬件设备呢?

“JavaScript 的连接辅助让类似移动定位这样的功能也已经可以在大多数的手机浏览器中调用,” Qualcomm CDMA公司的产品经理Sy Choudhury说,“未来半年,我们将会看到更丰富的定位功能,同时浏览器还会有WebGL这样的访问GPU的功能,更轻松地访问照相机和摄像机,浏览器对声音控制也会比现在更为出色。”

Choudhury跟他的团队目前主要从事浏览器的性能优化和开发针对高通Snapdragon处理器的手机操作系统。

“几个月以前,浏览器厂商开始放出越来越多的例子高调展示浏览器应用可以达到的水平,包括重力加速器、方向仪、GPS定位和集成照相等功能,”Mozilla手机浏览器产品经理Thomas Arend指出,Mozilla开发者网站的Dashboard 就是一个非常好的HTML5技术例子。

保证一致的用户体验也是HTML5技术需要解决的另一问题。HTML5浏览器应用在不同的手机设备的不同浏览器上运行,部分程序员表示,由于不统一性,难以让所有的消费者都喜欢他们设备上的HTML5浏览器应用的表现效果。

但采用基于浏览器的方法开发应用不一定就是毫无优势,Arend说。“选择Web技术作为平台技术是最有前途的,对于跨平台的应用(PC和移动设备),Web技术无疑会用户更一致的用户体验,一款优秀的浏览器应用的表现效果绝对及得上‘原生应用’。”

任何一种新技术的采用,都会先经历钟形曲线的模式。早期的技术领头人已经开始行动了。Pandora宣布将采用HTML5技术开发应用程序,而云存储公司Box.net也表示会开始采用HTML5技术。同时也有传言Amazon很快将推出一款基于HTML5浏览器技术的Kindle应用。

不存在“二选一”

在对“原生应用”和浏览器应用的大量热讨后,许多程序员已经不再需要面对一个“二选一”的抉择,事实上,两种技术是可以共存的。

举个例,一名游戏开发者开发了不仅开发了一款手机“原生”游戏“lite”,他还开发了这款游戏的Web版本,潜在买家可以先在Web浏览器上试玩这个应用,Arend指出,如果他们认为这款游戏值得购买时,他们可能会在手机应用商店购买下载游戏的完整版进行安装。

此外,程序员开发“原生应用”的方式十分类似于开发浏览器应用——同样的开发工具,只是最后需要给“原生应用”再额外添加一个包装而已。因此,“原生应用”和浏览器应用有时候可能跟人们想象的会有点出入。

最后,程序员可能会决定开发一款融合“原生”和浏览器特色的应用程序。程序员必定会疑问发布到应用商店和通过社交媒体放置在开放互联网上,哪一种方式才是吸引用户的最佳方式呢?

对于许多人而言,智能手机这个概念的诞生也同时伴随着应用下载的到来。当智能手机首次进入市场时,“原生应用”就是最好的方式用以完成设备的任务。但随着HTML5技术的到来,这又开始了变化:随着浏览器的成长,带宽的增加,HTML5的技术标准成熟,许多无线社区的用户就会开始怀疑“原生应用”是否是手机设备的最佳的搭档。

当HTML5技术全面袭来时,手机浏览器将会变得更好,至少它会改头换面。

原文:CIO
译文:leiphone

 

赞 收藏 评论

图片 2

图标字体 VS 雪碧图——图标字体应用实践

2017/04/05 · HTML5 · 1 评论 · 图标字体

原文出处: 人人网FED博客   

本文介绍使用图标字体和SVG取代雪碧图的方法。雪碧图是很多网站经常用到的一种技术,但是它有缺点:高清屏会模糊、无法动态变化如hover时候反色。而使用图标字体可以完美解决上述问题,同时具备兼容性好,生成的文件小等优点。

一、Snap.svg是什么

从主要功能上说,Snap.svg.js 是一个操纵 SVG 节点/制作 SVG 动画的框架,简单点理解可以看下面文字:

Snap.svg 是一个可以使你操纵 SVG 资源和 jQuery 操作 DOM 一样简单的类库

——译自官网

拿 Snap.svg (下文简称 Snap ) 和 jQuery (下文简称 JQ ) 来做对比最合适不过,很可能作者也是参考了 JQ 的 API 设计,那么它们的相似程度有多高呢?请看下面的对比表:

/ context(上下文) 选择器 事件绑定 节点操作 属性操作 链式写法
Snap svg Snap.select(‘circle’) el.click(…)/el.touchend(…) after()/remove()/append() attr() svg.paper.circle(50,50,40).attr({fill:”#f00”});
JQ document jQuery(‘div’) el.click(…) after()/remove()/append() attr() elem.addClass(‘hide’).remove();

在 JQ 中,可操作的最外层 DOM 边界是 document 。而在 Snap 的概念里,可操作的最外层的节点是 svg ,svg 节点的选择、事件绑定都需要在这个上下文里完成。

在上面的对比图可以看出很多 JQ 的影子,无论是选择器、事件绑定、节点操作等等,都是非常的类似 JQ ,有 JQ 基础的同学基本可以半天掌握 Snap 的全部 API。

雪碧图

雪碧图实例:淘宝PC端

图片 3

将多张小图放至一张大图

使用的时候,通过background-position调整显示的位置,如下图所示:

图片 4

雪碧图的使用方法

使用雪碧图唯一的优点,可以说就是减少浏览器的请求次数。因为浏览器同一时间能够加载的资源数是一定的,IE 8是6个,Chrome是6个,Firefox是8个。为了验证,写了以下html结构:(这部份虽然有点跑题,但是很要必要深究一下)

图片 5

验证Chrome同时加载个数的html–很多张很大的图片

然后在Chrome的开发者工具里面的Timeline可以看到Chrome确实是6个6个加载的,每次最多加载6个:

图片 6

Chrome同时最多加载资源数为6个

雪碧图的制作方法可以用node的一个的包css-sprite,十分地方便。只要将图标做好,放到相应的文件夹里面,写好配置文件运行,就能够生成相应的图片和css,无需自己手动去调整位置等css属性。详见css-sprite

然而,使用雪碧图存在不可避免的缺点

二、Snap 的代码结构

图片 7

笔者根据 Snap 的 API 制作了上面的图表,并且简单标注了注释方便大家理解,可以重点关注一下 Element 和 Paper 这两个类。

雪碧图的缺点

1. Element

这个部分是节点操作相关的方法集,也是该类库最基础的部分。

JavaScript

// 选择节点 var svg = Snap('#svg'); svg.select('circle'); // 选择 svg.select('.rect_01'); // 选择

1
2
3
4
// 选择节点
var svg = Snap('#svg');
svg.select('circle'); // 选择
svg.select('.rect_01'); // 选择

JavaScript

// 事件绑定 var svg = Snap('#svg'); svg.select('circle').click(function() { // do something });

1
2
3
4
5
// 事件绑定
var svg = Snap('#svg');
svg.select('circle').click(function() {
// do something
});

更多方法请参考文后 API 资料。

高清屏会失真

在2x的设备像素比的屏幕上例如mac,如果要达到和文字一样的清晰度,图片的宽度需要实际显示大小的两倍,否则看起来会比较模糊:读者可以对比左边文字和右边图片里文字的清晰度

图片 8

右边图片里的文字比左边字体的文字模糊

特别是现在手机绝大部份是高清屏了,例如iphone 6 plus的分辨率达到了1920 * 1080,所以为了高清屏,使用雪碧图可能要准备多种规格的图片。

2. Paper

这部分是画图相关的方法集,这是几乎每个动画框架都有的部分,类似于createjs的Graphics。

SVG 有6种基本图形:矩形、圆形 、椭圆、线条、折线、多边形。还有另外一种:路径(path),path 是最复杂的一种绘图方式,它可以绘制复杂的图形——当然6种基本图形也不在话下。而关于基本图像与 path 之间的转换,可以参考本站的另外一篇文章:聊聊 SVG 基本形状转换那些事。

图片 9

Paper 方法集主要可以绘制6种基本图形(节点),以及文本(节点)、图片(节点)、渐变等。

JavaScript

// 画一个圆 var svg = Snap('#svg'); svg.paper.circle({ cx: 100, cy: 100, r: 50, fill: '#f00' });   // 创建一张图片 svg.paper.image('url.jpg', 0, 400, 300, 300);

1
2
3
4
5
6
7
8
9
10
11
// 画一个圆
var svg = Snap('#svg');
svg.paper.circle({
cx: 100,
cy: 100,
r: 50,
fill: '#f00'
});
 
// 创建一张图片
svg.paper.image('url.jpg', 0, 400, 300, 300);

雪碧图不方便变化

雪碧图是一张静态的图片,当他生成的那天就注定了他要以什么样的方式展示,因此我不能动态地改变他的颜色,无法让他变大(可能会失真),无法像文字一样加一个阴影效果等等。例如下面的菜单,hover或者选中的时候反色:

图片 10
图片 11

选中或者hover时反色

或者是某一天UI要换颜色、某一天老总挂了,为表哀悼,为个公司的网站要换个灰色调。使用雪碧图时,所有的图标都得重新制作。

使用图标字体可以完美解决上面的问题

3. Snap 工具方法

Snap下有不少实用工具,比如 Snap.ajax、Snap.format模板、颜色格式转换和插件方法等。

JavaScript

// 扩展Snap,为其添加插件方法 Snap.plugin(function (Snap, Element, Paper, global, Fragment) { Snap.newmethod = function () {}; Element.prototype.newmethod = function () {}; Paper.prototype.newmethod = function () {}; });

1
2
3
4
5
6
// 扩展Snap,为其添加插件方法
Snap.plugin(function (Snap, Element, Paper, global, Fragment) {
Snap.newmethod = function () {};
Element.prototype.newmethod = function () {};
Paper.prototype.newmethod = function () {};
});

图标字体icon font

图标字体就是将图标作成一个字体,使用时与普通字体无异,可以设置字号大小、颜色、透明度等等,方便变化,最大优点是拥有字体的矢量无失真特点,同时可以兼容到IE 6。还有一个优点是生成的文件特别小,215个图标的生成的ttf字体文件才41KB

图片 12

一个图标字体里面的元素

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:HTML5会成为移动应用的天敌吗,制作动画

上一篇:10个令人惊叹的HTML5和JavaScript效果,推荐10个HTM 下一篇:没有了
猜你喜欢
热门排行
精彩图文