Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

150
Vistas
How to animate between two icons PathData in Jetpack Compose

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
over 4 years ago · Santiago Trujillo
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda