Transition

  • 一个面向状态的多属性动画框架。

面向状态

  • Transition支持我们面向定义好的状态，在状态切换的过程中，去针对View做多个属性相关的动画操作。

var scaleUp by remember {
    mutableStateOf(false)
}
val scaleTransition = updateTransition(targetState = scaleUp, label = "")//声明一个状态流转的Transition

val scaleSize by scaleTransition.animateFloat(label = "scale", transitionSpec = {
    if (false isTransitioningTo true) {//当状态从false转换到true时，使用tween动画曲线
        tween(1000, easing = FastOutSlowInEasing)
    } else {//当状态从true转换到false时，使用spring动画曲线
        spring(Spring.DampingRatioHighBouncy, Spring.StiffnessMediumLow)
    }
}) {
    if (it) {
        1.1f
    } else {
        1.0f
    }
}
val corner by scaleTransition.animateDp(label = "corner", transitionSpec = {
    tween(1000, easing = FastOutSlowInEasing)
}) {
    if (it) {
        30.dp
    } else {
        10.dp
    }
}

Column(
modifier = Modifier
.width(330.dp)
.height(460.dp)
.scale(scaleSize)//transition一次性控制scale
.background(Color.Red)
.clip(RoundedCornerShape(cornor))//transition一次性控制圆角
.clickable {
    scaleUp = !scaleUp
}
.onGloballyPositioned { pos },
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Top
) {
    Box(modifier = Modifier.size(330.dp).background(Color.Red))
    {}
}

对比差异

  • 上面的动画效果，animateXXXState也能够轻松实现。
  • 区别是什么呢：
    1. 效率
      • animateXXXState在动画的时候，会产生每一个animate，一个协程
      • 如上动画，scale和Corner两个动画，会产生两个协程
      • 但是使用Transition，只会有一个协程产生，这是对效率是有影响的。
    2. 流程控制更方便，可以针对各个状态切换做更定制更方便管理的动画。

rememberInfiniteTransition

  • 用法和updateTransition一致，但它提供里无限循环动画的实现。

 评论