Hey @Doris Liu I tried to create a custom VectorConverter for animating image scales. It didn't work out. I think I have to do more low-level or subclass the parent ContentScale interface. More in thread.

Could you share an example of the visual results you are going for with animating ContentScale?

I wanted to see a smooth transition between scenes when I changed ContentScale for example from ContentScale.Crop to ContentScale.FillWidth. With the custom VectorConverter I built, the content scale transition is not smooth, rather seems to be snapping. As far as I can remember, with view animations this was possible; with one of the animations, you could change scaleType and a smooth transition would occur.

You could animate the

ScaleFactor

that is calculated in

ContentScale

. Something like:

@Composable
    fun animate(contentScale: ContentScale): ContentScale {
        val contentScaleState = rememberUpdatedState(newValue = contentScale)
        var scaleX: Animatable<Float, AnimationVector1D>? by remember {
            mutableStateOf(null)
        }
        var scaleY: Animatable<Float, AnimationVector1D>? by remember {
            mutableStateOf(null)
        }
        val scope = rememberCoroutineScope()
        return remember {
            object : ContentScale {
                override fun computeScaleFactor(srcSize: Size, dstSize: Size): ScaleFactor {
                    val targetScaleFactor =
                        contentScaleState.value.computeScaleFactor(srcSize, dstSize)
                    scaleX = scaleX?.apply {
                        if (targetValue != targetScaleFactor.scaleX) {
                            scope.launch {
                                animateTo(targetScaleFactor.scaleX)
                            }
                        }
                    } ?: Animatable(targetScaleFactor.scaleX)

                    scaleY = scaleY?.apply {
                        if (targetValue != targetScaleFactor.scaleY) {
                            scope.launch {
                                animateTo(targetScaleFactor.scaleY)
                            }
                        }
                    } ?: Animatable(targetScaleFactor.scaleY)
                    return ScaleFactor(scaleX!!.value, scaleY!!.value)
                }
            }
        }
    }