android - 在 Jetpack Compose 中启动动画矢量 Drawable

Question

我有一个动画矢量可绘制 R.drawable.my_anim ，我想在 Jetpack Compose 中展示和启动它。
可绘制对象显示/渲染正确，但动画未开始
这是撰写 View :

@Composable
fun SplashView() {

    Surface(modifier = Modifier.fillMaxSize()) {
        val image = animatedVectorResource(id = R.drawable.my_anim)
        val atEnd by remember { mutableStateOf(false) }
        Image(
            modifier = Modifier.wrapContentSize(align = Alignment.Center)
            painter = image.painterFor(atEnd = atEnd),
            contentDescription = null,
        )
        // start the animation?
       atEnd.not() // doesn't trigger a recomposition?
    }
}

我读到更新 atEnd 应该会触发动画，但我什至不知道该怎么做。
我可能错过了一个基本概念，但一个简单的 atEnd.not() 并没有做任何事情。
目前在 Android Studio 北极狐 2020.3.1 中使用 Compose Version = "1.0.0-beta04"
这是供引用的drawable:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:name="vector"
            android:width="446dp"
            android:height="122dp"
            android:tint="@color/white"
            android:viewportWidth="2232"
            android:viewportHeight="612">
            <group android:name="wrapper">
                <clip-path
                    android:name="clippath2184"
                    android:pathData="M 0 0 L 337 0 L 337 610 L 0 610 Z"/>
                <group android:name="group_1">
                    <path
                        android:name="path"
                        android:pathData="M 669.96 585.36 L 625.7 585.36 L 469.75 217.95 L 469.75 570.58 C 469.75 578.74 463.13 585.36 454.97 585.36 L 401.33 585.36 L 401.33 24.36 L 452.11 24.36 C 458.04 24.36 463.4 27.9 465.71 33.36 L 616.32 388.18 L 616.32 24.36 L 669.96 24.36 C 678.12 24.36 684.74 30.98 684.74 39.14 L 684.74 570.59 C 684.74 578.74 678.12 585.36 669.96 585.36 Z M 2019.03 585.36 L 1897.02 585.36 L 1897.02 24.36 L 2019.03 24.36 C 2097.17 24.36 2160.74 87.93 2160.74 166.07 L 2160.74 443.64 C 2160.74 521.79 2097.17 585.36 2019.03 585.36 Z M 1965.43 516.94 L 2019.03 516.94 C 2059.44 516.94 2092.33 484.06 2092.33 443.64 L 2092.33 166.07 C 2092.33 125.66 2059.45 92.77 2019.03 92.77 L 1965.43 92.77 Z M 1235.99 576.35 L 1388.12 217.96 L 1388.12 585.36 L 1441.76 585.36 C 1449.92 585.36 1456.54 578.74 1456.54 570.58 L 1456.54 39.14 C 1456.54 30.98 1449.92 24.36 1441.76 24.36 L 1395.98 24.36 L 1157.85 585.36 L 1222.39 585.36 C 1228.32 585.36 1233.67 581.81 1235.99 576.35 Z M 1218.36 24.36 L 1063.93 388.18 L 1063.93 39.14 C 1063.93 30.98 1057.31 24.36 1049.15 24.36 L 1003.37 24.36 L 848.94 388.18 L 848.94 39.14 C 848.94 30.98 842.32 24.36 834.16 24.36 L 780.52 24.36 L 780.52 585.36 L 829.78 585.36 C 835.71 585.36 841.07 581.82 843.38 576.36 L 995.51 217.97 L 995.51 585.37 L 1044.77 585.37 C 1050.7 585.37 1056.06 581.83 1058.37 576.37 L 1286.86 38.07 C 1289.62 31.57 1284.85 24.37 1277.79 24.37 L 1218.36 24.37 Z M 1752.1 352.36 C 1791.12 333.22 1816.04 293.66 1816.04 249.81 L 1816.04 166.07 C 1816.04 87.8 1752.59 24.36 1674.33 24.36 L 1552.32 24.36 L 1552.32 585.36 L 1610.88 585.36 C 1616.32 585.36 1620.73 580.95 1620.73 575.51 L 1620.73 92.77 L 1674.33 92.77 C 1714.81 92.77 1747.63 125.59 1747.63 166.07 L 1747.63 249.81 C 1747.63 268.23 1736.62 284.87 1719.66 292.07 L 1704.16 298.65 C 1695.06 302.51 1689.15 311.44 1689.15 321.32 L 1689.15 379.15 L 1776.68 585.36 L 1836.12 585.36 C 1843.18 585.36 1847.95 578.16 1845.19 571.66 Z M 168.79 18 C 246.93 18 310.5 81.57 310.5 159.71 L 310.5 452.28 C 310.5 530.42 246.93 593.99 168.79 593.99 C 90.65 593.99 27.07 530.43 27.07 452.29 L 27.07 159.71 C 27.07 81.57 90.65 18 168.79 18 Z M 242.11 274.88 L 242.11 147.81 C 242.11 121.46 220.66 97.25 194.32 96.46 C 166.4 95.62 143.49 118.01 143.49 145.75 L 143.49 300.44 C 143.49 310.32 137.58 319.25 128.48 323.11 L 95.51 337.11 L 95.51 464.19 C 95.51 490.54 116.96 514.75 143.3 515.54 C 171.22 516.38 194.13 493.99 194.13 466.25 L 194.13 311.55 C 194.13 301.67 200.04 292.74 209.14 288.88 Z"
                        android:fillColor="#000"
                        android:strokeWidth="1"/>
                    <group android:name="group">
                        <path
                            android:name="path_1"
                            android:pathData="M 2201.13 23.99 L 2191.62 46.39 L 2191.62 24.89 C 2191.62 24.39 2191.22 23.99 2190.72 23.99 L 2188.02 23.99 L 2173.5 58.2 L 2177.24 58.2 C 2177.72 58.2 2178.16 57.91 2178.35 57.47 L 2187.46 36.02 L 2187.46 58.2 L 2190.36 58.2 C 2190.84 58.2 2191.28 57.91 2191.47 57.47 L 2200.58 36.02 L 2200.58 58.2 L 2203.85 58.2 C 2204.35 58.2 2204.75 57.8 2204.75 57.3 L 2204.75 24.89 C 2204.75 24.39 2204.35 23.99 2203.85 23.99 L 2201.13 23.99 Z M 2176.94 24.89 C 2176.94 24.39 2176.54 23.99 2176.04 23.99 L 2159.66 23.99 L 2159.66 28.16 L 2166.22 28.16 L 2166.22 58.2 L 2169.49 58.2 C 2169.99 58.2 2170.39 57.8 2170.39 57.3 L 2170.39 28.16 L 2176.94 28.16 Z"
                            android:fillColor="#000"
                            android:strokeWidth="1"/>
                    </group>
                </group>
            </group>
        </vector>
    </aapt:attr>
    <target android:name="clippath2184">
        <aapt:attr name="android:animation">
            <set>
                <objectAnimator
                    android:propertyName="pathData"
                    android:duration="1508"
                    android:valueFrom="M 0 0 L 0 0 L 0 610 L 0 610 Z"
                    android:valueTo="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueType="pathType"
                    android:interpolator="@android:anim/overshoot_interpolator"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1768"
                    android:duration="1229"
                    android:valueFrom="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueTo="M 0 0 L 2240 0 L 2240 610 L 0 610 Z"
                    android:valueType="pathType"
                
android:interpolator="@android:anim/accelerate_interpolator"/>
                <objectAnimator
                    android:propertyName="pathData"
                    android:startOffset="1508"
                    android:duration="260"
                    android:valueFrom="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueTo="M 0 0 L 337 0 L 337 610 L 0 610 Z"
                    android:valueType="pathType"
                
android:interpolator="@android:interpolator/fast_out_slow_in"/>
            </set>
        </aapt:attr>
    </target>
</animated-vector>

Answer 1

您应该使用 Effect API喜欢 DisposableEffect或 LaunchedEffect .
你可以使用类似的东西:

Surface(modifier = Modifier.fillMaxSize()) {
    //.. your code

    DisposableEffect(Unit) {
        atEnd = !atEnd
        onDispose {  }
    }
}