在 Jetpack Compose 中启动动画矢量可绘制对象
Start Animated Vector Drawable in Jetpack Compose
我有一个动画矢量可绘制对象 R.drawable.my_anim，我想在 Jetpack Compose 中展示并启动它。
drawable是shown/rendered正确的，但是动画没有开始
这是撰写视图：
@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 Arctic Fox 2020.3.1
的 Compose Version = "1.0.0-beta04"
这是供参考的绘图：
<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>
您应该使用 Effect API，例如 DisposableEffect 或 LaunchedEffect。
您可以使用类似的东西：
Surface(modifier = Modifier.fillMaxSize()) {
//.. your code
DisposableEffect(Unit) {
atEnd = !atEnd
onDispose { }
}
}
我有一个动画矢量可绘制对象 R.drawable.my_anim，我想在 Jetpack Compose 中展示并启动它。
drawable是shown/rendered正确的，但是动画没有开始
这是撰写视图：
@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 Arctic Fox 2020.3.1
的 Compose Version = "1.0.0-beta04"这是供参考的绘图：
<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>
您应该使用 Effect API，例如 DisposableEffect 或 LaunchedEffect。
您可以使用类似的东西：
Surface(modifier = Modifier.fillMaxSize()) {
//.. your code
DisposableEffect(Unit) {
atEnd = !atEnd
onDispose { }
}
}