Compose 动画 (六) : 使用Transition管理多个动画，实现动画预览

秒速五厘米 2023-10-09 15:51 58阅读 0赞

### 1. Transition 是什么 ###

`Transition`和`animateXxxAsState`一样，是`Android Compose`中的一个动画`API`。  
`animateXxxAsState`是针对单个目标值的动画，而`Transition`可以面向多个目标值应用动画并保持它们同步结束。  
啥意思呢，就是`Transition`可以把多个动画整合到一起控制，保持状态一致。  
`animateXxxAsState`是面向具体的值的，而`Transition`是面向状态的。

`Transition`的状态可以有好多个 (可以用枚举或各种类型表示)

//定义状态BoxState枚举
    enum class BoxState {
        
        Collapsed, //收起
        Expanded, //展开
        HalfExpanded, //半展开
        //...
    }
    
    //创建当前状态，传入具体的BoxState值
    var currentState by remember {
         mutableStateOf(BoxState.Collapsed) }
    // 创建Transition，管理状态
    val transition = updateTransition(currentState, label = "boxTransition")
    
    //根据transition来创建动画值
    val size by transition.animateDp(label = "size") {
         state ->
        when (state) {
        
            BoxState.Collapsed -> 0.dp
            BoxState.Expanded -> 100.dp
            BoxState.HalfExpanded -> 50.dp
        }
    }

`Transition`还支持Compose动画预览([Animation Preview][])，这也是`Transition`很重要的一个特性。

> 这里的`Transition`和`AnimatedVisibility`中的`EnterTransition`和`ExitTransition`名字上差不多，但其实是不同的东西。

![在这里插入图片描述][dbbb38193d31479490961b443096c21d.gif]

接下来我们会一步一步来实现`Transition`过渡动画，从而来说明`Transition`的作用。

### 2. 实现尺寸和圆角变化 ###

我们先用最简单的方式，来实现尺寸和圆角的变化

var expand by remember {
         mutableStateOf(false) }
    val size = if (expand) 100.dp else 50.dp
    val corner = if (expand) 0.dp else 25.dp
    Box(
        Modifier
            .size(size)
            .clip(RoundedCornerShape(corner))
            .background(Color.Blue)
            .clickable {
        
                expand = !expand
            }) {
        
            
    }

效果如下

![在这里插入图片描述][363282e4323747b08009312ab7f828d6.gif]  
可以看到，点击后尺寸和圆角虽然变化了，但是却没有动画效果。

### 3. 增加动画过渡效果 ###

根据我们[之前的文章][Link 1]，我们知道可以使用`animateDpAsState`来实现动画过渡效果

val size by animateDpAsState(if (big) 100.dp else 50.dp)
    val corner by animateDpAsState(if (big) 0.dp else 25.dp)

完整代码如下

var expand by remember {
         mutableStateOf(false) }
    val size by animateDpAsState(if (expand) 100.dp else 50.dp)
    val corner by animateDpAsState(if (expand) 0.dp else 25.dp)
    Box(
        Modifier
            .size(size)
            .clip(RoundedCornerShape(corner))
            .background(Color.Blue)
            .clickable {
        
                expand = !expand
            }) {
        
    }

这样就可以看到过渡动画了  
![在这里插入图片描述][357189fe0f1a4e41b1df44d121b688b3.gif]

### 4. 使用Transition进行替换 ###

我们可以用`Transition`来替换上面的代码

var expand by remember {
         mutableStateOf(false) }
    val expandTransition = updateTransition(targetState = expand, label = "expandTransition")
    val size by expandTransition.animateDp(label = "size") {
        
        if (it) 100.dp else 50.dp
    }
    val corner by expandTransition.animateDp(label = "corner") {
        
        if (it) 0.dp else 25.dp
    }
    Box(
        Modifier
            .size(size)
            .clip(RoundedCornerShape(corner))
            .background(Color.Blue)
            .clickable {
        
                expand = !expand
            }) {
        
    }

可以发现和使用`animateDpAsState`的效果是一样的

