标签: jetpack-compose-animation

我有一个屏幕，屏幕的一角有一个图像，我想将其动画到屏幕的中心。类似从

Icon(
    painter = //,
    contentDescription = //,
    modifier = Modifier.size(36.dp)
)

到

Icon(
    painter = //,
    contentDescription = //,
    modifier = Modifier.fillMaxSize()
)

第一个位于屏幕左上角，第二个位于屏幕中央。如何在两种状态之间设置动画？

当前代码

@Composable
fun TextDemo() {
    var selectedIndex by remember {
        mutableIntStateOf(0)
    }
    Row {
        TabText(
            text = "First",
            isSelected = selectedIndex == 0,
            onClick = {
                selectedIndex = 0
            },
        )
        TabText(
            text = "Second",
            isSelected = selectedIndex == 1,
            onClick = {
                selectedIndex = 1
            },
        )
    }
}

@Composable
fun TabText(
    text: String,
    isSelected: Boolean,
    onClick: () -> Unit,
) {
    val tabTextColor by animateColorAsState(
        targetValue = if (isSelected) {
            Color.Red
        } else {
            Color.Black
        },
        animationSpec = …

我熟悉TransitionJetpack Compose 中的 API，它让我可以轻松地在 Compose 组件内的两种状态之间设置动画。

但是在三种不同状态之间设置动画的最佳方式是什么？

以组件的加载指示器为例。状态可以是NotLoading、Loading和HasLoaded。我的想法是为组件提供一个加载指示器并在这些状态之间进行转换：

• 显示加载指示器的过渡：NotLoading -> Loading
• 显示数据的转换：Loading -> HasLoaded

我想什么样的过渡并不重要，但我想首先淡入加载指示器，然后淡出加载指示器并淡入内容。但这只是一个例子；实际上我需要指定转换参数。

使用 Jetpack Compose 实现这一目标的最佳方法是什么？不确定我在这里的想法是否是最好的方法。

我有 3 个动画，但最上面的一个先启动，然后是另外两个，如何让它们同时启动？我尝试将它们放在相同的协程作用域中，但仍然得到相同的结果。

LaunchedEffect(isItemInView) {
    scope.launch {
        coroutineScope {
            launch { // Even without the scope.launch, coroutineScope, launch lines, same effect
                bar1.animateTo(if (isItemInView) bar1EndLocation else bar1StartLocation)
                bar2.animateTo(if (isItemInView) bar2EndSize else bar2StartSize)
                bar3.animateTo(if (isItemInView) bar3EndSize else bar3StartSize)
            }
        }

    }
}
Column{
   Bar1(modifier = Modifier.offset(bar1.value.x.dp, bar1.value.y.dp)
   Bar2(modifier = Modifier.size(bar2.value.width.dp, bar2.value.height.dp)
   Bar3(modifier = Modifier.size(bar3.value.width.dp, bar3.value.height.dp)
}

我在这里做错了什么吗？

我正在尝试组合一个看起来像 iOS 就地表格编辑的效果。当处于“编辑模式”时，选择控件滑入每行的一侧。我在选择按钮上使用简单的 AnimatedVisibility 并调整进入/退出参数来完成此操作。按钮本身看起来不错，但我行中的其他元素也没有为它们的位置设置动画。他们只是在最后突然更新？当我进入和退出“编辑模式”时，我应该如何获得“选择按钮滑入并且其他小部件聚集一点以腾出空间”效果？

我当前用于行的代码如下所示：

Row(
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 10.dp),
    verticalAlignment = Alignment.CenterVertically
) {
    Icon( ... )
    Spacer(modifier = Modifier.width(4.dp))
    Text(text = keyInfo.name, modifier = Modifier.weight(1.0f), maxLines = 1)
    Spacer(modifier = Modifier.width(10.dp))
    SettingsLabel(text = keyInfo.created.shortPrinted())
    AnimatedVisibility(visible = allowSelection,
        enter = slideInHorizontally(initialOffsetX = { w -> w }),
        exit = slideOutHorizontally(targetOffsetX = { w -> w })
    ) {
        IconButton(
            onClick = onSelectionClick, modifier = Modifier
                .padding(start = 16.dp)
                .size(28.dp)
        ) {
            when (isSelected) {
                true …

初始状态看起来像这样 ( animatedOffset = 0f)

我想得到1f反向梯度：

当前代码：

val transition = rememberInfiniteTransition(label = "NavIconGradientAnim")

val animatedOffset by transition.animateFloat(
    initialValue = 0f, targetValue = 1f,
    label = "NavIconGradientAnimOffset",
    animationSpec = infiniteRepeatable(
        animation = tween(1500, easing = LinearEasing),
        repeatMode = RepeatMode.Reverse
    )
)
Image(
    painterResource(id = item.icon),
    contentDescription = null,
    modifier = Modifier.drawWithCache {
        onDrawWithContent {
            with(drawContext.canvas.nativeCanvas) {
                val angle = 45f
                val endX = drawContext.size.width
                val endY = (endX * kotlin.math.tan(Math.toRadians(angle.toDouble()))).toFloat()

                val checkPoint = saveLayer(null, null)
                drawContent()
                val gradient …