android图片系列 (5) - SVG 补充资料

好了,android 中的 SVG 我们都草草的看了一遍,虽说不会什么高深的应用,但是最起码我们可以简单的使用了。这就是基础啊,各位,基础最重要,要是这些基础的 SVG 使用你都不会,那谈何去看别人使用 SVG 写作的高级效果和应用呢,我在学习过程中总是碰到这种基础知识上的缺失。

好了,关于 SVG 我们还是有一些东西要补充进来的

SVG 辅助工具

很多时候 uI 不会提供 SVG 给我们,这就需要我们自己去转换成SVG 啦

  • SVG在线制作网站
    要翻墙

  • vectormagic软件, 有 window/Mac,可以把位图转成 SVG矢量图,Mac 版本的我试了下不花钱总是不成功,window 的没事,破解也好找,mac 的真头疼

  • iconfont
    阿里大妈的图片资源站,里面的图片可以出 png 和 svg 的,不过都是个人设计的,有些 svg 可能不是标准的 path,也提供字体svg图片,文章下面有介绍

  • vector Magic
    免费次数有限, PNG 图片转SVG

  • online-convert
    PNG 图片转SVG

  • svg2android
    一个网站直接上传你的svg图片就能生成Vectordrawable,android 中使用的不是标准 SVG,这个我们可能需要

  • svg path 解析网站
    很方便的可以查看,提取 svg 图片中的 path 路径


animated-selector 矢量选择器

选择器 selector 我们使用的很多了,选择器让我们可以在控件不同状态时显示不同的图片,恩很好,但是还差了点什么。对,就是变化,就是状态改变时的切换动画,结合 SVG 图片,SVG 动画,这就诞生了animated-selector 矢量选择器,可以在状态切换时指定执行某一个矢量动画,帧动画也是可以支持的,具体的看下例子吧,我就不写了,主要是 path 不会画呀...

学习例子在这里 Android高级动画(2)


SVG 的其他实现

在 android 平台上除了google 提供的支持外,我们还可以使用一些第三方工具提取svg 图片中的 path 路径,然后把这些 String 的path 路径转成 canvas 中的 path对象,就可以直接在canvas 上绘制出来了,另外结合ObjectAnimator动画还可以实现自动一的 SVG 动画,灵活性比 google 的 AnimatedVectorDrawable 要灵活一些,当然简单性上是比不了的,下面有2个不过的实现,第一个很老了,第二个是国人写的,很友好,适合大家学习,这期中的基础就是 path 绘制了,学会后你会发现其实没什么,但是不学不研究你就是不会,android 的基础知识很重要的,很多应用你看着很高大上,其实研究过后都是对android基础知识的应用。

  • path 相关基础知识
    感谢GcsSsloop魔法师给我们提供了如此优秀的 canvas 基础知识教程,注意这是成体系的基础教程,非常难得,目前是学习 canvas 这块最好的了,没有之一。讲解到位,简练,提供了不少学习 demo。

  • pathview 这个比较老了,而且有的 path 解析有问题。学习笔记

  • PathAnimView 这个很新,还是国人写的,一直在维护,文档很友好。是一个学习 自定义 view path 绘制的好文,内容包含 path 的逐渐填充,残影效果。推荐学习!

关于 svg 转 path对象的库大家可以从第二个库里提取,也可以自己去 github 上找


SVG 学习例子

  • GoogleClock
    一个兄弟使用 SVG 写的数字变换,使用的 pathData 做的动画,话说我看过之后没看懂他这2个关键点对不上的 path 路径是怎么做的 pathData 变换动画的,我自己提出path 试了下报错了,path 转变失败...哪位看懂了在这里说下啊。


  • SVG_Demo
    使用一个第三方pathview 在 canvas 上绘制 path,话说这个只看懂到这了,至于里面那个画笔的轨迹动作我是没看懂

SVG资源库

  • 阿里大妈的 Iconfont 丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。重点是可以把你喜欢的 svg 图片打包成 ttf 字体,然后在 textview 中使用,当然有限制啦,这样就支持单色啦,看图
device-2017-07-07-235021.png

因为使用的是自定义打包的字体 ttf,所以可以支持 textview,但是注意字体 SVG 图片的大小是和字体一样大的哦

Snip20170708_1.png

大家注意没有,我本想使用3个字体 SVG,但是部分 SVG 显示有问题,我的字体 uicode: "android:text="今天很高兴 \ue603,\uf0347,\ue604"", 坑爹的是阿里大妈对于这\uf3047这样带 f 的5为的 uicode 显示不出来,不知道为啥啊。

好了吐槽了一下大妈,但是阿里大吗还是很给力的,svg 图片资源很丰富的,我们不使用 ttf,还可以下载 svg 图片来使用的嘛


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,390评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,821评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,632评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,170评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,033评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,098评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,511评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,204评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,479评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,572评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,341评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,213评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,576评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,893评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,171评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,486评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,676评论 2 335

推荐阅读更多精彩内容