从零实现 Android 矢量动画

这是实现的效果

ezgif-2-e28de923c5.gif

创建这个 svg 动画的工具是 Shape Shifter。

1. 下载 SVG 文件

2. 将下载好的文件拖动到左下角

   
   TIM截图20180516195816.png
3. 添加新路径 TIM截图20180516200505.png
   TIM截图20180516200453.png

4. 选中路径 path_1，将它的笔画颜色、笔画宽度和笔画连接分别改成 #000000 、25 和 Round

   
   TIM截图20180516200921.png

5. 填入路径数据
   M 0 265 27 265 110 265 130 290 165 330 210 230L 230 200 250 300 290 430 350 100 370 310 390 290 410 270 500 267 510 267

   
   [TIM截图20180516201405.png-d8933f-1526472966661-0)]

这个路径不是无序的，前面的数字是 x 轴的数值，后面的则是 y 轴的数值，两个为一对。你一对一对输入的话能看到路径会不断边长

TIM截图20180516201405.png

6. 选中原来的路径 path 按 delete 删除。

7. 将动画时长修改为 1000 ms

   
   TIM截图20180516201921.png

8. 添加 trimPathEnd 和 trimPathStart 动画

   
   [图片上传中...(TIM截图20180516202311.png-a36a45-1526473408501-0)]
   TIM截图20180516202311.png

9. 修改动画的开始时间、结束时间、插值器和结束值

   
   TIM截图20180516202448.png
   TIM截图20180516202603.png

10. 导出动画

    
    TIM截图20180516202654.png
    TIM截图20180516202703.png

11. 将导出的 XML 文件复制到项目的 drawable 目录下，Android Studio 会自动把该文件转换成 AnimatedVectorDrawable

    
    TIM截图20180516202901.png

在这里可看到，版本要高于 15 才能使用 AnimatedVectorDrawable，如果你们的应用兼容低于 21 的版本的话使用的时候要注意这个问题

12. 修改布局文件和 Activity

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.administrator.avdsample.MainActivity">


    <ImageView
        android:id="@+id/img"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:srcCompat="@drawable/wave" />

    <Button
        android:onClick="animate"
        android:layout_below="@id/img"
        android:text="start"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

public class MainActivity extends AppCompatActivity {


    ImageView imageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = findViewById(R.id.img);

    }

    public void animate(View view) {
        Drawable drawable = imageView.getDrawable();
        if (drawable instanceof AnimatedVectorDrawable) {
            ((AnimatedVectorDrawable)drawable).start();
        } else if(drawable instanceof AnimatedVectorDrawableCompat){
            ((AnimatedVectorDrawableCompat)drawable).start();
        }
    }


}

查看结果

171097799.jpg

这是源码地址