Compose 动画艺术探索之瞅下 Compose 的动画

val visible = remember { mutableStateOf(true) }
AnimatedVisibility(visible = visible.value,) {
    Text(text = "天青色等烟雨，而我在等你，炊烟袅袅升起，隔江千万里")
}

VisibleItem()
VisibleItem(fadeIn(), fadeOut())
VisibleItem(scaleIn(), scaleOut())
VisibleItem(expandIn(), shrinkOut())
VisibleItem(expandHorizontally(), shrinkHorizontally())
VisibleItem(expandVertically(), shrinkVertically())

@Composable
private fun VisibleItem(
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
) {
    val visible = remember { mutableStateOf(true) }
    Card(modifier = Modifier.padding(10.dp)) {
        Row{
            Image(
                painter = painterResource(id = R.drawable.ic_head),
                contentDescription = "head",
            )
            AnimatedVisibility(
                visible = visible.value,
                enter = enter,
                exit = exit
            ) {
                Text(text = "天青色等烟雨，而我在等你，炊烟袅袅升起，隔江千万里")
            }
        }
    }
}

@Composable
private fun VisibleItem(
    enter: EnterTransition = fadeIn() + expandHorizontally(),
    exit: ExitTransition = fadeOut() + shrinkHorizontally(),
) {
    val visible = remember { mutableStateOf(true) }
    val state = remember {
        MutableTransitionState(false).apply {
            // Start the animation immediately.
            targetState = true
        }
    }
    Card(modifier = Modifier.padding(10.dp)) {
        .....
            AnimatedVisibility(
                /// 设置visibleState
                visibleState = state,
                enter = enter,
                exit = exit
            ) {
        .....
}

VisibleItem(
    scaleIn(animationSpec = tween(durationMillis = 1500)),
    scaleOut(animationSpec = tween(durationMillis = 1500))
)
VisibleItem(
    expandIn(animationSpec = tween(durationMillis = 1500)),
    shrinkOut(animationSpec = tween(durationMillis = 1500))
)

animateIntAsState ( targetValue : Int ,...) 
animateSizeAsState ( targetValue : Size ,...) 
animateDpAsState ( targetValve : Dp ,...)
 animateRectAsState ( targetValve : Rect ,...) 
animateFloatAsState ( targetValve : Float ,...) 
animateIntOffsetAsState ( targetValue : Into ... Sta ）
animateIntSizeAsState ( targetValve : IntSize ,.. S）
animateOffsetAsState ( targetValve : Offset ,..... ）
animateValueAsState ( targetValve : T , typeConvert ）
animateColorAsState ( targetValve : Color ,...)

@Composable
fun AnimateAsStateTest() {
    var isSmall by remember { mutableStateOf(true) }
    val size: Dp by animateDpAsState(
        targetValue = if (isSmall) 40.dp else 100.dp,
        animationSpec = tween(durationMillis = 1500))
    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(onClick = { isSmall = !isSmall }) {
            Text("修改Dp值")
        }
        Box(modifier = Modifier.size(size).background(Red))
    }
}

val expend = remember { mutableStateOf(false) }
Column(modifier = Modifier.padding(10.dp)) {
    Text(
        text = "朋友圈一般指的是腾讯微信上的一个社交功能，于微信4.0版本2012年4月19日更新时上线“+
               "用户可以通过朋友圈发表文字和图片，同时可通过其他软件将文章或者音乐分享到朋友圈。"+
                "用户可以对好友新发的照片进行“评论”或“赞”，其他用户只能看相同好友的评论或赞。",
        modifier = Modifier.animateContentSize(), /// 这块调用了内容大小动画
        maxLines = if (expend.value) Int.MAX_VALUE else 2  /// 这块控制内容显示多少
    )
    Text(if (expend.value) "收起" else "全文", color = Color.Blue, modifier = Modifier.clickable {
        expend.value = !expend.value
    })
}

@Composable
fun InfiniteTransition() {
    val infiniteTransition = rememberInfiniteTransition()
    val size by infiniteTransition.animateValue(
        initialValue = 100.dp,
        targetValue = 200.dp,
        typeConverter = TwoWayConverter({ AnimationVector1D(it.value) }, { it.value.dp }),
        animationSpec = infiniteRepeatable(
            animation = tween(1000, easing = LinearEasing),
            repeatMode = RepeatMode.Reverse
        )
    )
    Box(
        Modifier.size(size).padding(20.dp).background(Color.Red)
    )
}