SVG可以说是目前比较流行的图片格式,使用领域也十分广泛,例如:web 前端页面,Android ios 等移动应用。都可以使用SVG的图片格式。今天就要和大家谈一谈 SVG 在Android中的应用,SVG的引入其实在我之前的文章里已经有谈到。其实 这个文章就是 Android 加载SVG 的原理。文章地址点击进入(Path 的高级用法)。还有一篇是谈到用 Path 写的例子,仿滴滴打车倒计时效果 ,为什么要谈这个文章,因为这篇文章,告诉我们这个 Path 高级用法 能 把复杂的效果用很简单的方式实现,也很好理解,增大了我们view的绘制效率。
今天主要谈的是Path 的SVG 的应用。其实很简单,经过我们上两篇文章的理解,看过的朋友应该知道这个原理。就是我们只要能获得到一个绘制的“路径”,我们就能把这个动态的效果给实现。先看图:(图片百度的)
所以主要问题就是如何获取到“路径”,我们找到原因了。那SVG格式的图片是什么?我们能从这图片里面拿到什么?能拿到 “路径”吗?答案是肯定的。
既然能拿到路径,我们来看看 一个 svg 格式的图片是什么样的 ,路径在哪里?
下面是一个 svg 格式图片打开的内容:
- <svg xmlns="http://www.w3.org/2000/svg" id="svg" class="svg" viewBox="0 0 960 480" preserveAspectRatio="xMinYMin meet">
- <path fill="#B4BEC8" stroke="#B4BEC8" stroke-width="2px" stroke-miterlimit="10" d="M570.14 440.2l-29.165-28.99c-7.103-8.5-6.152-36.718-6.02-40.665H425.048c.133 3.947 1.082 32.164-6.018 40.666l-29.166 28.99c-1.237 1.404-1.712 2.505-1.623 3.37h-.054c.76 7.727 6.664 6.332 13.607 6.332H558.01c6.696 0 12.412 1.27 13.493-5.56.58-.953.274-2.282-1.364-4.14z" style="fill-opacity: 1; stroke-opacity: 0; -webkit-transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in-out; transition: fill-opacity 1s ease-in-out, stroke-opacity 1s ease-in