snapsnap.svg.js 线性运动支持ie8吗

IE9中文正式版发布 全国独家抢先评测!
来源:pconline 原创&
责任编辑:caoweiye&
1IE9中文官方正式版发布 界面全体验  在微软的软件版图中,有一款软件一直倍受关注,它既拥有着桌面系统近一半市场份额,又因为很多先天的小毛病而长期遭人诟病,这就是微软的IE系浏览器。  这几年微软都在努力改进着这位浏览器巨人,从最开始的多标签浏览、中文域名支持,到后来的WebSlices、SmartScreen,几乎每一项功能都能代表当时业界最新的理念。  然而事与愿违,也许是微软的目光太过超前,抑或是观众的口味实在太刁,反正终究没能挽回占有率下跌的厄运。  终于最新一代 IE9 横空出世,在这一版本中你不但可以看到最新的 HTML5 支持,性能方面也有了突飞猛进的发展,总之它给你我带来的惊喜,绝不仅仅是一两句话就能说清,下面就让我们一同走进 IE9 的世界吧!
软件名称:
(IE9)Internet Explorer 9.0
软件版本:
简体中文正式版
软件大小:
软件授权:
适用平台:
Vista Win7
下载地址:
  一、 安装与界面  IE9 的安装十分简单,双击安装包后,只要一个按钮就能完成整个操作,中间过程无须用户参与,成为真正意义上的一键式安装。不过由于安装过程中会不时下载一些必要的文件,因此保持一个畅通的网络环境是最基本的要求。  一般情况下安装会持续约一分钟左右,之后弹出一个对话框提示重启。在此过程中如果用户运行了一些带有 IE 内核的软件,需要事先将它们关闭,这一点在 RC 版中是没有的。  注:IE9已不再支持 WinXP 系统,只能在 Vista、Win7 系统中安装。图1 安装过程截图图2 安装中需要关闭一些相关软件  完成重启后,一个漂亮的小界面出现在了眼前。和熟悉的 IE8 相比,IE9 的界面十分简约,磨砂感皮肤甚至让人有种误用 Chrome 的感觉。启动速度快了许多,几乎就是在双击的一瞬间完成启动,尤其在看惯了 IE8 那老牛拉破车之后,这种感觉尤为明显。图3 主界面预览  初见 IE9,你会发现之前很多熟悉的元素全都不见,比如状态栏、搜索栏、工具栏等等。很多元素或被隐藏或被合并,再也不会出现在界面上阻碍视线了。  当然如此精简并没有对日常浏览带来多少麻烦,就拿那个每天都要用的地址栏来说,这里便汇集了网址、兼容性切换、搜索按钮、HTTPS指示、网页转到、刷新/停止等诸多功能,虽然很全但由于排版的出色丝毫未显杂乱,反倒用起来十分顺手。图4 新版地址栏  工具栏被浓缩成三个按钮置于界面右端,不但用起来方便,而且也与整套风格颇为融合。值得一提的是,IE9同样为不同喜好的用户提供了自定义选择。通过右击任务栏空白处,即可找回&丢失&的界面元素。图5 工具按钮  标签栏的设计让 IE9 看上去更像是一个整体,但代价是打开的网页太多时会马上变得拥挤不堪。当然这个问题也并非全无解决,右击标签栏空白处点击&在单独一行上显示选项卡&,搞定!图6 让标签栏单行显示  此外域名高亮显示、网页颜色分组也被IE9完美继承,使用上也和IE8没有区别,这里就不再多说了。2IE9网页固定 智能地址栏有多聪明?  二、 新功能之&&网页钉选  如果你是一位微博 24 小时不离手的家伙,那么下面这项功能应该最合你的胃口。简单来说它的作用是模仿 Win7 任务栏,将最常用的网页&钉选&上去,钉好的页面不必打开 IE 就能使用,很像是将网站变成了一个独立应用。  具体操作很简单,首先打开要&钉选&的网页,然后将它拖拽到 Win7 任务栏,松手后这个网页便会&钉&上,点击即可打开。为了方便识别,IE9 还会自动加上网站图标,用起来非常方便。图7 拖拽时效果图8 看看你能认出几个?  此外正式版还在菜单中新添加了一项&转到固定的网站&,功能并没有什么特别,点击后会自动跳转到微软的一个帮助页面,估计仅仅是想为这项功能做一下宣传吧!图9 正式版中新增加的菜单项  三、 新功能之&&智能地址栏  在 IE9 中地址栏与搜索栏合二为一,这意味着我们可以直接从地址栏中输入关键词实现搜索。  此外在它的下拉菜单中,收藏夹、历史记录也都拥有一席之位,输入的关键词同样可以在这里匹配到对应答案。当然搜索引擎切换也是不可缺少的,而且相比老版还要更方便一些,直接点击即可,省时又省力。图10 智能地址栏  如果搜索引擎支持搜索建议(如Bing、百度等),也会在下拉菜单中一并显示,而且海外用户还能体验到更多。图11 搜索建议(点击图片查看大图)  有时我们可能需要搜索一些像&&之类的类网址,这时一体化地址栏的弊端便显现出来,它会直接将其误识别为网址而不再启动搜索引擎。当然解决的方法也不难,按动Ctrl+E再输入网址关键字即可,我们称之为&隐藏的搜索栏&。图12 隐藏搜索栏3IE9快速访问通道 新技术页面防崩溃  四、 新功能之&&IE九宫格  九宫格是 IE9 中新增加的一项功能,可以在新建选项卡时自动列出网站列表,尤其对于那些需要经常打开的网站来说,能够节省日常的很多时间。  所不同的是,IE9的宫格全部是由浏览器自动填写,内容就是平时用户最常访问网站。为了辨识方便,它还为每个网站提供了一个活跃度指示条,通过指示条长度来区分每个网站的活跃程度。图13 九宫格  也许你会好奇不同颜色的活跃条都有什么区别,其实这可能是笔者刚才没有讲清,其实这里的颜色都是由IE9根据网站图标的色彩自动配置而来,并无特殊含义。  此外你还可以通过右键,任意删除不想要的网站或是直接添加至开始菜单。当然也可以将九宫格中的图标隐藏,以防隐私被他人窥视。图14 右键菜单选项  五、 新功能之&&分页与合并  &分页&已经是浏览器中的必备选项,比如当需要将两个网页并排观看时,就可以很方便地把其中一个选项卡拖离浏览器,松手后该页面将自动组成一个新窗口继续显示。  而接下来我们再利用 Win7 强大的 AeroSnap 特性,将两个窗口分别拖至屏幕的最左端和最右端,松开手看一看吧,是不是两个网页已经规规矩矩地排放好啦!图15 网页并排显示  当然拖出的窗口也能还原,方法和上面正好相反,还是按住选项卡将其拖回另一窗口即可。图16 将选项卡拖拽还原  六、 新功能之&&标签崩溃还原  IE9 强化了崩溃还原机制,每个标签页都是互相隔离的,这样做的好处十分明显,当一个选项卡出现问题时,并不会像旧版那样殃及池鱼,导致整个IE崩溃,而是将损失限制在单个标签之内。  即便故障发生在整个框架方面 IE9 也有对应之道,再次启动后会自动在窗口底部弹出&还原对话&钮,一键即可还原回故障前样子。当然在正式版中,这种情况已经极少见到了。图17 崩溃还原机制  除了意外崩溃外,IE9 也提供了网页关闭撤销。使用时只需新建一个选项卡,点击&重新打开已关闭选项卡&选择即可,当然你也可以通过&重新打开最后一次会话&快速还原最后一组网页。图18 网页关闭撤销4IE9全新下载管理器 插件性能评估!  七、 新功能之&&免打扰通知方式  旧版 IE 的通知信息都是以对话框形式出现,难免会干扰到用户的操作。而在 IE9 中,所有这些通知框都会以全新面貌出现在浏览器底部,不但不再遮挡用户的视线,甚至你还可以暂时不用理它,等到方便时再去处理。图19 新版通知方式  八、 新功能之&&下载管理器  下载管理器终于被微软搬上了 IE9 舞台,界面也与大家在 RC 版中看到的差不多,点击下载链接后,能够直接在页面底端弹出一个保存栏,这里总共提供了&打开&、&保存&、&另存为&、&保存与打开&四组按钮,满足一般的应用应该是没有什么问题了。图20 下载前询问  下载面板分成精简版和完整版两种,精简版比较简单,只有下载文件、百分比、剩余时间三个选项。如果感觉信息不够具体,还可点击&查看下载&进入到完整版下载管理器。  完整版的内容相对丰富,除了会标识各个下载项的详细进度外,还有保存路径、实时速度、来源网址、文件大小等一些更具体的信息。  下载完毕或者下载中还能通过右上角选框筛选定位,总之相比之前的 IE8 可是方便了太多。图21 下载管理器  此外下载完毕后,SmartSceen 还会对文件自动扫描,以确定文件安全性。当然由于众所周知的原因,笔者建议还是自己安装一款杀毒软件更靠谱。  九、 新功能之&&插件性能评估  &加载项管理器&是笔者最为欣赏的一个改进,不同于IE8中简单的插件管理,加载项管理器除了具有基本的开启与禁用功能外,还自带了一个性能评估,能够自动计算出每款插件所需要的启动用时。  此外这项功能还会在浏览器启动过慢时自动打开,相当智能。图22 插件性能评估  此外我们也能自行设置超过多少秒后才予以提醒,手工禁用加载项时也能看到加载用时!图23 手工禁用插件时的耗时提醒5IE9中文正式版HTML5性能实测体验!  十、 新功能之&&HTML5支持  熟悉 Web 技术的人可能都知道,传统浏览器的多媒体功能(如视频、动画、音频、交互等)往往是通过 Flash 或 QuickTime 这样的插件实现,由于需要一次安装(还有日常的频繁升级)有时想想也挺麻烦的。  于是新一代 HTML5 标准应运而生,和现行的 HTML4 相比,新版的一个亮点就在于引入了音频和视频两个标签,也就是说原有网页多媒体功能理论上都可以由 HTML5 自己搞定,这也是为何 Safari、Chrome、Firefox、Opera 等业界主流浏览器。统统削尖脑袋去支持 HTML5 的原因所在。  作为微软最新一代浏览器产品,IE9 也提供了 HTML5 支持,不过从实测情况来看,IE9 对于 HTML5 的支持程度还不太高,很多 HTML5 搭建的视频和音频资料都无法在IE9中正常打开。  笔者做了一个小测试,分别打开了一组由 HTML5 编写的网页,发现除了微软自己的评测平台外,大多数第三方 HTML5 网页的表现都不是很好。  最终 Sights 的 HTML5 评分给出了一个权威答案,和最新版 Chrome 11 相比,IE9 的差距果然明显。图24 IE9对于HTML5支持不是很好图25 HTML5评分对比  十一、 新功能之&&GPU加速  IE9全面支持GPU硬件加速,可以借助显卡GPU的效能提高Web文字、视频、SVG(可缩放矢量图形)等元素处理速度,Direct2D和DirectWrite图形渲染任务也可以由原来的CPU处理改成GPU处理。不但能够大幅提升网页显示速度,还使让网页高清视频播放成为了可能。  那么开启后真能让浏览速度增倍吗?我们做了一个小测试,这里利用了微软提供的两组网页测试IE9 GPU加速。  其中&&是通过在网页中生成一组任意游动的小鱼,由用户控制鱼的数量,观察不同鱼数下的实时帧数(FPS),同种环境下帧数越高、CPU占用率越低,则表示浏览器性能越好。图26 &水族箱&对比(鱼数:500 分辨率:)  而&&也与之类似,网页开启后会自动产生一组精灵投送礼物,网页会根据实时统计的帧率自动调整精灵数量,与此同时还会有HTML5 audio标签播放背景音乐,和&水族箱&一样,同种环境下精灵数越多、每分钟投送的礼物越多,则表示浏览器的性能越好。图27 &圣诞老人&对比(分辨率:)  此外我们还进行了其他一些类似的测试,截图如下。图28 HTML5 Blizzard图29 Sing the ABC's图30 Speed Reading(分辨率)6IE9+Win7最强组合 网络防追踪功能  十二、 新功能之&& 增强版SmartScreen、跨网站脚本(XSS)筛选器  SmartScreen在 IE9 中有所增强,可以为用户带来更好的反钓鱼反恶意软件保护,同时它还能够与新版下载管理器实现配合,每次下载完毕,SmartScreen 都会自动进行扫描,如果发现威胁,将会立刻弹出警告信息。图31 SmartScreen正在扫描下载文件  跨网站脚本(XSS)筛选器则更主要用于对付联机威胁,一般来说这类攻击往往是将网站的漏洞作为攻击目标,通过记录用户登录口令和密码来实现恶意攻击。在 IE9 中,跨网站脚本筛选器会自动检测系统漏洞,一旦发现将直接禁用有害脚本。  十三、 新功能之&&追踪保护  &追踪保护&其实可视为现行 InPrivate(隐私保护)的一个延伸,主要用来屏蔽第三方网站所发出的无关请求。很多情况下第三方网站(主要指恶意网站),往往会通过向浏览器发送请求来获取一些用户信息,而这些信息又常会被利用在广告群发等其他损害用户利益的方面。  在 IE9 中,追踪保护是由用户自行设立一份跟踪保护列表(TPL),每次打开网页时 IE9 都会根据 TPL 的记录屏蔽这此网站的请求(非主动请求),从而实现隐私保护。  不过考虑到大多数网友的实际情况,TPL 被设计为可从网上自动更新,用户只要进入菜单&&安全&,开启&追踪保护&即可。图32 IE9追踪保护  十四、 新功能之&&Win特性支持  作为微软的自家软件,IE9 与 Win7 的配合自然无可挑剔,Jumplist、AeroSnap、任务栏缩略图、任务栏图标层叠、下载进度展示,但凡你能叫得出名的 Win7 特性几乎都能支持,废话不说看图吧!图33 Jumplist图34 图标层叠、下载进度显示图35 任务栏缩略图  十五、 加速器、隐私浏览、光标浏览  此外 IE8 中经典的加速器、光标浏览、隐私浏览(InPrivate)也被继承了过来,不过这次已经无法称之为亮点了,毕竟已是明日黄花。图36 InPrivate浏览图37 加速器7IE9正式版性能测试 ACID3与资源占用  十六、 性能评测  看了这么多,相信您已经对 IE9 的种种新功能有所了解,那么性能方面又会如何呢?我们接下来还是通过一组小测试直观展现。图38 评测环境  1. 兼容性测试  ACID 是一个由 WaSP(网页标准计划组)编写的针对网页浏览器的测试页面,目前最新版本为 ACID3。主要测试一款浏览器的 DOM Script 能力及 CSS 渲染、SVG、WEB 2.0规范等,除要求得分越高越好外,还必须动画渲染整齐,每个像素都应与官方参考结果完全一致。图39 IE9测试截图图40 ACID3测试结果对比(单位:分 柱图越长越好)  测试结果:IE9 得分95分;IE8 得分20分;Firefox 得分97分;Opera 和Chrome 均为满分。  2. Javascript  IE9 全新内置了Chakra Javascript引擎,充分利用了当下主流的多核 CPU,在编译、执行、运算等方面表现更快。  同时还与 DOM 紧密集成,使得网络应用运行更顺畅。我们通过SunSpider Javascript(0.9.1)和Google V8 两组测试页对五款主流浏览器进行了测试,结果如下。  注:红色条单位:ms 柱图越短越好;蓝色条单位:分 柱图越长越好图41 Javascript测试结果对比  测试结果:可以看到 IE9 的新引擎还是相当给力的,不但相比 IE8 有了明显提高,而且已经与其他对手站在了同一起跑线上。  当然由于不同的 JS 测试引擎往往有所侧重,因此在个别测试上略高或略低于对手不必深究。  3. 资源占用  资源占用也是一个不可忽视的话题,具体表现如何呢?我们分别统计了五款浏览器在不加载任何页面和单页面、三页面、五页面四种情况下的内存占用对比,最终统计入下表。  注:测试网站(网易、21CN、新浪、太平洋电脑网、政府网)图42 内存占用图  测试结果:之前在 RC 版出现在内存占用大的问题,并没有在正式版解决。可以看到从第一个页面开始,IE9 的内存占用便急剧攀升,随后一直高居不下,最高竟达到 675.4MB 之巨。  而相比之下,Firefox、Opera、Chrome乃至IE8的表现都要比其好得多,也许微软是不是要考虑发一个补丁包解决一下了!8IE9正式版广告拦截能力测试 评测总结  4. 广告拦截  IE9 在广告拦截上并没有比老版有所提高,我们通过着名网站()进行了测试。发现在默认出厂状态下,IE9 的成功拦截数为 24,未拦截3,总拦截率 88.9%,与同等环境下的IE8的成绩完全相同,问题也是出在于第 12、16、27 三个测试项上。图43 广告拦截测试截图图44 广告拦截对比(单位:个 蓝色柱图越长越好)  5. HTML5兼容性  之前我们曾对比过 IE9 和 Chrome 11 的 HTML5 评分,那么和其他浏览器相比,又是个什么状态呢?该测试总分 300 分,分数越多,说明浏览器对 HTML5 标准的支持程度越高。图45 HTML5评分对比  测试结果:IE9 得分130分;IE8 得分32分;Opera 得分234分;Firefox 得分255分;Chrome 得分293分。IE9 仍是除 IE8 外得分最少的浏览器软件。  6. 网站兼容性  IE9 兼容目前绝大多数网站,事实上从 RC 版到正式版的这段时间内,笔者几乎从未用过地址栏上方那个兼容性按钮。而且从目前的测试来看,支付宝、财付通等使用正常,国内主流网上银行也都没有问题。关于这一点我们还将在近期推出专门的评测文章,敬请期待。  写在最后  可以看到和上一版 IE8 相比,IE9 无论在功能、外观、易用性、兼容性、广告拦截等方面均有较大提升,可以说是继IE6后的的又一里程碑式软件。  不过从测试情况来看,IE9 在 HTML5 支持、内存占用率等方面仍需提高,尤其是内存占用,相比其他主流浏览器差距较大。  而且由于内核改动较大,一些国内第三方 IE 外壳浏览器明显在速度上跟进不够,偶尔会冒出一些莫名其妙的小故障。当然随着 IE9 逐渐被大家接受,相信这一点也将慢慢得以解决!