![在这里插入图片描述][357189fe0f1a4e41b1df44d121b688b3.gif]

### 5. 为什么要有Transition ###

既然`animateDpAsState`和`Transition`可以实现同样的效果，那为什么还要有`Transition`这个`API`呢 ?

#### 5.1 Transation对动画状态做统一的管理 ####

原因就在于`animateXxxAsState`是面向具体的值的，而`Transition`是面向状态的。  
`Transation`对于动画状态做了统一的管理，带来了统一的视野，便于管理。(特别是对于有多个动画多个状态的情况)  
而`animateDpAsState`是只对单个动画状态负责的，并没有统一多个动画的情况下状态的强关系，比较乱。(在多个动画多个状态的情况下不便于管理)

#### 5.2 Transition支持Compose动画预览 ####

`Transition`和`AnimatedVisibility`(内部使用`Transition`实现)支持使用[Compose动画预览功能][Animation Preview]，而`animateXxxAsState`是不支持`Compose`动画预览的 (不排除后期会支持)

我们在预览界面点击下面这个图标(`Start Animation Preview`)，会进入到动画预览模式

![在这里插入图片描述][7e1138778b5743c4951b54140459bbdc.png]  
使用`animateXxxAsState`的时候，可以看到`IDE`提示我们，暂时不支持这个动画  
![在这里插入图片描述][1f7d1a9e54784a7cb7528e4659bf26c6.png]  
而我们使用`Transition`启动动画预览，可以看到我们可以去控制动画  
![在这里插入图片描述][6b2a911cc92944318602881926d288ae.png]  
点击展开，也可以看到每个具体的动画的名称 (通过`label`进行设置)  
![在这里插入图片描述][31cf601b9b8743e4ad53b29edc013d0d.png]

可以拖动进度条到动画的任意位置，还能互换动画的初始状态和目标状态，设置动画的倍速等，具体效果如下`GIF`所示

![在这里插入图片描述][cf105b39d4c34321b0d4ead164b86dd3.gif]

### 6. createChildTransition创建子动画 ###

`Transition`可以使用`createChildTransition`创建子动画，子动画的动画数值来自于父动画。  
这样各自都只需要关心自己的状态，能够更好地实现关注点分离，父`Transition`将会知道子`Transition`中的所有动画值。

#### 6.1 首先先定义状态枚举 ####

enum class BoxState {
        
        Collapsed, //收起
        Expanded, //展开
        HalfExpanded, //半展开
        //...
    }

#### 6.2 定义蓝色和红色的Box ####

@Composable
    private fun BoxBlue(
        childExpand1: Transition<Boolean>
    ) {
        
        val size by childExpand1.animateDp(label = "BoxBlue-size") {
        
            if (it) 100.dp else 50.dp
        }
        val corner by childExpand1.animateDp(label = "BoxBlue-corner") {
        
            if (it) 0.dp else 25.dp
        }
        Box(
            Modifier
                .size(size)
                .clip(RoundedCornerShape(corner))
                .background(Color.Blue)
        )
    }
    
    @Composable
    private fun BoxRed(
        childExpand1: Transition<Boolean>
    ) {
        
        val size by childExpand1.animateDp(label = "BoxRed-size") {
        
            if (it) 60.dp else 30.dp
        }
        val corner by childExpand1.animateDp(label = "BoxRed-corner") {
        
            if (it) 0.dp else 15.dp
        }
        Box(
            Modifier
                .size(size)
                .clip(RoundedCornerShape(corner))
                .background(Color.Red)
        )
    }

#### 6.3 创建Transition和ChildTransition ####

