Android矢量动画全解析：从VectorDrawable到AnimatedVectorDrawable
项目地址: https://gitcode.com/gh_mirrors/an/Android-Animation-Set 一、矢量动画概述
在Android开发中，矢量动画是一种基于数学方程描述的图形动画技术，相比传统的位图动画具有诸多优势：
- 无限缩放不失真
- 文件体积小
- 动画效果细腻流畅
- 适配各种屏幕密度
Android系统通过VectorDrawable和AnimatedVectorDrawable两个核心类实现了矢量动画功能。本文将全面解析这两种技术的使用方法。
二、VectorDrawable详解
VectorDrawable是Android 5.0(Lollipop)引入的矢量图形类，它使用XML定义矢量图形，主要包含以下几个核心元素：
1. 基本结构
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="64dp"
android:height="64dp"
android:viewportWidth="600"
android:viewportHeight="600">
<group
android:name="groupName"
android:rotation="0">
<path
android:name="pathName"
android:fillColor="#FF0000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z"/>
</group>
</vector>
2. 关键属性说明
vector元素属性
viewportWidth/viewportHeight：定义虚拟画布尺寸width/height：定义实际显示尺寸alpha：整体透明度tint：着色颜色tintMode：着色模式（src_in、src_over等）
group元素属性
rotation：旋转角度pivotX/pivotY：旋转/缩放中心点scaleX/scaleY：缩放比例translateX/translateY：位移量
path元素属性
pathData：SVG路径数据fillColor：填充颜色strokeColor：描边颜色strokeWidth：描边宽度trimPathStart/End：路径裁剪比例
3. 路径动画关键属性
通过以下三个属性可以实现路径绘制动画效果：
trimPathStart：从路径起点裁剪的比例（0-1）trimPathEnd：从路径终点裁剪的比例（0-1）trimPathOffset：裁剪区域的偏移量
三、AnimatedVectorDrawable详解
AnimatedVectorDrawable可以为VectorDrawable添加动画效果，它通过ObjectAnimator来驱动VectorDrawable属性的变化。
1. 基本实现方式
实现一个完整的矢量动画通常需要三个XML文件：
(1) 矢量图形定义（drawable/vector.xml）
<vector>
<path android:name="myPath" .../>
</vector>
(2) 动画定义（animator/path_anim.xml）
<objectAnimator
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:duration="1000"/>
(3) 动画矢量图定义（drawable/anim_vector.xml）
<animated-vector
android:drawable="@drawable/vector">
<target
android:name="myPath"
android:animation="@animator/path_anim"/>
</animated-vector>
2. 支持动画的属性
可以对以下属性制作动画效果：
-
group元素：
- rotation
- pivotX/Y
- scaleX/Y
- translateX/Y
-
path元素：
- pathData（变形动画）
- fillColor/strokeColor（颜色变化）
- strokeWidth（线宽变化）
- trimPathStart/End（路径绘制动画）
3. 代码中使用
ImageView imageView = findViewById(R.id.image_view);
imageView.setImageResource(R.drawable.anim_vector);
Drawable drawable = imageView.getDrawable();
if (drawable instanceof Animatable) {
((Animatable) drawable).start();
}
四、高级技巧与最佳实践
1. 路径变形动画
通过改变pathData属性可以实现图形变形效果：
<objectAnimator
android:propertyName="pathData"
android:valueFrom="M300,70 l 0,-70 70,70 0,0 -70,70z"
android:valueTo="M300,70 l 0,-70 70,0 0,140 -70,0z"
android:valueType="pathType"/>
注意：变形动画要求起始和结束路径的命令序列必须完全一致。
2. 性能优化
- 尽量使用简单的路径数据
- 避免在动画过程中创建新对象
- 对于复杂动画，考虑使用Lottie等第三方库
3. 兼容性处理
虽然矢量动画在Android 5.0+原生支持，但可以通过以下方式实现向下兼容：
- 使用AndroidX的VectorDrawableCompat
- 在build.gradle中启用矢量图支持：
android { defaultConfig { vectorDrawables.useSupportLibrary = true } }
五、实际应用案例
1. 路径绘制动画
通过trimPathEnd属性实现路径绘制效果：
<objectAnimator
android:propertyName="trimPathEnd"
android:valueFrom="0"
android:valueTo="1"
android:duration="1000"/>
2. 图标变形动画
Material Design风格的图标变形：
<objectAnimator
android:propertyName="pathData"
android:duration="300"
android:valueFrom="M12,2L4.5,20.29L5.21,21L12,18L18.79,21L19.5,20.29L12,2Z"
android:valueTo="M12,21.35L18.79,15.35L19.5,16.07L12,23.07L4.5,16.07L5.21,15.35L12,21.35Z"
android:valueType="pathType"/>
3. 组合动画
通过AnimatorSet实现多个属性的复合动画：
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:propertyName="rotation"
android:duration="1000"
android:valueFrom="0"
android:valueTo="360"/>
<objectAnimator
android:propertyName="scaleX"
android:duration="1000"
android:valueFrom="1"
android:valueTo="1.5"/>
</set>
六、总结
Android矢量动画提供了强大的图形动画能力，通过合理使用VectorDrawable和AnimatedVectorDrawable，开发者可以创建出高质量的动画效果，同时保持应用的性能和适配性。掌握这项技术对于提升应用UI体验具有重要意义。
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
