Jetpack Compose - animateXxxAsState

Compose系列文章，请点原文阅读。原文，是时候学习Compose了！

0、介绍

根据官网对所有相关的animateXxxAsState()函数做了一个简单的总结。

Fire-and-forget animation function（自主制导的动画函数？）。对于不同的参数类型（例如Float，Color，Offset等），此Composable函数将重载。更改提供的targetValue时，动画将自动运行。 如果targetValue发生更改时，如果已经有一个进行中的动画，则正在进行的动画将调整航向以朝新的目标值进行动画处理。

(Fire-and-Forget)泛指武器在发射之后，就不再接受任何外界指挥、管制或者是射控系统的资料，能够自行更新坐标或者是目标的讯息。

从介绍中的 更改提供的targetValue时，动画将自动运行。 我们可以看出这有点类似于View时代的 值动画，更改值后视图做对应的变化。但是使用Compose更加的简单、方便、高效。

1、属性一览

【目前基于beta 01版本】我们先来看下animateDpAsState()函数，根据函数名我们可以知道该函数会根据你设置的Dp值来自动执行动画：

@Composable fun animateDpAsState(
    targetValue: Dp, 
    animationSpec: AnimationSpec<Dp> = dpDefaultSpring, 
    finishedListener: (Dp) -> Unit = null
): State<Dp>

属性参数含义：

参数	含义
targetValue: Dp	动画的目标值
animationSpec: AnimationSpec = dpDefaultSpring	用于随着时间更改值的动画。默认情况下将使用物理动画
finishedListener: (Dp) -> Unit = null	可选的动画结束事件监听器

2、使用示例

首选我们来看一个场景，屏幕上有一个Box，我们想点击该Box时更改它的宽度Dp属性，代码如下：

@Composable
fun AnimatedDpAsState() {
   
    val big