【Android -- 动画】矢量图 & 矢量动画(下)

原创

KevinDev0724 2022-05-27 15:17:29 博主文章分类：Android -- 动画 ©著作权

文章标签 Android 矢量动画 android xml 属性动画 文章分类 运维

©著作权归作者所有：来自51CTO博客作者KevinDev0724的原创作品，请联系作者获取转载授权，否则将追究法律责任

不断学习，做更好的自己！💪

视频号
欢迎打开微信，关注我的视频号：KevinDev

矢量动画

矢量动画其实是属性动画系统的一个应用。
矢量动画可以有多种动画效果：

group 对应的旋转/缩放/平移等效果是传统的动画效果。
path 对应的属性可以做出很多绚丽的效果。比如改变 pathData 属性，可以做出形状变化的动画；改变 trimPathStart/trimPathEnd 可以做出绘制曲线路径的效果；改变 strokeColor 可以做出线条颜色变化的效果。
clip-path 的 pathData 变化可以做出各种形状的揭开和遮挡的效果。

实例

效果图

【Android -- 动画】矢量图 & 矢量动画(下)_Android

1. 定义矢量图形

在 res/drawable 内定义一个三角形矢量图的 XML

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:height="200dp"
    android:width="200dp"
    android:viewportHeight="100"
    android:viewportWidth="100" >
    <group
        android:name= "rotateGroup"
        android:pivotX= "50.0"
        android:pivotY= "50.0" >
        <path
            android:name="triangle1"
            android:fillColor="#00ff00"
            android:pathData="M50,30  L 50,30 L 70,70 L 30,70 z" />
    </group >
</vector>

2. 定义矢量动画

XML 文件也定义在 res/drawable 内,本质上也是一个 drawable 资源.

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/vector_triangle" >
    <target
        android:name= "rotateGroup"
        android:animation="@animator/rotate_animator" />
    <target
        android:name= "triangle1"
        android:animation="@animator/path_change" />
</animated-vector >

3. 定义属性动画

XML 文件定义在 res/animator 内
path_change.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="pathData"
    android:valueFrom="M50,30  L 50,30 L 70,70 L 30,70 z"
    android:valueTo="M30,30 L 70,30 L 70,70 L 30,70 z"
    android:valueType="pathType" />

rotate_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="3000"
    android:propertyName="rotation"
    android:valueFrom="0"
    android:valueTo="360" />

4. 集成运行动画

布局文件：

<ImageView
        android:id="@+id/imageview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="show"
        android:src="@drawable/animator_triangle"
        android:layout_marginTop="10dp"
        android:background="@color/purple_200"/>

代码：

public class MainActivity extends AppCompatActivity {
    private ImageView mImageView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mImageView = findViewById(R.id.imageview);
    }

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