Complete animation noob here. Never touched animations in the regular view based system (the only an...

# compose

[Colton Idle]

Complete animation noob here. Never touched animations in the regular view based system (the only animations entered my app when Lottie became a thing) And now I'm trying to build this little animation.

How would I go about creating a fluid arrow like this (that the pixel launcher used to have way back when. I swear that @cbtweeted about this as an AVD a while back but I can't find the tweet. Maybe it was Nick Butcher?). Animated vector drawable in compose? animate*AsState? Lottie?

[Colton Idle]

Pixel launcher originally had it look something like this

[Colton Idle]

But in this case, I just want to repurpose the nice animation on expand/collsapse of a list item.

[Colton Idle]

Oooh. Found this thing called shapeshifter by @Alexjlockwood https://github.com/alexjlockwood/ShapeShifter that has a similar thing

[Doris Liu]

AnimatedVector and Lottie may both be an overkill for this, since it's just drawing two lines. Here's an example of drawing the two lines with Canvas using animate (now renamed to animate*AsState): https://gist.github.com/pt2121/3fa9e0e3e2659171102d752b33d1b1c7#file-expandcollapsebutton-kt-L96

[Doris Liu]

Also... congrats on venturing into Compose animation. 👍😁

[Alexjlockwood]

i think you are thinking of this tweet @Colton Idle https://twitter.com/alexjlockwood/status/1317648116057739264 😄

[Colton Idle]

Oooh! I think the tweet I saw was like a few years back when the pixel launcher had that sweet "jelly" effect animation when pulling the launcher up and down like this:

https://raw.githubusercontent.com/hearsilent/PixelSlide/master/screenshots/screenrecord.gif▾

And I swear it was Chris Banes or Nick Butcher. But the one you just sent is already a composable so thats... awesome! I may try to recreate with that "jelly" (i really dont know what to call it. lol) effect

[Alexjlockwood]

ahh ok. well yeah if it was chris or nick, then id say it is a 99% chance that they were using AnimatedVectorDrawable and possibly AnimatedStateListDrawable 😄

[Colton Idle]

Either way. Thanks Alex. I'll try to study up more on this. For now I'm going to try to update that code snippet to work in beta02. 🤞

[Colton Idle]

@Doris Liu do you happen to know the replacement for

PathNode.MoveTo(
    lerp(from.x, to.x, t),
    lerp(from.y, to.y, t),
)

MoveTo seems to have been updated to take a float instead of list of pathNodes and I'm not sure how to proceed.

[Doris Liu]

The MoveTo in your snippet should work - PathNode.MoveTo takes two floats and you have two floats from lerping

[Colton Idle]

- PathNode.MoveTo takes two floats and you have two floats from lerping

"two floats from lerping" I still don't know what lerping does, but it returns a list of Path nodes?

And so this is the compile error I get:

Type mismatch.

Required:

Float

Found:

List<PathNode>

[Colton Idle]

Crap. lerp is an actual method that comes from other packages? I guess maybe thats the issue. Will try playing around with imports.

[Colton Idle]

Yeah. That was it. I changed the lerp import to instead come from com.google.android.material and it worked. phew. Thanks all!

[Colton Idle]

@ Alex or maybe Doris

Last two questions if I may

1. How does one control the speed of this? I guess its handled so that it animates at the same time it takes for my list item to expand?
2. I can't change the color. I keep trying to even hardcode the color, but I keep getting the same black icon. Am I missing something here?

Icon(
    contentDescription = null,
    painter = rememberVectorPainter(
        tintColor = MyTheme.colors.red,
        defaultWidth = 24.dp,
        defaultHeight = 24.dp,
        viewportWidth = 24f,
        viewportHeight = 24f,
    ) { _, _ ->
        Path(
            pathData = morphedPathNodes,
            strokeLineCap = StrokeCap.Round,
            fill = SolidColor(MyTheme.colors.red),
        )
    },
    modifier = modifier
)

[Doris Liu]

Re 1: To change the duration, you could specify the animationSpec parameter in animateTo. If you need to manually set the progress, consider snapping the progress with Animatable.snapTo(..)

Re 2: Icon has a default tinting that you'll need to overwrite: https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/[…]src/commonMain/kotlin/androidx/compose/material/Icon.kt;l=116

[Albert Chang]

The lerp function you were looking for should be this and you need to add androidx.compose.ui:ui-util to your dependencies to use it.

[Colton Idle]

@Albert Chang you were right! I have like 10 different compose dependencies... but not that one!