软件论坛帖子排行
最新资讯离线随时看
聊天吐槽赢奖品
相关软件:
大小:57.26 MB
授权:免费
大小:791.38 MB
授权:共享当前位置: >
> HTML5 SVG和snap.svg的超酷天气预报设计特效
HTML5 SVG和snap.svg的超酷天气预报设计特效
脚本大小:90.6KB
软件语言:简体中文
脚本类型:
脚本授权:免费软件
更新时间:
脚本类别:html5
相关链接: 未知官方&&
应用平台:
网友评分:
内容介绍热点排行下载地址相关内容
3D幻灯片:一个HTML5+CSS3技术的3D网页内容切换特效;灰色背景,右下角会出现一个控制按钮,可上下左右控制网页向四个方向滚动切换,视觉集中在页面中央爱情表白专用代码是一段实现了在手机端出现的触屏滑动翻页效果代码,本段代码适应于所有网页使用,有兴趣的朋友们可以前来下载使用今天给大家介绍一款HTML5播放器Video.Js,该HTML5视频播放器可以自己定义外观,包括整体颜色,播放按钮定制等功能。总体来说,Video.Js是一款很不错的视频播放器。输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段HTML5驴子跳游戏源码,制作很漂亮的一款HTML5+CSS3网页游戏,想研究HTML5技术的朋友,您可不要错过这款网页游戏哦,虽然是游戏,但却考验了作者很综合的HTML5编程水平今天我们要来分享一款全新的HTML5应用,它是一个基于HTML5的在线PDF阅读器,虽然Chrome已经自带了PDF阅读器,但是其他的浏览器不一定自带。有了这款HTML5 PDF阅读器应用,video.js是一个JavaScript和CSS库,使得它更容易使用和建立HTML5视频,今天。这也被称为HTML5视频播放器一款html5表单实例select表单样式美化select单选框表单提交代码今天向大家介绍如何使用css3创建3d的立方体,操作方法为:上下左右键,实现立方体的翻转旋转效果
HTML5 SVG和snap.svg的超酷天气预报设计特效
CopyRight &
JB51.Net , All Rights Reserved前端在线资源
本文地址:
一、关于Snap.svg
日,第3届(如果我没记错的话)HTML5全球开发者大会在旧金山举办。Adobe在此次大会上宣布了一件事情:建立了一个名叫Snap.svg的开源项目。其目的在于摒弃Flash插件,将Flash的特性带到web上。
Adobe表示,”Snap.svg是一个强大且直观的SVG动画内容操纵API,支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能”。
Adobe支持的项目,自然其产品中会有体现,例如DreamWeaver中的PhoneGap, 这里的Snap.svg应该也会集成在其Web开发工具中,例如Edge.
我早在半年前的文章中就说过,SVG貌似要兴起,其判断来自国外最新的技术文章中SVG所占比例越来越大。
前不久看到的相关的趋势曲线似乎印证了这个趋势:
SVG趋势上升,Canvas则下降之势,至于VML,似乎已经死了很久了。
SVG开始升温,并不是因为Snap.svg, 而是大势所趋;但Snap.svg为SVG的进一步升温肯定贡献了不少能量。
Snap.svg的作者就是著名的矢量库Raphael.js的作者,Adobe的员工Dmitry Baranovskiy. Raphael.js的优点在于兼容低版本的IE浏览器,借助VML语法。似乎很不错的东西,但是,13年,Raphael.js出现了明显的拐点(更多趋势可参见):
Raphael.js下降了。其下降并不是因为上面的easeljs, 因为EaselJs, KineticJS都是操作2D Canvas的库,Raphael.js是与SVG打交道的。SVG趋势是上升,因此,显然,百分之一万的,Raphael.js趋势下降是其他东西出现导致的。我认为其最大的竞争对手就是其同父异母的弟弟”Snap.svg”.
Snap.svg是面向现代浏览器开发的,虽然其不支持低版本的IE浏览器,但是,正因为不需要考虑到兼容,所以,SVG的一些高级特性其就能很好的支持,同时,库JS文件的大小也小很多,可以更专注、更高效、更精彩。
时代发展,移动兴起、软硬件不断更新。低版本IE浏览器半个身子已经进博物馆了。在这种大时代趋势下,Snap.svg的兴起是必然之势。
国内的技术发展总是滞后国外半年~2年之久。别说Snap.svg, 就连SVG在国内也似乎如北方的寒冬,资料寥寥,相谈甚少。这种状况类似于5年前的比特币,丫的资料聊聊,详谈甚少,结果错过了超好的经济投资机会。如果我告诉你,企鹅的股票未来一定会大涨,1年涨92%,而其他人都没有意识到,你会怎么做?显然趁股价还没上去多多入手啊!
大部分的人,喜欢观望,喜欢随大流,金钱投资也好,技术投资也好。哎呀,这个技术挺热的挺吃香的,我也进去学一把。锅就那么大,大家都进去了,显然每个人吃的东西就少了。
但是,现在,有一个吃的人很少,未来一定会越来越大的大锅,你愿不愿意过来做这个技术投资?没错,这个大锅就是SVG,而锅里的大勺子就是Snap.svg. 你是希望一直成为一个跟屁的技术随流者,还是希望成为行业翘楚、技术的弄潮人,好比nodejs届的朴灵。
愿不愿意投资,选择在你自己~~
前端的方向
技术发展会导致分工越来越细,前端也是如此,专门写页面的、专门做前端运维的、专门写交互以及通信JS的,以及专门做图形视觉特效开发的。因此,可能会面临技术发展方向的问题。想想自己的团队,想想自己的性格,想想自己的理论基础,哪个适合,向哪个发展?而不是哪个有前途向哪个发展。因为,不管哪门技术有前途,你学不好,你还是没前途。因此,如果你的性格,理论基础更适合偏后的前端发展,你可以关注SVG,但没必要深入,因为,你花double的时间也不如那些对动画有见解、对图形敏感、有设计基础的家伙学得好的。
还是那句话,
愿不愿意投资,选择在你自己~~
二、Snap.svg的学习
Snap.svg还是相当年轻的一个SVG库,要说资料,那必须相当少啊!目前比较靠谱的就是的快速入门以及。然而,这个目前最靠谱的官方文档其实也是相当的不靠谱。
怎么个不靠谱法呢?哈,参数名称标注错误,返回类型不准确,api描述直接拷贝自Snap.svg.js文件的注释。没有API对应的Demo示意,就连示意的源代码都没有。对应源JS的位置也不准确。API名称排列顺序让人搞不明白,页面过高,快速导航困难,阅读体验糟糕等诸多问题。
对于一个新人而言,尤其是中国的开发者而言,这个诚意不足的文档有碍大家的快速学习啊!
不急,因为我也要学习Snap.svg,我可不喜欢每次都去翻不知所云的官方文档,因此,最近两周,顶着一文未发的压力,将Snap.svg官方变验证边翻译成中文,同时,几乎每个API都配以实时的demo,并附上相关的源代码。于是,大家一眼看过去就知道API是怎么使用的,返回的值是什么,对SVG产生了什么样的影响,这显然要比官方的文档帮助大了。
关子卖了这么多,该现真身了。
您可以狠狠地点击这里:
API兼demo页面的界面大致如下所示:
涵盖Snap.svg 150多个API,如果您一一把这些API都啃下来的话,恭喜你,你的SVG实战技术又上升了N个台阶。
后期,我会附上一些复杂的实际应用demo.
文档下载与维护
目前,我已经将该文档开源在Github上,地址为:
为了更好的维护性,文档页面采用的是php格式。如果您的本机支持php,则您可以通过Github下载整个文档包并访问。如果您的本机没有安装apache等,也没关系,直接点击上面的在线的地址就可以。
欢迎参与整个文档的维护。包括,您可以修改一些表述不准确的地方,书写错误的地方,补充一些说明甚至添加一个demo等。
三、如何下手Snap.svg API中文文档
Snap.svg API中文文档的API排列顺序,基本上就是按照26个英文字母的顺序过来的。优点是便于查找,但是呢,如果学习按照这个顺序,可能就会有点无所适从。所谓顺藤摸瓜,芝麻开花。
如何个学习顺序?不急,先简单讲解下各个API集团各自的作用。
//zxx: 诸位要先知道SVG的一些常规基础知识,否则,下面的可能会不知所云。可以百之,或谷之,或者翻阅我之前的分类为“SVG相关”的一些文章。
Snap.svg分为如下一些API集团,Element, Fragment, Matrix, Paper, Set, Snap, mina.
分别表示:元素、片段、矩阵、绘制、集合、Snap和mina.
其中Element可以看成是包装后的DOM元素,性质等同于jQuery中的$()包装器。Fragment其实就是片段元素。Matrix矩阵是图形变换用的,参考CSS3中的transform变换。Paper是绘制矢量图形用的,画圈圈,画方块,画路径等。Set是元素集合,可以看出是多个Element的数组集合. Snap包含一些全局方法,性质类似于jQuery中$.的些方法。mina为动画专属,包含各类缓动函数等。
于是,我们的学习顺序可以是这样:
如果获得一个SVG元素,这个是万事之源啊,因此,务必先熟悉Snap()这个方法。
为了培养兴趣,快速入门,我们先学习如何绘图。也就是先熟悉Paper.
绘制的图其实就是Element,于是,我们就学习Element的各种方法,事件处理什么的了。
由于Fragment也是Element的一种,也就顺便把Fragment拿下。
有时候我们要处理多个元素,也就是Set了。
我们可能希望元素可以翻转啊,变形啊什么的,这就可以用到Matrix了。
是不是还有一些全局方法可以让Snap.svg更强大啊,恩,看看Snap中有什么宝贝。
至于mina, 一些缓动函数而已,任何时候拿出来瞅瞅都是可以的。
四、新年快乐,年会中大奖
欢迎关注我的微博:
众人:又不卖肉,有啥好关注的~~
鑫:今年是什么年啊?马年啊。加你一个粉丝,不就是“马年加鑫(薪)”的意思嘛!哈哈!大家多多关注,么么哒~
以上~祝你好运!
本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。
本文地址:
(本篇完)
相关文章 (0.758) (0.167) (0.158) (0.132) (0.132) (0.132) (0.132) (0.132) (0.083) (0.083) (RANDOM - 0.075)
标签: , , , ,
赞助商广告():
如果你月薪不足20K,不妨
这里有最全的web前端开发视频
如果你有1~3年前端开发经验,不妨
听说、你想学JS?不妨
热门总排行

我要回帖

更多关于 svg.js 与 snap.svg 的文章

 

随机推荐