如何使用 Jetpack Compose 创建动画？答案

【问题标题】：How to create animation with Jetpack Compose?如何使用 Jetpack Compose 创建动画？
【发布时间】：2019-11-09 05:04:24
【问题描述】：

我想在这个 codelab 中使用 Compose 而不是 ConstraintLayout：https://codelabs.developers.google.com/codelabs/advanced-android-kotlin-training-property-animation/#1

如何将任何动画应用到 Compose？

【问题讨论】：

标签： android android-animation android-jetpack-compose

【解决方案1】：

Here is the guide how to apply animation:

以及该教程中的一段代码：

      private val rotation = FloatPropKey()
      
      private fun createDefinition(duration: Int) = transitionDefinition {
          state(0) { this[rotation] = 0f }
          state(1) { this[rotation] = 360f }
      
          transition {
              rotation using repeatable {
                  animation = tween {
                      easing = LinearEasing
                      this.duration = duration
                  }
                  iterations = Infinite
              }
          }
      }
      
      @Composable
      fun RotateIndefinitely(durationPerRotation: Int, children: @Composable() () -> Unit) {
          Transition(definition = createDefinition(durationPerRotation), initState = 0, toState = 1) {
              Rotate(it[rotation], children)
          }
      }
      
      @Composable
      fun Rotate(degree: Float, children: @Composable() () -> Unit) {
          Draw(children = children) { canvas, parent ->
              val halfWidth = parent.width.value / 2
              val halfHeight = parent.height.value / 2
      
              canvas.save()
              canvas.translate(halfWidth, halfHeight)
              canvas.rotate(degree)
              canvas.translate(-halfWidth, -halfHeight)
              drawChildren()
              canvas.restore()
          }
      }


            @Composable
        private fun RotatingPokeBall() {
            RotateIndefinitely(durationPerRotation = 4000) {
                Opacity(opacity = 0.75f) {
                    DrawImage(
                        image = +imageResource(R.drawable.pokeball),
                        tint = +colorResource(R.color.poke_red)
                    )
                }
            }
        }

【讨论】：

指南已过时，transitionDefinition 已在 Compose Animation Version 1.0.0-alpha11 中弃用。你现在用什么？

【解决方案2】：

从 beta08 开始，现在更容易了

@Composable
fun RotateLoader() {
    val animation = rememberInfiniteTransition()
    val angle = animation.animateFloat(
        initialValue = 0f,
        targetValue = 360f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 1000,
                easing = LinearEasing
            ),
            repeatMode = RepeatMode.Restart
        )
    )
    Icon(
        painter = painterResource(id = R.drawable.ic_loader),
        contentDescription = null,
        modifier = Modifier.rotate(angle.value)
    )
}

【讨论】：