Hello. I am trying to create a composable with Ken...

# compose

[dhimandasgupta]

Hello. I am trying to create a composable with Kenburn effect. Below is the video and code what i could make till now. Something is wrong with my randomising the offset. Can anyone point me out to any example like this?

private const val OFFSET_INIT_STATE = "offset_init"
private const val OFFSET_TO_STATE = "offset_to"

private const val SCALE_INIT_STATE = "scale_init"
private const val SCALE_TO_STATE = "scale_to"

private val offSet = FloatPropKey()

private val offSetTransitionDefinition = transitionDefinition<String> {
    state(OFFSET_INIT_STATE) { this[offSet] = 5.0f }
    state(OFFSET_TO_STATE) { this[offSet] = 2.5f }

    transition(fromState = OFFSET_INIT_STATE, toState = OFFSET_TO_STATE) {
        offSet using repeatable(
            animation = tween<Float>(
                durationMillis = 10000,
                easing = LinearOutSlowInEasing
            ),
            iterations = Infinite,
            repeatMode = RepeatMode.Reverse
        )
    }
}

private val scale = FloatPropKey()

private val scaleTransitionDefinition = transitionDefinition<String> {
    state(SCALE_INIT_STATE) { this[scale] = 1.0f }
    state(SCALE_TO_STATE) { this[scale] = 0.75f }

    transition(fromState = SCALE_INIT_STATE, toState = SCALE_TO_STATE) {
        scale using repeatable(
            animation = tween<Float>(
                durationMillis = 10000,
                easing = LinearOutSlowInEasing,
            ),
            iterations = Infinite,
            repeatMode = RepeatMode.Reverse
        )
    }
}

@Composable
fun KenBurns(url: String) {
    Box(modifier = Modifier.fillMaxSize(1f).wrapContentSize(align = Alignment.Center)) {
        val stateOffsetX = transition(
            definition = offSetTransitionDefinition,
            initState = OFFSET_INIT_STATE,
            toState = OFFSET_TO_STATE
        )

        val stateScale = transition(
            definition = scaleTransitionDefinition,
            initState = SCALE_INIT_STATE,
            toState = SCALE_TO_STATE)

        CoilImage(
            data = url,
            loading = {
                CircularProgressIndicator()
            },
            onRequestCompleted = {
                // May be start here
            },
            getSuccessPainter = {
              ImagePainter(
                  image = it.image,
                  srcOffset = IntOffset((it.image.width /stateOffsetX[offSet]).toInt(), (it.image.height /stateOffsetX[offSet]).toInt()),
                  srcSize = IntSize((it.image.width * stateScale[scale]).toInt(), (it.image.height * stateScale[scale]).toInt())
              )
            },
            modifier = Modifier.width(400.dp).height(400.dp).clipToBounds()
        )
    }
}