var expand by remember {
         mutableStateOf(BoxState.Collapsed) }
    val expandTransition = updateTransition(
        targetState = expand,
        label = "expandTransition"
    )
    val childExpand1 = expandTransition.createChildTransition("child-expand-1") {
        
        it == BoxState.HalfExpanded || it == BoxState.Expanded
    }
    val childExpand2 = expandTransition.createChildTransition("child-expand-2") {
        
        it == BoxState.Expanded
    }
    Column() {
        
        BoxBlue(childExpand1)
        BoxRed(childExpand2)
        Button(onClick = {
         expand = BoxState.Collapsed }, Modifier.width(100.dp)) {
        
            Text(text = "收起")
        }
        Button(onClick = {
         expand = BoxState.HalfExpanded }, Modifier.width(100.dp)) {
        
            Text(text = "半展开")
        }
        Button(onClick = {
         expand = BoxState.Expanded }, Modifier.width(100.dp)) {
        
            Text(text = "全展开")
        }
    }

#### 6.4 运行程序 ####

我们可以发现，对于`BoxBlue`和`BoxRed`，它们只关心对应的`childTransition`就可以了，而对于`expandTransition`却能够知道子`Transition`中的所有动画值。  
我们可以打印下日志看一下

val stateParent = expandTransition.currentState
    val stateChild1 = expandTransition.transitions[0].currentState
    val stateChild2 =expandTransition.transitions[1].currentState
    Log.i("Heiko","stateParent:$stateParent stateChild1:$stateChild1 stateChild2:$stateChild2")

可以看到日志

stateParent:HalfExpanded stateChild1:true stateChild2:false

#### 6.5 开启动画预览 ####

我们点击动画预览，可以很清楚地看到每个子动画的进度  
![在这里插入图片描述][23e9524d925d47e48241c7dfed0f4f8d.png]  
具体如`GIF`所示  
![在这里插入图片描述][25d295e72b6349cc87bd3bf49c8648df.gif]

### 7. 与AnimatedVisibility和AnimatedContent配合使用 ###

`AnimatedVisibility` 和 `AnimatedContent` 可用作 `Transition` 的扩展函数，这样`AnimatedVisibility` 和 `AnimatedContent`就不用额外传参了。

var state by remember {
         mutableStateOf(true) }
    val transition = updateTransition(
        targetState = state,
        label = "myTransition"
    )
    transition.AnimatedVisibility(visible = {
         targetSelected -> targetSelected }) {
        
        Box(
            Modifier
                .size(100.dp)
                .background(Color.Blue)
                .clickable {
        
                    state = !state
                }) {
        
        }
    }
    transition.AnimatedContent {
        targetState ->
        if (targetState) {
        
            //Image1() //当targetState==true，显示组件1
        } else {
        
            //Image2() //当targetState==false，显示组件2
        }
    }

### 8. 封装并复用Transition动画 ###

对于简单的动画，直接在界面里写`Transition`是一种比较高效的方案。  
但是，在处理具有大量动画值的复杂组件时，可以将动画的实现和Compose界面分开，从而让代码更优雅，并使`Transition`动画可以被复用。

#### 8.1 定义Bean对象 ####

用作封装的函数的返回值

class TransitionData(
        size: State<Dp>,
        corner: State<Dp>
    ) {
        
        val size by size
        val corner by corner
    }

#### 8.2 抽取并封装Transition动画 ####

@Composable
    fun updateTransitionData(expand: Boolean): TransitionData {
        
        val expandTransition = updateTransition(
            targetState = expand,
            label = "expandTransition"
        )
        val size = expandTransition.animateDp(label = "size") {
        
            if (it) 100.dp else 50.dp
        }
        val corner = expandTransition.animateDp(label = "corner") {
        
            if (it) 0.dp else 25.dp
        }
        return remember(expandTransition) {
        
            TransitionData(size, corner)
        }
    }

#### 8.3 进行使用 ####

可以看到，这里直接

var expand by remember {
         mutableStateOf(false) }
    val transitionData = updateTransitionData(expand)
    Box(
        Modifier
            .size(transitionData.size)
            .clip(RoundedCornerShape(transitionData.corner))
            .background(Color.Blue)
            .clickable {
        
                expand = !expand
            }) {
        
    }

### 9. rememberInfiniteTransition ###

