Android开发之矢量图及其动画

最新推荐文章于 2021-05-26 10:54:31 发布

启之灵

最新推荐文章于 2021-05-26 10:54:31 发布

阅读量577

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 特效文章标签： Android 矢量图矢量动画 pathData Vector

本文链接：https://blog.youkuaiyun.com/z_x_Qiang/article/details/75388843

Android 特效专栏收录该内容

41 篇文章

订阅专栏

本文详细探讨了Android平台中的矢量图形使用，包括矢量图的优势、如何创建和使用矢量图资源，以及如何结合pathData实现矢量动画，揭示了Android矢量图在应用开发中的灵活性和效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

矢量图及其动画

矢量图片可在不丢失定义的情况下缩放。 AnimatedVectorDrawable 类别可让您为矢量图片的属性添加动画。

您通常可以在 3 个 XML 文件中定义添加动画的矢量图片：

在 res/drawable/ 中拥有 <vector> 元素的矢量图片
在 res/drawable/ 中拥有 <animated-vector> 元素且已添加动画的矢量图片
在 res/anim/ 中拥有 <objectAnimator> 元素的一个或多个对象动画
添加动画的矢量图片可为 <group> 以及 <path> 元素的属性添加动画。<group> 元素定义路径集或子组，而 <path> 元素则定义将绘制的路径。

当您定义一个您想要添加动画的矢量图片时，请使用 android:name 属性给这些群组和路径指定一个唯一名称，以便让您能够从您的动画定义中引用这些群组或路径。

先看效果图：

矢量图动画类型只支持水平旋转，缩放和pathData动画，上面就是pathData类型动画

看代码：

1. 定义矢量图 vector_drawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:height="200dp"
        android:width="200dp"
        android:viewportHeight="1000"
        android:viewportWidth="1000">
    <group
            android:name="rotation"
            android:pivotX="500.0"
            android:pivotY="500.0"
            android:rotation="0.0" >
        <path
            android:name="vector"
            android:fillColor="#ff0000"
            android:pathData="M67,750 L500,0  500,0  933,750 "
            />
    </group>
</vector>

2.把上面的vector引入下面的xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
                 android:drawable="@drawable/vector_drawable" >
    <target
            android:name="vector"
            android:animation="@anim/vector_anim" />

    <!--<target
            android:name="rotation"
            android:animation="@anim/vector_rotation" />-->
</animated-vector>

3.创建矢量动画：vector_anim

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator
            android:duration="3000"
            android:propertyName="pathData"
            android:valueFrom="M67,750 L500,0 500,0 933,750 67,750"
            android:valueTo="M147,853 L147,147 853,147 853,853 147,853"
            android:valueType="pathType" />

    <objectAnimator
            android:startOffset="3000"
            android:duration="3000"
            android:propertyName="pathData"
            android:valueFrom="M147,853 L147,147 853,147 853,853 147,853    M147,853 A 0.1,500 0 0 1 147,147 M147,147 A 500,0.1 0 0 1 853,147  M853,147 A 0.1,500 0 0 1 853,853 M851,853 A 500,0.1 0 0 1 147,853"
            android:valueTo="M147,853 L147,147 853,147 853,853 147,853      M147,853 A 500,500 0 0 1 147,147 M147,147 A 500,500 0 0 1 853,147  M853,147 A 500,500 0 0 1 853,853 M853,853 A 500,500 0 0 1 147,853"
            android:valueType="pathType" />
</set>

4.activity和xml中的代码：

     <TextView
       android:id="@+id/vector_anim"
      android:layout_width="200dp"
       android:layout_height="200dp"
       android:gravity="center"
       android:text="矢量图动画"
      android:textColor="#88000000"
       android:background="@drawable/vector_animation"
       />

	vector = view.findViewById(R.id.vector_anim);

	public void vector(){
		Drawable drawable = vector.getBackground();
		if (drawable instanceof Animatable) {
			((Animatable) drawable).start();
		}
	}

如果是矢量图的绘制不懂的同学可以去：http://blog.youkuaiyun.com/z_x_qiang/article/details/75390673