Android群英传--动画机制与技巧（二）

继续上一篇的，总结一下最后的SVG矢量动画。

SVG矢量动画：

介绍：

矢量动画是Google在Android5.X中新增加的动画类型。要了解这种动画类型，首先我们来了解一下什么是SVG。

引用自W3C文档：http://www.w3school.com.cn/svg/svg_intro.asp

什么是SVG？
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

那么SVG有什么优势呢？

引用自W3C文档：http://www.w3school.com.cn/svg/svg_intro.asp

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

以上就是SVG的一些简单介绍，可以看出，SVG可以很好的适应不同种屏幕分辨率，因此可以很好的进行适配工作，减少了图标的设计。

那么SVG动画就是使用SVG图形做出的动画效果。

SVG的基础知识：

SVG使用 <path> <script type="math/tex" id="MathJax-Element-1"> </script>标签来创建图像，我们可以在 <path> <script type="math/tex" id="MathJax-Element-2"> </script>标签中使用SVG所支持的命令来进行图形的绘制。

常用属性：

• fill：填充色

• stroke：文本颜色或者是元素轮廓颜色

• stroke-width：文本或元素轮廓厚度

• transform：图形变换

常用命令：

• M=moveto（M X,Y）：将画笔移动到指定的坐标位置，但是并不绘制

• L=lineto（L X,Y）：绘制直线到指定的坐标位置

• H=horizontal lineto（H X）：绘制水平线到指定的X坐标位置

• V= vertical lineto（V Y）：绘制垂直线到指定的Y坐标位置

• C= curveto（C X1，Y1，X2，Y2，ENDX，ENDY）：三次贝赛尔曲线，第一控制点X，第一控制点Y 第二控制点X，第二控制点Y曲线结束点X，曲线结束点Y

• S = smooth curveto（S X2，Y2，ENDX，ENDY）：光滑曲线，第二控制点X，第二控制点Y 结束点X，结束点Y

• Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY) ：二次贝塞尔曲线，控制点X，控制点Y 曲线结束点X，曲线结束点Y

• T = smooth quadratic Belzier curveto(T ENDX,ENDY) ：映射前面路径后的终点X，映射前面路径后的终点Y

• A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y) ：弧线，

  • RX,RY指所在椭圆的半轴大小

  • XROTATION指椭圆的X轴与水平方向顺时针方向夹角

  • FLAG1只有两个值，1表示大角度弧线，0为小角度弧线。

  • FLAG2只有两个值，确定从起点至终点的方向，1为顺时针，0为逆时针

  • X,Y为终点坐标

• Z = closepath() ：关闭路径

实例展示（一个螺旋）：

对应代码：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>

</svg>

关于更多的SVG的教程和标签可以去W3C的网站上去了解。http://www.w3school.com.cn/svg/index.asp

SVG在Android中的使用：

看了上边的那个螺旋图对应的代码是不是觉得画一个SVG图形很复杂？其实不用担心，因为SVG的写法固定，所以早已经有了很多优秀的SVG编辑器供我们使用，而不是自己计算每个点的值。

SVG编辑器：

• Inkscape官网

• sketsa官网

VectorDrawable和AnimatedVectorDrawable：

Android中提供了这两个API来进行SVG矢量动画的支持，其中VectorDrawable用于绘制xml文件的静态矢量图，而AnimatedVectorDrawable则用于将静态的矢量图做成动画，

VectorDrawable：

<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="200dp"
    android:viewportWidth="100"
    android:viewportHeight="100">
    <!--width和height表示该SVG图片实际的大小-->
    <!--viewportWidth和viewportHeight表示在该SVG图片中图形划分的比例，在后边图形的绘制中的数值都是按比例来进行的-->
    <path
        android:strokeColor="@color/colorPrimary"
        android:strokeWidth="1"
        android:fillColor="@color/colorAccent"
        android:pathData="
                           M 25 50
                           a 25,25,0,1,0,50,0"
    />
    <group android:name="test"><!--可以用group来组合多个path路径 -->
        <path android:strokeColor="@color/colorPrimaryDark"
            android:strokeWidth="2"
            android:pathData="
                             M 40 10
                             c 25,25,30,30,35,3"
            />
    </group>
</vector>

AnimatedVectorDrawable：

这个在AS2.2中需要放在animator文件夹下

<?xml version="1.0" encoding="utf-8"?>
<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/svg_drawable">

    <target
        android:animation="@anim/view_anim_rotate"
        android:name="test" />
    <!--其中name的名字要和使用的svg图片中的需要作用的图片名字一样-->
    <!--animation是要使用的动画效果-->
</animated-vector>

做完这两步之后，就可以将SVG图片作为背景放在imageView中，并在代码中控制动画的启动。

    <ImageView
        android:id="@+id/svg_img"
        android:onClick="svgAnima"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/svg_drawable"/>

在代码中直接开启动画：

ImageView imageView;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_svg_anim);
        imageView = (ImageView) findViewById(R.id.svg_img);

    }

    public void svgAnima(View view){
        ((Animatable) imageView.getDrawable()).start();
    }

现在梳理一下使用SVG矢量动画的整体流程：

1. 首先在xml文件中画出静态的SVG图形

2. 然后在AnimatedVector将静态的SVG图形和要使用的动画效果连接起来

3. 在布局文件中使用SVG图形作为图片

4. 在Java代码中需要使用动画的地方获取到SVG图片，并开启动画

这样一个SVG矢量动画就做出来了。