您可以通过几种不同的方式在 Compose 中为矢量添加动画效果。您可以使用以下任意一种方式:
AnimatedVectorDrawable
文件格式- 将
ImageVector
与 Compose 动画 API 结合使用,如[这篇 Medium 文章] 中所述 - 使用 Lottie 等第三方解决方案
带动画的矢量可绘制对象(实验性)
如需使用 AnimatedVectorDrawable
资源,请使用 animatedVectorResource
加载可绘制对象文件,并传入 boolean
以在可绘制对象的开始和结束状态之间切换,从而执行动画。
效果展示
需要先准备以下资源文件
res/drawable/animatorvectordrawable.xml
xml
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/vectordrawable" >
<target
android:name="rotationGroup"
android:animation="@animator/rotation" />
<target
android:name="v"
android:animation="@animator/path_morph" />
</animated-vector>
res/drawable/vectordrawable.xml
xml
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:height="64dp"
android:width="64dp"
android:viewportHeight="600"
android:viewportWidth="600">
<group
android:name="rotationGroup"
android:pivotX="300.0"
android:pivotY="300.0"
android:rotation="45.0" >
<path
android:name="v"
android:fillColor="#000000"
android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />
</group>
</vector>
res/animator/rotation.xml
xml
<objectAnimator android:duration="6000"
android:propertyName="rotation"
android:valueFrom="0"
android:valueTo="360"
xmlns:android="http://schemas.android.com/apk/res/android" />
res/animator/path_morph.xml
xml
<set xmlns:android="http://schemas.android.com/apk/res/android">
<objectAnimator
android:duration="3000"
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,0 z"
android:valueType="pathType" />
</set>
实现代码
ts
@OptIn(ExperimentalAnimationGraphicsApi::class)
@Composable
private fun example1() {
val image = AnimatedImageVector.animatedVectorResource(R.drawable.animatorvectordrawable)
Column {
customTitle(title = "带动画的矢量可绘制对象")
val atEnd = remember { mutableStateOf(false) }
Image(
painter = rememberAnimatedVectorPainter(image, atEnd.value),
contentDescription = "Timer",
modifier = Modifier.fillMaxWidth().aspectRatio(1f).clickable {
atEnd.value = !atEnd.value
},
contentScale = ContentScale.Crop
)
CodeView(assetUrl = "animation/animationValue/code1.txt", modifier = Modifier.padding(top = 10.dp))
}
}