https://kotlinlang.org logo
#compose
Title
# compose
g

Guy Bieber

08/18/2020, 10:58 PM
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.
z

Zach Klippenstein (he/him) [MOD]

08/18/2020, 11:00 PM
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.
👍 1
n

Nader Jawad

08/19/2020, 5:46 AM
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.
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
d

Doris Liu

08/19/2020, 11:29 PM
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? 🙂
👍 1
n

Nader Jawad

08/19/2020, 11:29 PM
We already provide Modifier.clip as an API
But Image already clips and provides alignment and scale parameters
g

Guy Bieber

08/19/2020, 11:31 PM
I will try it and get back to you
d

Doris Liu

08/19/2020, 11:31 PM
Yes, I was curious whether clipping w/ a percentage would be useful as a general concept. 🙂
g

Guy Bieber

08/20/2020, 4:35 PM
@Doris Liu That crop modifer would be awesome. I need to do a crop in width and maintain height.
The percentage would be ideal for my use case.
👍 1
d

Doris Liu

08/20/2020, 6:15 PM
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
😄