Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

151
Visualizações
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 à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda