| <html devsite="true"> |
| <head> |
| <title>Transition</title> |
| {% setvar book_path %}/reference/kotlin/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <div id="metadata-info-block"></div> |
| <h1>Transition</h1> |
| <p> |
| <pre>class <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?></pre> |
| </p> |
| <hr> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> manages all the child animations on a state level. Child animations can be created in a declarative way using <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">Transition.animateFloat</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">Transition.animateValue</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</a></code> etc. When the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a></code> changes, <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will automatically start or adjust course for all its child animations to animate to the new target values defined for each animation.</p> |
| <p>After arriving at <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be triggered to run if any child animation changes its target value (due to their dynamic target calculation logic, such as theme-dependent values).</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.animateColor |
| import androidx.compose.animation.core.animateFloat |
| import androidx.compose.animation.core.spring |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.core.updateTransition |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.gestures.detectTapGestures |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.fillMaxSize |
| import androidx.compose.foundation.layout.padding |
| import androidx.compose.foundation.layout.size |
| import androidx.compose.foundation.layout.wrapContentSize |
| import androidx.compose.material.Button |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.input.pointer.pointerInput |
| |
| // enum class ComponentState { Pressed, Released } |
| var useRed by remember { mutableStateOf(false) } |
| var toState by remember { mutableStateOf(ComponentState.Released) } |
| val modifier = Modifier.pointerInput(Unit) { |
| detectTapGestures( |
| onPress = { |
| toState = ComponentState.Pressed |
| tryAwaitRelease() |
| toState = ComponentState.Released |
| } |
| ) |
| } |
| |
| // Defines a transition of `ComponentState`, and updates the transition when the provided |
| // [targetState] changes. The tran |
| // sition will run all of the child animations towards the new |
| // [targetState] in response to the [targetState] change. |
| val transition: Transition<ComponentState> = updateTransition(targetState = toState) |
| // Defines a float animation as a child animation the transition. The current animation value |
| // can be read from the returned State<Float>. |
| val scale: Float by transition.animateFloat( |
| // Defines a transition spec that uses the same low-stiffness spring for *all* |
| // transitions of this float, no matter what the target is. |
| transitionSpec = { spring(stiffness = 50f) } |
| ) { state -> |
| // This code block declares a mapping from state to value. |
| if (state == ComponentState.Pressed) 3f else 1f |
| } |
| |
| // Defines a color animation as a child animation of the transition. |
| val color: Color by transition.animateColor( |
| transitionSpec = { |
| when { |
| ComponentState.Pressed isTransitioningTo ComponentState.Released -> |
| // Uses spring for the transition going from pressed to released |
| spring(stiffness = 50f) |
| else -> |
| // Uses tween for all the other transitions. (In this case there is |
| // only one other transition. i.e. released -> pressed.) |
| tween(durationMillis = 500) |
| } |
| } |
| ) { state -> |
| when (state) { |
| // Similar to the float animation, we need to declare the target values |
| // for each state. In this code block we can access theme colors. |
| ComponentState.Pressed -> MaterialTheme.colors.primary |
| // We can also have the target value depend on other mutableStates, |
| // such as `useRed` here. Whenever the target value changes, transition |
| // will automatically animate to the new value even if it has already |
| // arrived at its target state. |
| ComponentState.Released -> if (useRed) Color.Red else MaterialTheme.colors.secondary |
| } |
| } |
| Column { |
| Button( |
| modifier = Modifier.padding(10.dp).align(Alignment.CenterHorizontally), |
| onClick = { useRed = !useRed } |
| ) { |
| Text("Change Color") |
| } |
| Box( |
| modifier.fillMaxSize().wrapContentSize(Alignment.Center) |
| .size((100 * scale).dp).background(color) |
| ) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">See also</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#updateTransition(kotlin.Any,kotlin.String)">updateTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">animateFloat</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">animateValue</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%"><h3>Nested types</h3></th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code>interface <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?></code></td> |
| <td> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Segment</a></code> holds <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html#initialState()">initialState</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html#targetState()">targetState</a></code>, which are the beginning and end of a transition.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%"><h3>Public properties</h3></th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code>S</code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#currentState()">currentState</a></code></div> |
| <p>Current state of the transition.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#isRunning()">isRunning</a></code></div> |
| <p>Indicates whether there is any animation running in the transition.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>?</code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#label()">label</a></code></div> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S></code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#segment()">segment</a></code></div> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#segment()">segment</a></code> contains the initial state and the target state of the currently on-going transition.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>S</code></td> |
| <td> |
| <div><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a></code></div> |
| <p>Target state of the transition.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%"><h3>Extension functions</h3></th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a>(<br> modifier: <a href="/reference/kotlin/androidx/compose/ui/Modifier.html">Modifier</a>,<br> transitionSpec: <a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html">AnimatedContentScope</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a>,<br> contentAlignment: <a href="/reference/kotlin/androidx/compose/ui/Alignment.html">Alignment</a>,<br> content: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.(targetState) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>)</code></div> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> is a container that automatically animates its content when <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code> changes.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><T : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><T>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a>(<br> visible: (T) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>,<br> modifier: <a href="/reference/kotlin/androidx/compose/ui/Modifier.html">Modifier</a>,<br> enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a>,<br> exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a>,<br> content: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>)</code></div> |
| <p>This extension function creates an <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> composable as a child Transition of the given Transition.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a><br>)</code></div> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">animateDp</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a><br>)</code></div> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">animateFloat</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a><br>)</code></div> |
| <p>Creates a Float animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">animateInt</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a><br>)</code></div> |
| <p>Creates a <code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">animateIntOffset</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a><br>)</code></div> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">animateIntSize</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a><br>)</code></div> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">animateOffset</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a><br>)</code></div> |
| <p>Creates an <code><a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">animateRect</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a><br>)</code></div> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a>></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">animateSize</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a>>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a><br>)</code></div> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><T></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?, T : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?, V : <a href="/reference/kotlin/androidx/compose/animation/core/AnimationVector.html">AnimationVector</a>> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">animateValue</a>(<br> typeConverter: <a href="/reference/kotlin/androidx/compose/animation/core/TwoWayConverter.html">TwoWayConverter</a><T, V>,<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><T>,<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> T<br>)</code></div> |
| <p>Creates an animation of type <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">T</a></code> as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>inline <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><T></code></td> |
| <td> |
| <div><code>@<a href="/reference/kotlin/androidx/compose/animation/core/ExperimentalTransitionApi.html">ExperimentalTransitionApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br><S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?, T : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">createChildTransition</a>(<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>,<br> transformToChildState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (parentState) <span style="white-space: nowrap;">-></span> T<br>)</code></div> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">createChildTransition</a></code> creates a child Transition based on the mapping between parent state to child state provided in <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">transformToChildState</a></code>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Public properties</h2> |
| <div><a name="getCurrentState()"></a><a name="setCurrentState()"></a><a name="getCurrentState--"></a><a name="setCurrentState--"></a> |
| <h3 class="api-name" id="currentState()">currentState</h3> |
| <pre class="api-signature no-pretty-print">val <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#currentState()">currentState</a>: S</pre> |
| <p>Current state of the transition. This will always be the initialState of the transition until the transition is finished. Once the transition is finished, <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#currentState()">currentState</a></code> will be set to <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a></code>. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#currentState()">currentState</a></code> is backed by a <code><a href="/reference/kotlin/androidx/compose/runtime/MutableState.html">MutableState</a></code>.</p> |
| </div> |
| <div><a name="getIsRunning()"></a><a name="setIsRunning()"></a><a name="getIsRunning--"></a><a name="setIsRunning--"></a> |
| <h3 class="api-name" id="isRunning()">isRunning</h3> |
| <pre class="api-signature no-pretty-print">val <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#isRunning()">isRunning</a>: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a></pre> |
| <p>Indicates whether there is any animation running in the transition.</p> |
| </div> |
| <div><a name="getLabel()"></a><a name="setLabel()"></a><a name="getLabel--"></a><a name="setLabel--"></a> |
| <h3 class="api-name" id="label()">label</h3> |
| <pre class="api-signature no-pretty-print">val <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#label()">label</a>: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a>?</pre> |
| </div> |
| <div><a name="getSegment()"></a><a name="setSegment()"></a><a name="getSegment--"></a><a name="setSegment--"></a> |
| <h3 class="api-name" id="segment()">segment</h3> |
| <pre class="api-signature no-pretty-print">val <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#segment()">segment</a>: <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S></pre> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#segment()">segment</a></code> contains the initial state and the target state of the currently on-going transition.</p> |
| </div> |
| <div><a name="getTargetState()"></a><a name="setTargetState()"></a><a name="getTargetState--"></a><a name="setTargetState--"></a> |
| <h3 class="api-name" id="targetState()">targetState</h3> |
| <pre class="api-signature no-pretty-print">val <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a>: S</pre> |
| <p>Target state of the transition. This will be read by all child animations to determine their most up-to-date target values.</p> |
| </div> |
| <h2>Extension functions</h2> |
| <div><a name="(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier, kotlin.Function1, androidx.compose.ui.Alignment, kotlin.Function2)"></a><a name="-androidx.compose.animation.core.Transition-.AnimatedContent-androidx.compose.ui.Modifier-kotlin.Function1-androidx.compose.ui.Alignment-kotlin.Function2-"></a><a name="animatedcontent"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a>(<br> modifier: <a href="/reference/kotlin/androidx/compose/ui/Modifier.html">Modifier</a> = Modifier,<br> transitionSpec: <a href="/reference/kotlin/androidx/compose/animation/AnimatedContentScope.html">AnimatedContentScope</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a> = { |
| fadeIn(animationSpec = tween(220, delayMillis = 90)) with fadeOut(animationSpec = tween(90)) |
| },<br> contentAlignment: <a href="/reference/kotlin/androidx/compose/ui/Alignment.html">Alignment</a> = Alignment.TopStart,<br> content: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.(targetState) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>): <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></pre> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> is a container that automatically animates its content when <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code> changes. Its <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">content</a></code> for different target states is defined in a mapping between a target state and a composable function.</p> |
| <p><b>IMPORTANT</b>: The targetState parameter for the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">content</a></code> lambda should <em>always</em> be taken into account in deciding what composable function to return as the content for that state. This is critical to ensure a successful lookup of all the incoming and outgoing content during content transform.</p> |
| <p>When <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code> changes, content for both new and previous targetState will be looked up through the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">content</a></code> lambda. They will go through a <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code> so that the new target content can be animated in while the initial content animates out. Meanwhile the container will animate its size as needed to accommodate the new content, unless <code><a href="/reference/kotlin/androidx/compose/animation/SizeTransform.html">SizeTransform</a></code> is set to <code>null</code>. Once the <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code> is finished, the outgoing content will be disposed.</p> |
| <p>By default, the <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code> will be a delayed <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a></code> of the target content <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.EnterTransition).with(androidx.compose.animation.ExitTransition)">with</a></code> a <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code> of the initial content, using a <code><a href="/reference/kotlin/androidx/compose/animation/SizeTransform.html">SizeTransform</a></code> to animate any size change of the content. This behavior can be customized using <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">transitionSpec</a></code>. If desired, different <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code>s can be defined for different pairs of initial content and target content.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> displays only the content for <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code> when not animating. However, during the transient content transform, there will be more than one sets of content present in the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> container. It may be sometimes desired to define the positional relationship among different content and the style of overlap. This can be achieved by defining <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">contentAlignment</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html#targetContentZIndex()">zOrder</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedContent(androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">contentAlignment</a></code> aligns all content to <code><a href="/reference/kotlin/androidx/compose/ui/Alignment.Companion.html#TopStart()">Alignment.TopStart</a></code>, and the <code>zIndex</code> for all the content is 0f. <b>Note</b>: The target content will always be placed last, therefore it will be on top of all the other content unless zIndex is specified.</p> |
| <p>Different content in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedContent(kotlin.Any,androidx.compose.ui.Modifier,kotlin.Function1,androidx.compose.ui.Alignment,kotlin.Function2)">AnimatedContent</a></code> will have access to their own <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code>. This allows content to define more local enter/exit transitions via <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html#(androidx.compose.ui.Modifier).animateEnterExit(androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition)">AnimatedVisibilityScope.animateEnterExit</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html#transition()">AnimatedVisibilityScope.transition</a></code>. These custom enter/exit animations will be triggered as the content enters/leaves the container.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedContent |
| import androidx.compose.animation.SizeTransform |
| import androidx.compose.animation.core.animateDp |
| import androidx.compose.animation.core.keyframes |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.core.updateTransition |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.animation.with |
| import androidx.compose.foundation.shape.CutCornerShape |
| import androidx.compose.material.Surface |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.draw.clip |
| import androidx.compose.ui.draw.shadow |
| import androidx.compose.ui.graphics.Color |
| import androidx.compose.ui.unit.IntSize |
| |
| @Composable |
| fun CollapsedCart() { /* Some content here */ } |
| @Composable |
| fun ExpandedCart() { /* Some content here */ } |
| |
| // enum class CartState { Expanded, Collapsed } |
| var cartState by remember { mutableStateOf(CartState.Collapsed) } |
| // Creates a transition here to animate the corner shape and content. |
| val cartOpenTransition = updateTransition(cartState, "CartOpenTransition") |
| val cornerSize by cartOpenTransition.animateDp( |
| label = "cartCornerSize", |
| transitionSpec = { |
| when { |
| CartState.Expanded isTransitioningTo CartState.Collapsed -> |
| tween(durationMillis = 433, delayMillis = 67) |
| else -> |
| tween(durationMillis = 150) |
| } |
| } |
| ) { if (it == CartState.Expanded) 0.dp else 24.dp } |
| |
| Surface( |
| Modifier.shadow(8.dp, CutCornerShape(topStart = cornerSize)) |
| .clip(CutCornerShape(topStart = cornerSize)), |
| color = Color(0xfffff0ea), |
| ) { |
| // Creates an AnimatedContent using the transition. This AnimatedContent will |
| // derive its target state from cartOpenTransition.targetState. All the animations |
| // created inside of AnimatedContent for size change, enter/exit will be added to the |
| // Transition. |
| cartOpenTransition.AnimatedContent( |
| transitionSpec = { |
| fadeIn(animationSpec = tween(150, delayMillis = 150)) |
| .with(fadeOut(animationSpec = tween(150))) |
| .using( |
| SizeTransform { initialSize, targetSize -> |
| // Using different SizeTransform for different state change |
| if (CartState.Collapsed isTransitioningTo CartState.Expanded) { |
| keyframes { |
| durationMillis = 500 |
| // Animate to full target width and by 200px in height at 150ms |
| IntSize(targetSize.width, initialSize.height + 200) at 150 |
| } |
| } else { |
| keyframes { |
| durationMillis = 500 |
| // Animate 1/2 the height without changing the width at 150ms. |
| // The width and rest of the height will be animated in the |
| // timeframe between 150ms and duration (i.e. 500ms) |
| IntSize( |
| initialSize.width, |
| (initialSize.height + targetSize.height) / 2 |
| ) at 150 |
| } |
| } |
| } |
| ).apply { |
| targetContentZIndex = when (targetState) { |
| // This defines a relationship along z-axis during the momentary |
| // overlap as both incoming and outgoing content is on screen. This |
| // fixed zOrder will ensure that collapsed content will always be on |
| // top of the expanded content - it will come in on top, and |
| // disappear over the expanded content as well. |
| CartState.Expanded -> 1f |
| CartState.Collapsed -> 2f |
| } |
| } |
| } |
| ) { |
| // This defines the mapping from state to composable. It's critical to use the state |
| // parameter (i.e. `it`) that is passed into this block of code to ensure correct |
| // content lookup. |
| when (it) { |
| CartState.Expanded -> ExpandedCart() |
| CartState.Collapsed -> CollapsedCart() |
| } |
| } |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">See also</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/ContentTransform.html">ContentTransform</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1, androidx.compose.ui.Modifier, androidx.compose.animation.EnterTransition, androidx.compose.animation.ExitTransition, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.AnimatedVisibility-kotlin.Function1-androidx.compose.ui.Modifier-androidx.compose.animation.EnterTransition-androidx.compose.animation.ExitTransition-kotlin.Function1-"></a><a name="animatedvisibility"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>fun <T : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><T>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a>(<br> visible: (T) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a>,<br> modifier: <a href="/reference/kotlin/androidx/compose/ui/Modifier.html">Modifier</a> = Modifier,<br> enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a> = fadeIn() + expandIn(),<br> exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a> = shrinkOut() + fadeOut(),<br> content: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a><br>): <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></pre> |
| <p>This extension function creates an <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> composable as a child Transition of the given Transition. This means: 1) the enter/exit transition is now triggered by the provided <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>'s <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a></code> change. When the targetState changes, the visibility will be derived using the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visible</a></code> lambda and <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code>. 2) The enter/exit transitions, as well as any custom enter/exit animations defined in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> are now hoisted to the parent Transition. The parent Transition will wait for all of them to finish before it considers itself finished (i.e. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#currentState()">Transition.currentState</a></code> = <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code>), and subsequently removes the content in the exit case.</p> |
| <p>Different <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code>s and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>s can be defined in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> for the appearance and disappearance animation. There are 3 types of <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>: Fade, Expand/Shrink and Slide. The enter transitions and exit transitions can be combined using <code>+</code>. The order of the combination does not matter, as the transition animations will start simultaneously. See <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code> for details on the three types of transition.</p> |
| <p>Aside from these three types of <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> also supports custom enter/exit animations. Some use cases may benefit from custom enter/exit animations on shape, scale, color, etc. Custom enter/exit animations can be created using the <code>Transition<EnterExitState></code> object from the <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code> (i.e. <code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html#transition()">AnimatedVisibilityScope.transition</a></code>). See <code><a href="/reference/kotlin/androidx/compose/animation/EnterExitState.html">EnterExitState</a></code> for an example of custom animations. These custom animations will be running along side of the built-in animations specified in <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code>. In cases where the enter/exit animation needs to be completely customized, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">enter</a></code> and/or <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">exit</a></code> can be specified as <code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.Companion.html#None()">EnterTransition.None</a></code> and/or <code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.Companion.html#None()">ExitTransition.None</a></code> as needed. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> will wait until <em>all</em> of enter/exit animations to finish before it considers itself idle. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code> will only be removed after all the (built-in and custom) exit animations have finished.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#AnimatedVisibility(kotlin.Boolean,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code> creates a custom <code><a href="/reference/kotlin/androidx/compose/ui/layout/package-summary.html#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)">Layout</a></code> for its content. The size of the custom layout is determined by the largest width and largest height of the children. All children will be aligned to the top start of the <code><a href="/reference/kotlin/androidx/compose/ui/layout/package-summary.html#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)">Layout</a></code>.</p> |
| <p><b>Note</b>: Once the exit transition is finished, the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code> composable will be removed from the tree, and disposed.</p> |
| <p>By default, the enter transition will be a combination of <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#expandIn(androidx.compose.ui.Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a></code> of the content from the bottom end. And the exit transition will be shrinking the content towards the bottom end while fading out (i.e. <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code> + <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#shrinkOut(androidx.compose.ui.Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code>). The expanding and shrinking will likely also animate the parent and siblings if they rely on the size of appearing/disappearing content.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.animateColor |
| import androidx.compose.animation.core.animateDp |
| import androidx.compose.animation.core.updateTransition |
| import androidx.compose.animation.expandVertically |
| import androidx.compose.animation.shrinkVertically |
| import androidx.compose.foundation.BorderStroke |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.clickable |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.Row |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.height |
| import androidx.compose.foundation.layout.padding |
| import androidx.compose.foundation.layout.size |
| import androidx.compose.foundation.layout.width |
| import androidx.compose.foundation.shape.RoundedCornerShape |
| import androidx.compose.material.Surface |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.graphics.Color |
| |
| @Composable |
| fun ItemMainContent() { |
| Row(Modifier.height(100.dp).fillMaxWidth(), Arrangement.SpaceEvenly) { |
| Box( |
| Modifier.size(60.dp).align(Alignment.CenterVertically) |
| .background(Color(0xffcdb7f6), CircleShape) |
| ) |
| Column(Modifier.align(Alignment.CenterVertically)) { |
| Box(Modifier.height(30.dp).width(300.dp).padding(5.dp).background(Color.LightGray)) |
| Box(Modifier.height(30.dp).width(300.dp).padding(5.dp).background(Color.LightGray)) |
| } |
| } |
| } |
| |
| @OptIn(ExperimentalAnimationApi::class) |
| @Composable |
| fun SelectableItem() { |
| // This sample animates a number of properties, including AnimatedVisibility, as a part of |
| // the Transition going between selected and unselected. |
| Box(Modifier.padding(15.dp)) { |
| var selected by remember { mutableStateOf(false) } |
| // Creates a transition to animate visual changes when `selected` is changed. |
| val selectionTransition = updateTransition(selected) |
| // Animates the border color as a part of the transition |
| val borderColor by selectionTransition.animateColor { isSelected -> |
| if (isSelected) Color(0xff03a9f4) else Color.White |
| } |
| // Animates the background color when selected state changes |
| val contentBackground by selectionTransition.animateColor { isSelected -> |
| if (isSelected) Color(0xffdbf0fe) else Color.White |
| } |
| // Animates elevation as a part of the transition |
| val elevation by selectionTransition.animateDp { isSelected -> |
| if (isSelected) 10.dp else 2.dp |
| } |
| Surface( |
| shape = RoundedCornerShape(10.dp), |
| border = BorderStroke(2.dp, borderColor), |
| modifier = Modifier.clickable { selected = !selected }, |
| color = contentBackground, |
| elevation = elevation, |
| ) { |
| Column(Modifier.fillMaxWidth()) { |
| ItemMainContent() |
| // Creates an AnimatedVisibility as a part of the transition, so that when |
| // selected it's visible. This will hoist all the animations that are internal |
| // to AnimatedVisibility (i.e. fade, slide, etc) to the transition. As a result, |
| // `selectionTransition` will not finish until all the animations in |
| // AnimatedVisibility as well as animations added directly to it have finished. |
| selectionTransition.AnimatedVisibility( |
| visible = { it }, |
| enter = expandVertically(), |
| exit = shrinkVertically() |
| ) { |
| Box(Modifier.fillMaxWidth().padding(10.dp)) { |
| Text( |
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed" + |
| " eiusmod tempor incididunt labore et dolore magna aliqua. " + |
| "Ut enim ad minim veniam, quis nostrud exercitation ullamco " + |
| "laboris nisi ut aliquip ex ea commodo consequat. Duis aute " + |
| "irure dolor." |
| ) |
| } |
| } |
| } |
| } |
| } |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Parameters</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code>visible: (T) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-boolean/index.html">Boolean</a></code></td> |
| <td> |
| <p>defines whether the content should be visible based on transition state T</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>modifier: <a href="/reference/kotlin/androidx/compose/ui/Modifier.html">Modifier</a> = Modifier</code></td> |
| <td> |
| <p>modifier for the <code><a href="/reference/kotlin/androidx/compose/ui/layout/package-summary.html#Layout(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)">Layout</a></code> created to contain the <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">content</a></code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>enter: <a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a> = fadeIn() + expandIn()</code></td> |
| <td> |
| <p>EnterTransition(s) used for the appearing animation, fading in while expanding vertically by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>exit: <a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a> = shrinkOut() + fadeOut()</code></td> |
| <td> |
| <p>ExitTransition(s) used for the disappearing animation, fading out while shrinking vertically by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>content: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a>.() <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-unit/index.html">Unit</a></code></td> |
| <td> |
| <p>Content to appear or disappear based on the visibility derived from the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">Transition.targetState</a></code> and the provided <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">visible</a></code> lambda</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">See also</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#expandIn(androidx.compose.ui.Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#shrinkOut(androidx.compose.ui.Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/AnimatedVisibilityScope.html">AnimatedVisibilityScope</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).AnimatedVisibility(kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.animation.EnterTransition,androidx.compose.animation.ExitTransition,kotlin.Function1)">AnimatedVisibility</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateColor-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animatecolor"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a>> = { spring() },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "ColorAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a>></pre> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the lifecycle of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the target value changes when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#targetState()">targetState</a></code>, the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will run an animation to ensure the new target value is reached smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animations for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> can be used to describe such animations, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.animateColor |
| import androidx.compose.animation.core.animateFloat |
| import androidx.compose.animation.core.spring |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.core.updateTransition |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.gestures.detectTapGestures |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.Column |
| import androidx.compose.foundation.layout.fillMaxSize |
| import androidx.compose.foundation.layout.padding |
| import androidx.compose.foundation.layout.size |
| import androidx.compose.foundation.layout.wrapContentSize |
| import androidx.compose.material.Button |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.input.pointer.pointerInput |
| |
| // enum class ComponentState { Pressed, Released } |
| var useRed by remember { mutableStateOf(false) } |
| var toState by remember { mutableStateOf(ComponentState.Released) } |
| val modifier = Modifier.pointerInput(Unit) { |
| detectTapGestures( |
| onPress = { |
| toState = ComponentState.Pressed |
| tryAwaitRelease() |
| toState = ComponentState.Released |
| } |
| ) |
| } |
| |
| // Defines a transition of `ComponentState`, and updates the transition when the provided |
| // [targetState] changes. The tran |
| // sition will run all of the child animations towards the new |
| // [targetState] in response to the [targetState] change. |
| val transition: Transition<ComponentState> = updateTransition(targetState = toState) |
| // Defines a float animation as a child animation the transition. The current animation value |
| // can be read from the returned State<Float>. |
| val scale: Float by transition.animateFloat( |
| // Defines a transition spec that uses the same low-stiffness spring for *all* |
| // transitions of this float, no matter what the target is. |
| transitionSpec = { spring(stiffness = 50f) } |
| ) { state -> |
| // This code block declares a mapping from state to value. |
| if (state == ComponentState.Pressed) 3f else 1f |
| } |
| |
| // Defines a color animation as a child animation of the transition. |
| val color: Color by transition.animateColor( |
| transitionSpec = { |
| when { |
| ComponentState.Pressed isTransitioningTo ComponentState.Released -> |
| // Uses spring for the transition going from pressed to released |
| spring(stiffness = 50f) |
| else -> |
| // Uses tween for all the other transitions. (In this case there is |
| // only one other transition. i.e. released -> pressed.) |
| tween(durationMillis = 500) |
| } |
| } |
| ) { state -> |
| when (state) { |
| // Similar to the float animation, we need to declare the target values |
| // for each state. In this code block we can access theme colors. |
| ComponentState.Pressed -> MaterialTheme.colors.primary |
| // We can also have the target value depend on other mutableStates, |
| // such as `useRed` here. Whenever the target value changes, transition |
| // will automatically animate to the new value even if it has already |
| // arrived at its target state. |
| ComponentState.Released -> if (useRed) Color.Red else MaterialTheme.colors.secondary |
| } |
| } |
| Column { |
| Button( |
| modifier = Modifier.padding(10.dp).align(Alignment.CenterHorizontally), |
| onClick = { useRed = !useRed } |
| ) { |
| Text("Change Color") |
| } |
| Box( |
| modifier.fillMaxSize().wrapContentSize(Alignment.Center) |
| .size((100 * scale).dp).background(color) |
| ) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/graphics/Color.html">Color</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">See also</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">animateValue</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#updateTransition(kotlin.Any,kotlin.String)">updateTransition</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateDp-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animatedp"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">animateDp</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">animateDp</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a>> = { |
| spring(visibilityThreshold = Dp.VisibilityThreshold) |
| },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "DpAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a>></pre> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateDp(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/Dp.html">Dp</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateFloat-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animatefloat"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">animateFloat</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">animateFloat</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>> = { spring() },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "FloatAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>></pre> |
| <p>Creates a Float animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.core.animateFloat |
| import androidx.compose.animation.core.keyframes |
| import androidx.compose.animation.core.snap |
| import androidx.compose.animation.core.tween |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.ui.graphics.graphicsLayer |
| |
| // enum class ButtonStatus {Initial, Pressed, Released} |
| @Composable |
| fun AnimateAlphaAndScale( |
| modifier: Modifier, |
| transition: Transition<ButtonStatus> |
| ) { |
| // Defines a float animation as a child animation of transition. This allows the |
| // transition to manage the states of this animation. The returned State<Float> from the |
| // [animateFloat] function is used here as a property delegate. |
| // This float animation will use the default [spring] for all transition destinations, as |
| // specified by the default `transitionSpec`. |
| val scale: Float by transition.animateFloat { state -> |
| if (state == ButtonStatus.Pressed) 1.2f else 1f |
| } |
| |
| // Alternatively, we can specify different animation specs based on the initial state and |
| // target state of the a transition run using `transitionSpec`. |
| val alpha: Float by transition.animateFloat( |
| transitionSpec = { |
| when { |
| ButtonStatus.Initial isTransitioningTo ButtonStatus.Pressed -> { |
| keyframes { |
| durationMillis = 225 |
| 0f at 0 // optional |
| 0.3f at 75 |
| 0.2f at 225 // optional |
| } |
| } |
| ButtonStatus.Pressed isTransitioningTo ButtonStatus.Released -> { |
| tween(durationMillis = 220) |
| } |
| else -> { |
| snap() |
| } |
| } |
| } |
| ) { state -> |
| // Same target value for Initial and Released states |
| if (state == ButtonStatus.Pressed) 0.2f else 0f |
| } |
| |
| Box(modifier.graphicsLayer(alpha = alpha, scaleX = scale)) { |
| // content goes here |
| } |
| }</pre> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-float/index.html">Float</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">See also</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#updateTransition(kotlin.Any,kotlin.String)">updateTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">animateValue</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateInt-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animateint"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">animateInt</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">animateInt</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>> = { |
| spring(visibilityThreshold = 1) |
| },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "IntAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>></pre> |
| <p>Creates a <code><a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateInt(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-int/index.html">Int</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateIntOffset-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animateintoffset"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">animateIntOffset</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">animateIntOffset</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>> = { spring(visibilityThreshold = IntOffset(1, 1)) },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "IntOffsetAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>></pre> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntOffset.html">IntOffset</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateIntSize-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animateintsize"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">animateIntSize</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">animateIntSize</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a>> = { spring(visibilityThreshold = IntSize(1, 1)) },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "IntSizeAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a>></pre> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateIntSize(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/unit/IntSize.html">IntSize</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateOffset-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animateoffset"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">animateOffset</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">animateOffset</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a>> = { |
| spring(visibilityThreshold = Offset.VisibilityThreshold) |
| },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "OffsetAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a>></pre> |
| <p>Creates an <code><a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateOffset(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Offset.html">Offset</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateRect-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animaterect"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">animateRect</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">animateRect</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a>> = { spring(visibilityThreshold = Rect.VisibilityThreshold) },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "RectAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a>></pre> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateRect(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Rect.html">Rect</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateSize-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animatesize"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">animateSize</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">animateSize</a>(<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a>> = { |
| spring(visibilityThreshold = Size.VisibilityThreshold) |
| },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "SizeAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a><br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a>></pre> |
| <p>Creates a <code><a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a></code> animation as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateSize(kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><<a href="/reference/kotlin/androidx/compose/ui/geometry/Size.html">Size</a>></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter, kotlin.Function1, kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.animateValue-androidx.compose.animation.core.TwoWayConverter-kotlin.Function1-kotlin.String-kotlin.Function1-"></a><a name="animatevalue"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">animateValue</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?, T : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?, V : <a href="/reference/kotlin/androidx/compose/animation/core/AnimationVector.html">AnimationVector</a>> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">animateValue</a>(<br> typeConverter: <a href="/reference/kotlin/androidx/compose/animation/core/TwoWayConverter.html">TwoWayConverter</a><T, V>,<br> noinline transitionSpec: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.Segment.html">Transition.Segment</a><S>.() <span style="white-space: nowrap;">-></span> <a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><T> = { spring() },<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "ValueAnimation",<br> targetValueByState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (state) <span style="white-space: nowrap;">-></span> T<br>): <a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><T></pre> |
| <p>Creates an animation of type <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">T</a></code> as a part of the given <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. This means the states of this animation will be managed by the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code>. <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">typeConverter</a></code> will be used to convert between type <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">T</a></code> and <code><a href="/reference/kotlin/androidx/compose/animation/core/AnimationVector.html">AnimationVector</a></code> so that the animation system knows how to animate it.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is used as a mapping from a target state to the target value of this animation. <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will be using this mapping to determine what value to target this animation towards. <b>Note</b> that <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">targetValueByState</a></code> is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> run (i.e. when the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> already reached its targetState), the <code><a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a></code> will start running again to ensure this animation reaches its new target smoothly.</p> |
| <p>An optional <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> can be provided to specify (potentially different) animation for each pair of initialState and targetState. <code><a href="/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> includes any non-infinite animation, such as <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)">tween</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code>, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#keyframes(kotlin.Function1)">keyframes</a></code> and even <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">repeatable</a></code>, but not <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode)">infiniteRepeatable</a></code>. By default, <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">transitionSpec</a></code> uses a <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> animation for all transition destinations.</p> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">Returns</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a><T></code></td> |
| <td> |
| <p>A <code><a href="/reference/kotlin/androidx/compose/runtime/State.html">State</a></code> object, the value of which is updated by animation</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="100%">See also</th> |
| </tr> |
| </thead> |
| <tbody class="list"> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#updateTransition(kotlin.Any,kotlin.String)">updateTransition</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)">animateFloat</a></code></td> |
| <td></td> |
| </tr> |
| <tr> |
| <td width="40%"><code><a href="/reference/kotlin/androidx/compose/animation/package-summary.html#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)">animateColor</a></code></td> |
| <td></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String, kotlin.Function1)"></a><a name="-androidx.compose.animation.core.Transition-.createChildTransition-kotlin.String-kotlin.Function1-"></a><a name="createchildtransition"></a> |
| <h3 class="api-name" id="(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">createChildTransition</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/kotlin/androidx/compose/animation/core/ExperimentalTransitionApi.html">ExperimentalTransitionApi</a><br>@<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a><br>inline fun <S : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?, T : <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-any/index.html">Any</a>?> <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><S>.<a href="/reference/kotlin/androidx/compose/animation/core/Transition.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">createChildTransition</a>(<br> label: <a href="https://kotlinlang.org/api/latest/jvm/stdlib/kotlin/-string/index.html">String</a> = "ChildTransition",<br> transformToChildState: @<a href="/reference/kotlin/androidx/compose/runtime/Composable.html">Composable</a> (parentState) <span style="white-space: nowrap;">-></span> T<br>): <a href="/reference/kotlin/androidx/compose/animation/core/Transition.html">Transition</a><T></pre> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">createChildTransition</a></code> creates a child Transition based on the mapping between parent state to child state provided in <code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">transformToChildState</a></code>. This serves the following purposes:</p> |
| <ol> |
| <li> |
| <p>Hoist the child transition state into parent transition. Therefore the parent Transition will be aware of whether there's any on-going animation due to the same target state change. This will further allow sequential animation to be set up when all animations have finished.</p> |
| </li> |
| <li> |
| <p>Separation of concerns. The child transition can respresent a much more simplified state transition when, for example, mapping from an enum parent state to a Boolean visible state for passing further down the compose tree. The child composables hence can be designed around handling a more simple and a more relevant state change.</p> |
| </li> |
| </ol> |
| <p><code><a href="/reference/kotlin/androidx/compose/animation/core/package-summary.html#(androidx.compose.animation.core.Transition).createChildTransition(kotlin.String,kotlin.Function1)">label</a></code> is used to differentiate from other animations in the same transition in Android Studio.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.core.animateDp |
| import androidx.compose.animation.core.animateFloat |
| import androidx.compose.animation.core.createChildTransition |
| import androidx.compose.animation.core.updateTransition |
| import androidx.compose.foundation.background |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.fillMaxSize |
| import androidx.compose.foundation.layout.heightIn |
| import androidx.compose.foundation.layout.widthIn |
| import androidx.compose.foundation.shape.RoundedCornerShape |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.draw.clip |
| import androidx.compose.ui.draw.scale |
| |
| // enum class DialerState { DialerMinimized, NumberPad } |
| @OptIn(ExperimentalTransitionApi::class) |
| @Composable |
| fun DialerButton(visibilityTransition: Transition<Boolean>, modifier: Modifier) { |
| val scale by visibilityTransition.animateFloat { visible -> |
| if (visible) 1f else 2f |
| } |
| Box(modifier.scale(scale).background(Color.Black)) { |
| // Content goes here |
| } |
| } |
| |
| @Composable |
| fun NumberPad(visibilityTransition: Transition<Boolean>) { |
| // Create animations using the provided Transition for visibility change here... |
| } |
| |
| @OptIn(ExperimentalTransitionApi::class) |
| @Composable |
| fun childTransitionSample() { |
| var dialerState by remember { mutableStateOf(DialerState.NumberPad) } |
| Box(Modifier.fillMaxSize()) { |
| val parentTransition = updateTransition(dialerState) |
| |
| // Animate to different corner radius based on target state |
| val cornerRadius by parentTransition.animateDp { |
| if (it == DialerState.NumberPad) 0.dp else 20.dp |
| } |
| |
| Box( |
| Modifier.align(Alignment.BottomCenter).widthIn(50.dp).heightIn(50.dp) |
| .clip(RoundedCornerShape(cornerRadius)) |
| ) { |
| NumberPad( |
| // Creates a child transition that derives its target state from the parent |
| // transition, and the mapping from parent state to child state. |
| // This will allow: |
| // 1) Parent transition to account for additional animations in the child |
| // Transitions before it considers itself finished. This is useful when you |
| // have a subsequent action after all animations triggered by a state change |
| // have finished. |
| // 2) Separation of concerns. This allows the child composable (i.e. |
| // NumberPad) to only care about its own visibility, rather than knowing about |
| // DialerState. |
| visibilityTransition = parentTransition.createChildTransition { |
| // This is the lambda that defines how the parent target state maps to |
| // child target state. |
| it == DialerState.NumberPad |
| } |
| // Note: If it's not important for the animations within the child composable to |
| // be observable, it's perfectly valid to not hoist the animations through |
| // a Transition object and instead use animate*AsState. |
| ) |
| DialerButton( |
| visibilityTransition = parentTransition.createChildTransition { |
| it == DialerState.DialerMinimized |
| }, |
| modifier = Modifier.matchParentSize() |
| ) |
| } |
| } |
| }</pre> |
| </div> |
| </body> |
| </html> |