好了,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 图片转SVGonline-convert
PNG 图片转SVGsvg2android
一个网站直接上传你的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。PathAnimView 这个很新,还是国人写的,一直在维护,文档很友好。是一个学习 自定义 view path 绘制的好文,内容包含 path 的逐渐填充,残影效果。推荐学习!
关于 svg 转 path对象的库大家可以从第二个库里提取,也可以自己去 github 上找
SVG 学习例子
-
GoogleClock
一个兄弟使用 SVG 写的数字变换,使用的 pathData 做的动画,话说我看过之后没看懂他这2个关键点对不上的 path 路径是怎么做的 pathData 变换动画的,我自己提出path 试了下报错了,path 转变失败...哪位看懂了在这里说下啊。
-
AnimatedVectorDrawable实现可爱的图钉跳跃动画
一个很棒的 SVG 学习例子哦
-
SVG_Demo
使用一个第三方pathview 在 canvas 上绘制 path,话说这个只看懂到这了,至于里面那个画笔的轨迹动作我是没看懂
SVG资源库
- 阿里大妈的 Iconfont 丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。重点是可以把你喜欢的 svg 图片打包成 ttf 字体,然后在 textview 中使用,当然有限制啦,这样就支持单色啦,看图
因为使用的是自定义打包的字体 ttf,所以可以支持 textview,但是注意字体 SVG 图片的大小是和字体一样大的哦
大家注意没有,我本想使用3个字体 SVG,但是部分 SVG 显示有问题,我的字体 uicode: "android:text="今天很高兴 \ue603,\uf0347,\ue604"", 坑爹的是阿里大妈对于这\uf3047这样带 f 的5为的 uicode 显示不出来,不知道为啥啊。
好了吐槽了一下大妈,但是阿里大吗还是很给力的,svg 图片资源很丰富的,我们不使用 ttf,还可以下载 svg 图片来使用的嘛