compose_shared_element_transition

compose_shared_element_transition.kt

SharedTransitionLayout {
  var isExpanded by remember { mutableStateOf(false) }
  val boundsTransform = { _: Rect, _: Rect -> tween<Rect>(550) }

  AnimatedContent(targetState = isExpanded) { target ->
    if (!target) {
      Row(
        modifier = Modifier
          .fillMaxSize()
          .padding(6.dp)
          .clickable {
            isExpanded = !isExpanded
          }
      ) {
        Image(
          modifier = Modifier
            .sharedElement(
              state = rememberSharedContentState(key = "image"),
              animatedVisibilityScope = this@AnimatedContent,
              boundsTransform = boundsTransform,
            )
            .size(130.dp),
          painter = painterResource(id = R.drawable.pokemon_preview),
          contentDescription = null
        )

        Text(
          modifier = Modifier
            .sharedElement(
              state = rememberSharedContentState(key = "name"),
              animatedVisibilityScope = this@AnimatedContent,
              boundsTransform = boundsTransform,
            )
            .fillMaxWidth()
            .padding(12.dp),
          text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ",
          fontSize = 12.sp,
        )
      }
    } else {
      Column(
        modifier = Modifier
        .fillMaxSize()
        .clickable {
          isExpanded = !isExpanded
        }
      ) {
        Image(
          modifier = Modifier
            .sharedElement(
              state = rememberSharedContentState(key = "image"),
              animatedVisibilityScope = this@AnimatedContent,
              boundsTransform = boundsTransform,
            )
            .fillMaxWidth()
            .height(320.dp),
          painter = painterResource(id = R.drawable.pokemon_preview),
          contentDescription = null
        )

        Text(
          modifier = Modifier
            .sharedElement(
              state = rememberSharedContentState(key = "name"),
              animatedVisibilityScope = this@AnimatedContent,
              boundsTransform = boundsTransform,
            )
            .fillMaxWidth()
            .padding(21.dp),
          text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ",
          fontSize = 12.sp,
        )
      }
    }
  }
}