【 Android 】Android 动态矢量图

背景：
2014 年 6 月 26 日 I/O 2014 开发者大会上 Google 正式推出了 Android L，它带来了全新的设计语言 Material Design，新的 API 也提供了 VectorDrawable ，意味着 Android 支持 SVG 类型的资源，也就是矢量图。

Material Design 时代的 Android 需要有声有色的东西来润色 App，增加用户体验。

示例GIF：

示例图.gif

静态矢量图可以使用 Android Studio 提供的 Vector Asset （在工程的 res 目录下右键 -> new -> Vector Asset ），也可以自己去写矢量图，但这不是本篇文章所要讲的。

动态矢量图

① 配置环境（使用 Android Studio 开发）
打开项目的 build.gradle(Module:app)，添加如下代码：

android {
    ...

    defaultConfig {
        ...
        
        vectorDrawables.useSupportLibrary = true
    }

    ...
}

dependencies {
    ...
    
    compile 'com.android.support:support-vector-drawable:26.0.0-alpha1'
    compile 'com.android.support:animated-vector-drawable:26.0.0-alpha1'
}

② 书写静态矢量图和动态矢量图文件
以 copy 这个文件为例，创建它的静态矢量图并命名： ic_copy_white_24dp.xml

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

    <path
        android:fillColor="#FFFFFFFF"
        android:pathData="M16 1L4 1C2.9 1 2 1.9 2 3L2 17 4 17 4 3 16 3Z" />
    <group android:name="sheet">
        <path
            android:fillColor="#FFFFFFFF"
            android:pathData="M19 5L8 5C6.9 5 6 5.9000001 6 7.0000001L6 21c0 1.1 0.9 2 2 2l11 0c1.1 0 2 -0.9 2 -2L21 7.0000001C21 5.9000001 20.1 5 19 5Zm0 16l-11 0 0 -13.9999999 11 0z" />
    </group>

</vector>

效果如下：

copy.png

创建它的动态矢量图并命名： avd_copy.xml

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

    <target android:name="sheet">
        <aapt:attr name="android:animation">
            <set xmlns:android="http://schemas.android.com/apk/res/android">
                <objectAnimator
                    android:duration="300"
                    android:propertyName="translateX"
                    android:repeatCount="1"
                    android:repeatMode="reverse"
                    android:valueFrom="0"
                    android:valueTo="-4"
                    android:valueType="floatType" />
                <objectAnimator
                    android:duration="300"
                    android:propertyName="translateY"
                    android:repeatCount="1"
                    android:repeatMode="reverse"
                    android:valueFrom="0"
                    android:valueTo="-4"
                    android:valueType="floatType" />
            </set>
        </aapt:attr>
    </target>
</animated-vector>

③ 让动态矢量图能够真正的动起来
在调用图片的类里面对图片做点击事件（图片的id 替换为你自己项目的图片名）
1）如果图片是在界面上显示的：

图片的id.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Drawable drawable = 图片的id.getDrawable();
        if (drawable instanceof Animatable) {
            ((Animatable) drawable).start();
        }
    }
});

2）如果图片是在 Menu 上显示的：

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    super.onCreateOptionsMenu(menu);
    getMenuInflater().inflate(R.menu.你项目里面的menu名, menu);
    this.menu = menu;
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    Drawable drawable = item.getIcon();
    if (drawable instanceof Animatable) {
        ((Animatable) drawable).start();
    }

    switch (item.getItemId()) {
        case R.id.图片的id:
            // TODO: 你想要实现的动作
            break;
    }

    return super.onOptionsItemSelected(item);
}

综上所述，图片就会在你点击的时候动起来，为 App 添彩！

完整项目已传至 GitHub，欢迎 Star 、Fork ！！！
https://github.com/cnwutianhao/AnimatedVector