`InfiniteTransition` 是 `Transition` 的无限循环版本，一进入`Compose`阶段就开始运行，除非被移除，否则不会停止。  
使用 `rememberInfiniteTransition` 创建 `InfiniteTransition` 实例。然后用`animateColor`、`animatedFloat` 或 `animatedValue` 添加子动画。  
还需要通过 `infiniteRepeatable` 来设置 `AnimationSpec`，从而确定动画的时长、动画的重复模式等。

val infiniteTransition = rememberInfiniteTransition()
    val color by infiniteTransition.animateColor(
        initialValue = Color.Blue,
        targetValue = Color.Red,
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )
    Box(Modifier.size(100.dp)
            .background(color)) {
        
    }

效果如下所示  
![在这里插入图片描述][5ee84bc358c2445fb7d983043da5a1b7.gif]

### 10. Compose动画系列 ###

Compose 动画系列，后续持续更新  
[Compose 动画 (一) : animateXxxAsState 实现放大/缩小/渐变等效果][Link 1]  
[Compose 动画 (二) : 为什么animateDpAsState要用val ? MutableState和State有什么区别 ?][Compose _ _ _ _animateDpAsState_val _ MutableState_State_]  
[Compose 动画 (三) : AnimatedVisibility 从入门到深入][Compose _ _ _ AnimatedVisibility]  
[Compose 动画 (四) : AnimatedVisibility 各种入场和出场动画效果][Compose _ _ _ AnimatedVisibility 1]  
[Compose 动画 (五) : animateContentSize / animateEnterExit / Crossfade / AnimatedContent][Compose _ _ _ animateContentSize _ animateEnterExit _ Crossfade _ AnimatedContent]

[Animation Preview]: https://developer.android.google.cn/jetpack/compose/tooling/studio#animations
[dbbb38193d31479490961b443096c21d.gif]: https://img-blog.csdnimg.cn/dbbb38193d31479490961b443096c21d.gif
[363282e4323747b08009312ab7f828d6.gif]: https://img-blog.csdnimg.cn/363282e4323747b08009312ab7f828d6.gif
[Link 1]: https://blog.csdn.net/EthanCo/article/details/128601647
[357189fe0f1a4e41b1df44d121b688b3.gif]: https://img-blog.csdnimg.cn/357189fe0f1a4e41b1df44d121b688b3.gif
[7e1138778b5743c4951b54140459bbdc.png]: https://img-blog.csdnimg.cn/7e1138778b5743c4951b54140459bbdc.png
[1f7d1a9e54784a7cb7528e4659bf26c6.png]: https://img-blog.csdnimg.cn/1f7d1a9e54784a7cb7528e4659bf26c6.png
[6b2a911cc92944318602881926d288ae.png]: https://img-blog.csdnimg.cn/6b2a911cc92944318602881926d288ae.png
[31cf601b9b8743e4ad53b29edc013d0d.png]: https://img-blog.csdnimg.cn/31cf601b9b8743e4ad53b29edc013d0d.png
[cf105b39d4c34321b0d4ead164b86dd3.gif]: https://img-blog.csdnimg.cn/cf105b39d4c34321b0d4ead164b86dd3.gif
[23e9524d925d47e48241c7dfed0f4f8d.png]: https://img-blog.csdnimg.cn/23e9524d925d47e48241c7dfed0f4f8d.png
[25d295e72b6349cc87bd3bf49c8648df.gif]: https://img-blog.csdnimg.cn/25d295e72b6349cc87bd3bf49c8648df.gif
[5ee84bc358c2445fb7d983043da5a1b7.gif]: https://img-blog.csdnimg.cn/5ee84bc358c2445fb7d983043da5a1b7.gif
[Compose _ _ _ _animateDpAsState_val _ MutableState_State_]: https://blog.csdn.net/EthanCo/article/details/128569226
[Compose _ _ _ AnimatedVisibility]: https://blog.csdn.net/EthanCo/article/details/129268245
[Compose _ _ _ AnimatedVisibility 1]: https://blog.csdn.net/EthanCo/article/details/129381503
[Compose _ _ _ animateContentSize _ animateEnterExit _ Crossfade _ AnimatedContent]: https://blog.csdn.net/EthanCo/article/details/129383017