I want to animate a power bar, by changing the width of an image. The crop that is part of Image mai...

# compose

[Guy Bieber]

I want to animate a power bar, by changing the width of an image. The crop that is part of Image maintains aspect ratio. I want to keep the height the same and very the width. Any ideas.

[Zach Klippenstein (he/him) [MOD]]

I would probably clip the canvas, either drawing the image yourself or you might be able to do it using one of the draw*() modifiers.

[Nader Jawad]

You should be able to just use the Image composable and animate Modifier.width. It will automatically scale uniformly maintaining the aspect ratio. Optionally you can provide ContentScale.Fit to scale the content to fill the available width. No need to create a custom draw modifier in this case. But you are more than welcome to if it makes it easier for this use case.

[Nader Jawad]

Actually ContentScale.Fit is the default so you can just animate Modifier.width on the Image composable with the ImageAsset or Painter instance you wish to animate as part of the power bar

[Doris Liu]

Curious, if we had an API: fun Modifier.crop(widthPercentage: Float = 1f, heightPercentage: Float = 1f, alignment: Alignment = Alignment.TopStart . Would that be what you need? 🙂

[Nader Jawad]

We already provide Modifier.clip as an API

[Nader Jawad]

But Image already clips and provides alignment and scale parameters

[Guy Bieber]

I will try it and get back to you

[Doris Liu]

Yes, I was curious whether clipping w/ a percentage would be useful as a general concept. 🙂

[Guy Bieber]

@Doris Liu That crop modifer would be awesome. I need to do a crop in width and maintain height.

[Guy Bieber]

The percentage would be ideal for my use case.

[Doris Liu]

BTW, I assume this is not a case of animating the power bar in/out, but rather deterministically animating the clip percentage based on the actual power level, very much like animating a progress bar? In that case, Zach and Nader's suggestions above would work well. If it was for animating in and out something, I'd recommend AnimatedVisibility 😄