学胖子的个人博客

Jetpack Compose学习 AnimationVisibility

发表于 分类于 ，

Jetpack Compose学习 -------- AnimationVisibility

AnimationVisibility 动画 可见 基础用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

@ExperimentalAnimationApi
@Composable
fun ComposableSample() {
    var state by remember {
        mutableStateOf(true)
    }
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(visible = state) {
            Text(
                text = "这是一个普通的正文",
                fontWeight = FontWeight.W900,
                style = MaterialTheme.typography.h5
            )
        }
        Spacer(modifier = Modifier.height(50.dp))
        Button(onClick = { state = !state }) {
            Text(
                text = if (state) {
                    "隐藏"
                } else {
                    "显示"
                }
            )
        }
    }
}

进场动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

@ExperimentalAnimationApi
@Composable
fun ComposableSample() {
    var state by remember { mutableStateOf(true) }
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            visible = state,
            enter = slideInVertically(
                //初始位置 Y轴
                initialOffsetY = { -1000 },
                animationSpec = tween(
                    //动画持续时间
                    durationMillis = 1200
                )
            )
        ) {
            Text(
                text = "这是一个普通的正文",
                fontWeight = FontWeight.W900,
                style = MaterialTheme.typography.h5
            )
        }
        Spacer(modifier = Modifier.height(50.dp))
        Button(onClick = { state = !state }) {
            Text(
                text = if (state) {
                    "隐藏"
                } else {
                    "显示"
                }
            )
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

@ExperimentalAnimationApi
@Composable
fun ComposableSample() {
    var state by remember { mutableStateOf(true) }
    Column(
        Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        AnimatedVisibility(
            visible = state,
            //垂直滑入
            enter = slideInVertically(
                //初始位置 Y轴
                initialOffsetY = { -1000 },
                animationSpec = tween(
                    //动画持续时间
                    durationMillis = 1200
                )
                //淡入
            ) + fadeIn(
                animationSpec = tween(
                    //动画持续时间
                    durationMillis = 1200
                )
            )
        ) {
            Text(
                text = "这是一个普通的正文",
                fontWeight = FontWeight.W900,
                style = MaterialTheme.typography.h5
            )
        }
        Spacer(modifier = Modifier.height(50.dp))
        Button(onClick = { state = !state }) {
            Text(
                text = if (state) {
                    "隐藏"
                } else {
                    "显示"
                }
            )
        }
    }
}