Android高级动画——Vectordrawable

Android高级动画所有代码

一、简介：vectordrawable允许你基于xml创建一个矢量图形。在API21时第一次发布。

二、优点：1、体积小；2、一个图片适配所有屏幕；3、可以实现非常优美的动画效果；4、svg格式的图片可以转化为vectordrawable。

阿里的矢量图分享网站：iconfont.cn

三、兼容性：使用Gradle 1.5+和AppCompat23.2+，可以支持Android3.0+的动态和静态VectorDrawable。

四、通过创建一个简单的动态vectordrawable动画讲解使用方法

1、兼容性配置：

注意gradle的版本最好是在2.1以上。

[1]、在app/build.gradle中配置:

扫描二维码关注公众号，回复： 3110126 查看本文章

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"
    defaultConfig {
......
        vectorDrawables.useSupportLibrary=true
    }
}

dependencies {
    ...
    compile 'com.android.support:appcompat-v7:23.4.0'
}

2、在res/drawable中创建一个vectordrawable，命名为rect_vector.xml：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
        <path
            android:name="rect_vector"
            android:fillColor="#000000"
            android:pathData="M0,0,L0,24,L24,24,L24,0 z"/>

</vector>

android:width——drawable的固定宽度

android:height——drawblae的固定高度

android:viewportWidth——viewport的宽度，viewport是画布上的基本单位，画布的宽度被分为多少格。

android:viewportHeight——viewport的高度，viewport是画布上的基本单位，画布的高度被分为多少格。

<path>标签：定义路径怎么画。

android:pathData中的数据讲解：M=MoveTo(M X,Y)将画线移动到指定坐标位置；

L=LineTo(L X,Y)画直线到指定的坐标位置；

z=ClosePath()关闭路径。

3、在res/animator中创建一个属性动画，这个属性动画会让对象从黑色变化为浅绿色，命名为：changecolor.xml。

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="fillColor"
    android:duration="5000"
    android:valueFrom="@android:color/black"
    android:valueTo="@android:color/holo_green_light"
    android:valueType="colorType">

</objectAnimator>

在这里面可以设置很多属性动画，比如：

位移动画（需要把vectordrawable中的path用group标签包裹起来，rotation、pivot、scale、translate的动画都需要用group标签包裹）

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:propertyName="translateX"
    android:duration="1000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:valueFrom="0"
    android:valueTo="10"
    android:valueType="floatType"
    android:interpolator="@android:interpolator/accelerate_decelerate">

</objectAnimator>

4、使用animated-vector连接vectordrawable和属性动画，命名为change_color.xml：

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

    <target
        android:animation="@animator/changecolor"
        android:name="rect_vector"/>

</animated-vector>

5、在布局文件中引入：

<ImageView
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_marginTop="20dip"
        android:scaleType="fitXY"
        android:onClick="imageAnim"
        app:srcCompat="@drawable/change_color"/>

6、点击启动动画：

public void imageAnim(View view){
        ImageView imageView=(ImageView)view;
        Drawable drawableColor = imageView.getDrawable();
        if (drawableColor instanceof Animatable) {
            ((Animatable) drawableColor).start();
        }
    }

这样我们就创建了一个简单的属性动画。

参考：

https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html

https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html

Android高级动画——Vectordrawable

猜你喜欢