可以使用Transition API来完成动画,并且在Transition中设置对应的属性动画进行改变,不需要通过触发状态变化来达到效果。
例如,在一个静态文本组件里嵌套一个可动态改变颜色的文本组件,可以先设置好初始颜色:
@Composable
fun MyText(color: Color) {
Text(
text = "Hello, world!",
color = color,
style = MaterialTheme.typography.h4
)
}
然后,利用Transition实现颜色渐变的动画:
@Composable
fun MyTextWithAnimation(color: Color) {
var state by remember { mutableStateOf(false) }
Transition(
definition = myDefinition,
toState = state
) {
MyText(color = it[myKey]) // 使用Transition更新颜色
}
// 按钮按下后开启动画
Button(
onClick = {state = !state},
colors = ButtonDefaults.buttonColors(backgroundColor = MaterialTheme.colors.primary)
) {
Text(text = "Click me!")
}
}
val myKey = Any()
val myDefinition = transitionDefinition {
state(true) { this[myKey] = MaterialTheme.colors.primaryVariant }
state(false) { this[myKey] = MaterialTheme.colors.secondary }
transition(fromState = false, toState = true) {
myKey using tween(durationMillis = 1000)
}
transition(fromState = true, toState = false) {
myKey using tween(durationMillis = 1000)
}
}
在上述示例中,MyTextWithAnimation
是一个可包含动画的组件,在其中定义了一个布尔型状态state以及一个新的TransitionmyDefinition
。当状态变化时,Transition会根据myKey
(在本例中是一个Any类型的对象)所对应的颜色值进行修改,并且使用TweenInterpolator在durationMillis的时间内将文本