Jetpack Compose 动画(基于动画矢量图像)

您可以通过几种不同的方式在 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))
  }
}
相关推荐
雨白3 小时前
深入理解 SemanticsModifierNode:打造无障碍应用的关键
android jetpack
_一条咸鱼_12 小时前
揭秘 Android View 测量原理:从源码到实战深度剖析
android·面试·android jetpack
_一条咸鱼_12 小时前
深度剖析:Android View 动画原理大揭秘
android·面试·android jetpack
用户71887350336801 天前
Android适配最新SplashScreen方案
android·android jetpack
_一条咸鱼_2 天前
深度剖析:Android SurfaceView 使用原理大揭秘
android·面试·android jetpack
_一条咸鱼_2 天前
深度揭秘!Android HorizontalScrollView 使用原理全解析
android·面试·android jetpack
_一条咸鱼_2 天前
揭秘 Android RippleDrawable:深入解析使用原理
android·面试·android jetpack
_一条咸鱼_2 天前
深入剖析:Android Snackbar 使用原理的源码级探秘
android·面试·android jetpack
_一条咸鱼_2 天前
揭秘 Android FloatingActionButton:从入门到源码深度剖析
android·面试·android jetpack
_一条咸鱼_2 天前
深度剖析 Android SmartRefreshLayout:原理、源码与实战
android·面试·android jetpack