SVG动画——Android 5.0新特性介绍(2)

先放点motivation

（GIF图点开，看动画）

要实现这个布局很简单，用FrameLayout加一个ImageView并设置一个图片，再在FrameLayout上放一个RelativeLayout，背景用这个矢量图。布局文件如下:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:padding="20dp"
                tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/card_view"
        android:layout_centerInParent="true"
        android:layout_width="260dp"
        android:layout_height="430dp"
        >

        <ImageView
            android:id="@+id/img"
            android:src="@drawable/p1"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <RelativeLayout
            android:id="@+id/card_content"
            android:background="@drawable/animate_rect"
            android:layout_width="match_parent"
            android:layout_height="320dp"
            android:padding="15dp">
            <TextView
                android:id="@+id/title"
                android:textColor="#03A9F4"
                android:textSize="25sp"
                android:layout_marginTop="6dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Vector card"
                android:layout_alignParentTop="true"
                android:layout_centerHorizontal="true"/>
            <TextView
                android:id="@+id/tv_content"
                android:gravity="center"
                android:layout_marginTop="18dp"
                android:layout_below="@id/title"
                android:text="Lorem ipsum dolor sit amet, Duis aute irure dolor in reprehenderit sunt in culpa quilaborum. in voluptate velit esse cillum dolore eu fugiat nulla ."
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                />


        </RelativeLayout>

    </FrameLayout>
</RelativeLayout>

怎么让它动起来呢?其实很简单,只要修改SVG图中的pathData就行,也就是从梯形变成一个长方形。原来的pathData的坐标和要变化的新坐标如图所示，

 

SVG文件内容：sharp_rect.xml

注意,我们把path加了一个name=”sharp_rect”,这是做动画效果是要指定这部分,所以需要给个独一无二的name作为id.

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="180dp"
        android:height="320dp"
        android:viewportWidth="180"
        android:viewportHeight="400">

    <path
        android:name="sharp_rect"
        android:fillColor="#000000"
        android:pathData="M 180,230 L 0,320 0,0 180,0 z" />
</vector>

下面做animate-vector drawable:

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/sharp_rect">
    <target
        android:animation="@animator/to_rect"
        android:name="sharp_rect"/>
</animated-vector>

在animated-vector里填入android:drawable=”@drawable/sharp_rect”,这是指定要产生动画的SVG。target里是需要动画的对象，这里我们的对象就是前面那个叫sharp_rect的梯形,所以name里填上它,然后animation填的是对应的动画文件。

动画用的是ObjectAnimator做的，内容如下：

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
                android:duration="330"
                android:interpolator="@android:interpolator/decelerate_cubic"
                android:propertyName="pathData"
                android:valueType="pathType"
                android:valueFrom="M 180,230 L 0,320 0,0 180,0 z"
                android:valueTo="M 180,75 L 0,75 0,0 180,0 z" />

值得注意的是,我们要从梯形变成矩形,就是对pathData进行修改,也就是propertyName要填入pathData,valueType是pathType,valueFrom是原来的路径(也就是梯形的路径),最终变成的效果是valueTo(矩形的路径)。这里有个要注意的地方，如果要进行path的变换，里面的点数必须要一样！

 

Ok了大功告成，最后只要把ImageView的src改成animate_rect就行了,并设置触发函数就行了

 final ImageView play = (ImageView)findViewById(R.id.icon_play);
        play.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Drawable drawable = play.getDrawable();
                if ( drawable instanceof Animatable){
                    ((Animatable) drawable).start();
                }
            }
        });

注意,上面我这种方法不是Android SVG推荐的用法,SVG动画尺寸应该尽可能的小,和简单,因为每次动画都会先把这些path先计算绘成Bitmap,然后上传texture到GPU,如果SVG太大意味着生成更大的Bitmap,占更多内存,消耗更多时间.Google的推荐是把SVG用于图标(icon)和按钮(Button),只有需要的时候才修改Vector的属性(比如alpha,width,height),因为如果SVG不用于动画,android会把这个图生成一个Cache来节省时间,如果SVG动画这个Cache就没有用了。如果要用SVG动画，请确保它“短小精悍”（Short and sweet）。

下面还有一些SVG动画的例子：

（GIF图，点开看）

Demo源代码： https://github.com/qianlvable/VectorCard

参考:

DevBytes: Android Vector Graphics (youtube视频,需翻墙)

VectorDrawables – Styling Android 系列

Transitioning to Infinity (一个很厉害的法国人,不过他的程序都是用C#写的,本文的BlueTooth的动画来源于这个博客)