您的位置:首页 > 移动开发 > Android开发

Android 使用SVG动画

2017-01-30 10:18 736 查看
SVG是指可伸缩矢量图形 (Scalable Vector Graphics),它不同于传统的位图,不是通过存储图像中每一点的像素值来保存与使用图形,而是通过 XML 文件来定义一个图形,通过一些特定的语法和规则来绘制出我们所需的图像——同样是使用一张图片,SVG 的方式是事先定义好怎么去画这个图,然后等要用的时候再把它去画出来,而使用传统的位图的话就是已经有了画出来的图,然后要用的时候直接把画好的图拿出来用。这样一来的话我们就很容易可以分析出它们两种方式之间的优劣之处:

SVG 是在要用图的时候再把图画出来,所以理所当然的在图片显示的时候会花费更多的时间消耗更多的资源,所以SVG 并不太适合层次过于复杂细节过于繁多的图片。 

位图是事先已经画好的图片,所以适应性必然没有 SVG 好,同一张图片在不同分辨率下显示会有差异。 

SVG 的文件里存储了绘制图片的相关信息,所以我们能够对图片的线条有一个非常清晰的感知,这在做动画的时候特别有用。 

SVG 没有存储任何图像的像素信息,所以 SVG 的文件体积远小于传统的位图文件。 

SVG 的文件画出来的图像是矢量图,所以不会存在失真的问题,理论上支持任何级别的缩放。 

但是Android对于 SVG 的支持是从 Android L 开始的,它的 SDK 里面加入了 VectorDrawable , AnimatedVectorDrawable 等类帮助我们构建 SVG 图形以及动画,并且你可以在 xml 文件里面直接使用 <vector/> 标签绘制 SVG 图像以及 <animated-vector/> 标签为 SVG 图像分配动画。而且目前并没有官方的 support 包来帮助我们对运行着 Android L 之前的系统的设备做兼容,而在一些开源社区里一些人做的兼容包也都还没有那种比较完美的解决方案,总是会有一些问题——这意味着,如果不想将就的话,就只能等到市场上基本都是
Android L 或以上的设备的时候,才有可能在生产中大规模的全面的用 SVG 替换位图了。



lypeer大神使用SVG制作的谷歌风格时钟:



SVG基础知识学习

1.旋转的Android字母,源代码:

<svg width="500" height="500" xmlns="http://www.w3.org/2000/svg">
<g transform="rotate(291 160 160)">
<text font-family="microsoft yahei" font-size="80" y="160" x="160">Android</text>
<animatetransform attributename="transform" begin="0s" dur="5s" type="rotate" from="0 160 160" to="360 160 160" repeatcount="indefinite">
</animatetransform>
</g>
</svg>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: