I want to animate icons paths, for example animating back and forth between a Check and Close icons, for example in XML I would use Animation Drawables:
<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"/>
Then load the animation in the Activity of fragment.
What is the equivalent of doing the same thing in Compose, here are the icons in Compose:
Here's the ImageVector of the Check icon:
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
Here's the ImageVector of the Close icon:
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