标签: jetpack-compose-animation

I have a text which need to be animated to show and hide with the value is null or not. it would have been straight forward if the visibility is separately handle, but this is what I got. In the bellow code the enter animation works but the exit animation dont as the text value is null. I can think of something with remembering the old value but not sure how.

@Composable
fun ShowAnimatedText(
    text : String?
) {
    Column( …

如何创建这样的弧形进度条动画

目前我已经使用 Canvas 绘制圆弧并使用 animateFloatAsState API 将动画添加到进度条。但第二张照片不是我的预期。

[]

// e.g. oldScore = 100f  newScore = 350f
// Suppose 250 points are into one level

@Composable
fun ArcProgressbar(
    modifier: Modifier = Modifier,
    oldScore: Float,
    newScore: Float,
    level: String,
    startAngle: Float = 120f,
    limitAngle: Float = 300f,
    thickness: Dp = 8.dp
) {

    var value by remember { mutableStateOf(oldScore) }

    val sweepAngle = animateFloatAsState(
        targetValue = (value / 250) * limitAngle,  // convert the value to angle
        animationSpec = tween(
            durationMillis …

我想用数字显示文本，我想要实现的是在显示文本时为该文本设置动画。动画是应该将计数器从零增加到目标值。我尝试使用animateIntAsState但它不起作用。

这就是我累的状态：

 val daysCounter by animateIntAsState(
        targetValue = days ,
        animationSpec = tween(
            durationMillis = 5000,
            easing = FastOutSlowInEasing
        )
    )

和文字：

        Text(
                text = "$daysCounter",
                fontSize = 40.sp,
                color = MaterialTheme.colors.onPrimary,
                fontWeight = FontWeight.Bold
            )

如何使用协程在切换到特定状态时播放复杂的动画？

@Composable
fun SomeView(viewModel: SomeViewModel) {
    val state by viewModel.stateFlow.collectAsState()
    val scope = rememberCoroutineScope()
    
    ...
    val shutterAlpha by remember { mutableStateOf(0f) }
    Box(modifier = Modifier
        .fillMaxSize()
        .alpha(shutterAlpha)
        .background(Color.Black)
    )

    val transition = updateTransition(targetState = state, label = "label")
    <on transitioning to CaptureState> { // need actual condition check code here
        scope.launch {
            animate(0f, 1f, animationSpec = tween(150)) { value, _ -> shutterAlpha = value }
            animate(1f, 0f, animationSpec = tween(150)) { value, _ -> shutterAlpha = value }
        }
    } …

我当前的 Android Jetpack Compose 项目包含许多列表和网格。

我想对列表和网格的初始填充进行动画处理，为我的应用程序带来一些活力。

我找到了用于在列表中插入、删除项目等的文档。

但是，当列表首次显示时，我找不到任何动画细节。

首次填充列表或网格时是否可以添加动画？

我最近开始使用 jet pack compose 制作动画，并且想知道如何制作它，以便当您增加偏移值时，一旦动画达到该值，它就会将该值更改为另一个值。就像更新过渡一样，但不是同时进行，而是一个接一个地进行。

我正在尝试使用 Jetpack Compose 在我的 Android 应用程序中创建天空视图。我想将它显示在Card带有固定的height. 在晚上，卡片背景变成深蓝色，我希望天空中散布一些闪烁的星星。

为了创建星星闪烁动画，我使用了一个InfiniteTransition对象和一个应用于多个s 的scale属性。这些s 在 a 内部创建，然后使用循环随机传播。我正在使用的完整代码如下所示：animateFloatIconIconBoxWithConstraintsfor

@Composable
fun NightSkyCard() {
    Card(
        modifier = Modifier
            .height(200.dp)
            .fillMaxWidth(),
        elevation = 2.dp,
        shape = RoundedCornerShape(20.dp),
        backgroundColor = DarkBlue
    ) {
        val infiniteTransition = rememberInfiniteTransition()
        val scale by infiniteTransition.animateFloat(
            initialValue = 1f,
            targetValue = 0f,
            animationSpec = infiniteRepeatable(
                animation = tween(1000),
                repeatMode = RepeatMode.Reverse
            )
        )
        
        BoxWithConstraints(
            modifier = Modifier.fillMaxSize()
        ) {
            for (n in …

我正在尝试在 Jetpack Compose 中制作形状的晃动动画。我想在用户输入无效的 Pin 码时使用此动画来显示错误。但我能找到的只是滑入、滑出动画和一些缩放动画。我有什么想法可以做到这一点吗？

更新： @Thracian 回答后。我使用如下代码，水平摇动我的物品：

fun Modifier.shake(enabled: Boolean, onAnimationFinish: () -> Unit) = composed(
    factory = {
        val distance by animateFloatAsState(
            targetValue = if (enabled) 15f else 0f,
            animationSpec = repeatable(
                iterations = 8,
                animation = tween(durationMillis = 50, easing = LinearEasing),
                repeatMode = RepeatMode.Reverse
            ),
            finishedListener = { onAnimationFinish.invoke() }
        )

        Modifier.graphicsLayer {
            translationX = if (enabled) distance else 0f
        }
    },
    inspectorInfo = debugInspectorInfo {
        name = "shake"
        properties["enabled"] = enabled
    }
)

我想要为某些文本的可见性设置动画，使其不仅出现/消失，还可以在我正在构建的 Jetpack Compose Android 应用程序中滑入/滑出。

我只是从developer.android.com/jetpack/compose/animation 复制粘贴了这个小代码片段，但它不起作用：

var visible by remember { mutableStateOf(true) }
val density = LocalDensity.current
AnimatedVisibility(
    visible = visible,
    enter = slideInVertically {
        // Slide in from 40 dp from the top.
        with(density) { -40.dp.roundToPx() }
    } + expandVertically(
        // Expand from the top.
        expandFrom = Alignment.Top
    ) + fadeIn(
        // Fade in with the initial alpha of 0.3f.
        initialAlpha = 0.3f
    ),
    exit = slideOutVertically() + shrinkVertically() + fadeOut()
) {
    Text("Hello", Modifier.fillMaxWidth().height(200.dp))
}

它根本没有动画，文本在没有任何动画的情况下显示/隐藏。

有什么想法可能是什么问题吗？ …

我正在尝试将基于视图的代码转换为 Compose。我有一个可组合项，它将图像（Painter）作为参数并使用图像可组合项显示它。我想要的是，每当参数值发生变化时，我的图像应该进行 360 度旋转，并且图像应该在角度大约变化时发生变化。180度（即动画中途）

这是我制作的可组合项。

@Composable
fun MyImage(displayImage: Painter) {
    Image(
        painter = displayImage,
        contentDescription = null,
        modifier = Modifier
            .size(36.dp)
            .clip(CircleShape)
    )
}

现在，当displayImage发生变化时，新图像会立即显示，没有任何动画（显然）。如何才能实现想要的动画效果呢？

我尝试转换的代码如下所示：

fun onImageChange(imageRes: Int) {
    ObjectAnimator.ofFloat(imageView, View.ROTATION, 0f, 360f)
        .apply {
            addUpdateListener {
                if (animatedFraction == 0.5f) {
                    imageView.setImageResource(imageRes)
                }
            }
            start()
        }
}