Android 加载SVG动画

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

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

Android 加载SVG动画_第1张图片

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

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

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

xmlns="http://www.w3.org/2000/svg" id="svg" class="svg" viewBox="0 0 960 480" preserveAspectRatio="xMinYMin meet">
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;">
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;">
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;">
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;">
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;">

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

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

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

这是一个问题。

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

Android 加载SVG动画_第2张图片

拿来直接干。

使用步骤：

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

Android 加载SVG动画_第3张图片

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 的实现方法了，大家一起学习，有错误请指出来，谢谢。

更多相关文章

随机推荐