如何在 Jetpack Compose 中的两个图标 PathData 之间设置动画

Ane*_*ail 10 android kotlin android-jetpack-compose

我想要对图标路径进行动画处理,例如在“检查”和“关闭”图标之间来回动画化,例如在 XML 中我将使用动画可绘制对象:

<objectAnimator
                android:propertyName="pathData"
                android:duration="1000"
                android:valueFrom="M 4.8 13.4 L 9 17.6 M 10.4 16.2 L 19.6 7"
                android:valueTo="M 6.4 6.4 L 17.6 17.6 M 6.4 17.6 L 17.6 6.4"
                android:valueType="pathType"
                android:interpolator="@android:interpolator/fast_out_slow_in"/>
Run Code Online (Sandbox Code Playgroud)

然后在fragment的Activity中加载动画。

在 Compose 中执行相同的操作相当于什么,以下是 Compose 中的图标:

这是检查图标的 ImageVector:

val Check: ImageVector
    get() {
        if (_check != null) {
            return _check!!
        }
        _check = Builder(
            name = "Check",
            defaultWidth = 120.0.dp,
            defaultHeight = 120.0.dp,
            viewportWidth = 24.0f,
            viewportHeight = 24.0f
        ).apply {
            path(
                fill = null,
                stroke = SolidColor(Color(0xFF999999)),
                strokeLineWidth = 2.0f,
                strokeLineCap = Square,
                strokeLineJoin = Miter,
                strokeLineMiter = 4.0f,
                pathFillType = NonZero
            ) {
                moveTo(4.8f, 13.4f)
                lineTo(9.0f, 17.6f)
                moveTo(10.4f, 16.2f)
                lineTo(19.6f, 7.0f)
            }
        }
            .build()
        return _check!!
    }

private var _check: ImageVector? = null
Run Code Online (Sandbox Code Playgroud)

这是关闭图标的 ImageVector:

val Close: ImageVector
    get() {
        if (_close != null) {
            return _close!!
        }
        _close = Builder(
            name = "Close",
            defaultWidth = 120.0.dp,
            defaultHeight = 120.0.dp,
            viewportWidth = 24.0f,
            viewportHeight = 24.0f,
        ).apply {
            path(
                fill = null,
                stroke = SolidColor(Color(0xFF999999)),
                strokeLineWidth = 2.0f,
                strokeLineCap = Square,
                strokeLineJoin = Miter,
                strokeLineMiter = 4.0f,
                pathFillType = NonZero
            ) {
                moveTo(6.4f, 6.4f)
                lineTo(17.6f, 17.6f)
                moveTo(6.4f, 17.6f)
                lineTo(17.6f, 6.4f)
            }
        }
            .build()
        return _close!!
    }

private var _close: ImageVector? = null
Run Code Online (Sandbox Code Playgroud)