Android 加载SVG动画

SVG可以说是目前比较流行的图片格式，使用领域也十分广泛，例如：web 前端页面，Android ios 等移动应用。都可以使用SVG的图片格式。今天就要和大家谈一谈 SVG 在Android中的应用，SVG的引入其实在我之前的文章里已经有谈到。其实 这个文章就是 Android 加载SVG 的原理。文章地址点击进入（Path 的高级用法）。还有一篇是谈到用 Path 写的例子，仿滴滴打车倒计时效果 ，为什么要谈这个文章，因为这篇文章，告诉我们这个 Path 高级用法 能 把复杂的效果用很简单的方式实现，也很好理解，增大了我们view的绘制效率。

今天主要谈的是Path 的SVG 的应用。其实很简单，经过我们上两篇文章的理解，看过的朋友应该知道这个原理。就是我们只要能获得到一个绘制的“路径”，我们就能把这个动态的效果给实现。先看图：（图片百度的）

所以主要问题就是如何获取到“路径”，我们找到原因了。那SVG格式的图片是什么？我们能从这图片里面拿到什么?能拿到 “路径”吗？答案是肯定的。

既然能拿到路径，我们来看看 一个 svg 格式的图片是什么样的 ，路径在哪里？

下面是一个 svg 格式图片打开的内容：

1.  xmlns="http://www.w3.org/2000/svg" id="svg" class="svg" viewBox="0 0 960 480" preserveAspectRatio="xMinYMin meet">
2.          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-out; stroke-dasharray: 474.095184326172px, 474.095184326172px; stroke-dashoffset: 0px;">
3.  
4.          fill="#C8D2DC" stroke="#C8D2DC" stroke-width="2px" stroke-miterlimit="10" d="M727.488 355.125c0 8.514-6.597 15.42-14.738 15.42h-465.5c-8.14 0-14.74-6.906-14.74-15.42V45.42c0-8.517 6.6-15.42 14.74-15.42h465.5c8.142 0 14.738 6.903 14.738 15.42v309.705z" 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-out; stroke-dasharray: 1645.18310546875px, 1645.18310546875px; stroke-dashoffset: 0px;">
5.  
6.          fill="#fff" stroke="#C8D2DC" stroke-width="2px" stroke-miterlimit="10" d="M489.01 343.713c-.042-4.223 3.447-6.254 3.605-6.352-1.963-2.866-5.018-3.263-6.102-3.31-2.602-.26-5.074 1.53-6.39 1.53s-3.356-1.49-5.506-1.448c-2.836.04-5.445 1.645-6.907 4.182-2.942 5.11-.75 12.672 2.116 16.814 1.4 2.02 3.072 4.305 5.268 4.22 2.114-.08 2.913-1.362 5.467-1.362 2.556 0 3.274 1.363 5.51 1.322 2.273-.04 3.716-2.064 5.105-4.098 1.61-2.35 2.273-4.63 2.313-4.748-.05-.02-4.434-1.7-4.48-6.75M484.807 331.31c1.168-1.41 1.953-3.37 1.738-5.327-1.68.068-3.713 1.12-4.916 2.53-1.08 1.247-2.027 3.245-1.77 5.16 1.87.143 3.784-.95 4.947-2.362" 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-out; stroke-dasharray: 115.244583129883px, 115.244583129883px; stroke-dashoffset: 0px;">
7.  
8.          fill="#3C4650" stroke="#3C4650" stroke-width="2px" stroke-miterlimit="10" d="M727.488 315.527V45.982c0-8.828-6.597-15.982-14.738-15.982h-465.5c-8.14 0-14.74 7.155-14.74 15.982v269.545H727.49z" 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-out; stroke-dasharray: 1547.85571289063px, 1547.85571289063px; stroke-dashoffset: 0px;">
9.  
10.          fill="#141E28" stroke="#141E28" stroke-width="2px" stroke-miterlimit="10" d="M251.2 48.887h457.205v245.52H251.2z" 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-out; stroke-dasharray: 1405.44995117188px, 1405.44995117188px; stroke-dashoffset: 0px;">
11.       

我们能看到，哟哟哟！！！这不就是xml 吗？里面有个标签叫 难道这就是我们需要的那个 path 路径 吗？对的 这就是我们需要的 path 路径了。所以我们只要 让美工 给我们一个 具有 path 标签的 svg 格式的图片，美工给你的svg 的格式图片 你一定要在 as 里面打开看看 ，因为 我之前就被坑了。美工给我一个svg 图片 怎么加载结果就是没有 动画效果，折腾了很久 发现 他给的svg 格式的图片 里面根本就没有 path 路径，这个美工在作图的时候要注意 ，svg 生成的 方式。不能太随意哟哟。 

我们看到里面有很多 标签 ，标签里面有很多属性 如： 颜色 线宽 透明度 等。每一个 path 标签就代表我们一个路径，所以我们才能看到有很多的线 在 绘制。而且是同时绘制的。

那好了，到了这里我们需要的 path 也有了，那问题来了。我们怎么拿到这个 path ？？

这是一个问题。

但是GitHub 上面已经有框架了： https://github.com/geftimov/android-pathview 我们用就行了。哈哈哈

拿来直接干。

使用 步骤：

1.第一是把 jar 包导入到lib 下面

2.我们需要的 svg 格式的图片

3.拿到两个类：PathView 和 SvgUtils，

这两类在 上面的 GitHub 里面有拿到我们的项目中就行了。

4.在xml 中加载我们的 svg 图片

    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/pathView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_centerInParent="true"
    app:pathColor="@android:color/white"
    app:svg="@raw/chart"
    app:pathWidth="5"/>

PathView 是我们上面的那个类。

5.在activity中 实例化对象：

        final PathView pathView = (PathView) findViewById(R.id.pathView);
        pathView.setFillAfter(true);
        pathView.useNaturalColors();
        pathView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pathView.getPathAnimator().
                        delay(100).
                        duration(1500).
                        interpolator(new AccelerateDecelerateInterpolator()).
                        start();
            }
        });

 

并 调用 开始方法。

以上就是 Android 加载 SVG 的实现方法了，大家一起学习，有错误请指出来，谢谢。