手把手带你实现动态Vector

首先上效果图

QQ图片20170329221847.gif

（不知道vector是啥玩意的。可以在简书搜vector第一篇就是-_-）

还算ok吧，来，直奔主题

【One】
下载工具vectalign.jar
功能：转换2个svg至vector，并生成转换动画xml
具体详细，不妨百度vectalign
http://pan.baidu.com/s/1qXQUMi4

【Two】
上阿里巴巴图库
http://www.iconfont.cn/
随便找两个svg下载
那么示例如下两个

Image 004.png Image 005.png

【Three】
双击vectalign.jar运行（需配置好java环境）

Image 006.png

点击Load_SVG分别载入两个svg

Image 007.png

不用做任何更改，Export即可

Image 008.png

【Four】
新建工程
在app的build.gradle里加上这句
vectorDrawables.useSupportLibrary = true
目的是使vector兼容5.0以下设备

Image 014.png

再将刚才导出的文件导入
一个是4个xml文件
另一个是anim文件夹


完成后如下

Image 013.png

接下来，在布局中加入ImageView，设置app:srcCompat和onClick

Image 015.png

在java中加入以下代码

private boolean a = true;

---

    public void img(View view){
    ImageView imageView = (ImageView) view;
    AnimatedVectorDrawable morphing_start = (AnimatedVectorDrawable)
     getDrawable(R.drawable.vectalign_animated_vector_drawable_start_to_end);
    AnimatedVectorDrawable morphing_end = (AnimatedVectorDrawable)
   getDrawable(R.drawable.vectalign_animated_vector_drawable_end_to_start);
    AnimatedVectorDrawable morphing=a?morphing_start:morphing_end;
    imageView.setImageDrawable(morphing);
    if (morphing != null)
        morphing.start();
    a=!a;
}

如图

Image 016.png

好了，运行编译即可。