Compose 文字滚动动画
动画 文字 滚动 Compose
2023-09-27 14:27:35 时间
SizeTransform(clip = true)
为true得时候不会超出边界
为false则可以超出
package com.example.prettynumber
import androidx.lifecycle.ViewModel
import kotlinx.coroutines.delay
import kotlinx.coroutines.flow.asFlow
import kotlinx.coroutines.flow.map
import kotlinx.coroutines.flow.onEach
class MainViewModel : ViewModel() {
val seconds = (0..100)
.asSequence()
.asFlow()
.map {
if (it in 0..9) "0$it" else "$it"
}
.onEach { delay(1000) }
}
package com.example.prettynumber
import android.util.Log
import androidx.compose.animation.*
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.SnackbarDuration
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.lifecycle.viewmodel.compose.viewModel
private const val TAG = "MainScreen"
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun MainScreen(mainViewModel: MainViewModel = viewModel()) {
val secodnds by mainViewModel.seconds.collectAsState(initial = "00")
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
AnimatedContent(targetState = secodnds, transitionSpec = {
addAnimation().using(SizeTransform(clip = true))
}) { targetCount ->
Log.e(TAG, "MainScreen:${targetCount} ", )
Text(
text = "$targetCount",
style = TextStyle(fontSize = MaterialTheme.typography.h1.fontSize),
textAlign = TextAlign.Center
)
}
}
}
@ExperimentalAnimationApi
fun addAnimation(duration: Int = 800): ContentTransform {
return slideInVertically(animationSpec = tween(durationMillis = duration)) { height -> height } + fadeIn(
animationSpec = tween(durationMillis = duration)
) with slideOutVertically(animationSpec = tween(durationMillis = duration)) { height -> -height } + fadeOut(
animationSpec = tween(durationMillis = duration)
)
}
相关文章
- easyUI draggable插件使用不当,导致拖动div内部文本框无法输入;设置echarts数据为空时就显示空白,不要动画和文字
- 优秀设计师常用到的HTML5动画工具
- Power BI中的GIF动画背景
- HTML5动画软件工具编辑器 HTML5动画分类 工具推荐
- spine动画融合与动画叠加
- Unity 使用 Spine 动画
- 从Android动画到贝塞尔曲线
- Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法
- 【unity实战】随机地下城生成3——设置人物移动脚本、动画的切换和摄像机的跟随(含源码)
- Flutter Hero动画
- swiftUI 旋转缩放动画
- MFC窗口特效之动画效果(一) .
- 纯CSS3浮雕质感的立体文字旋转动画
- 基于animation.css实现动画旋转特效
- textillate.js 文字动画
- Android属性动画完全解析(中),ValueAnimator和ObjectAnimator的高级用法
- qt5--动画