| <html devsite="true"> |
| <head> |
| <title>EnterExitTransitionKt</title> |
| {% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} |
| {% include "_shared/_reference-head-tags.html" %} |
| </head> |
| <body> |
| <h1>EnterExitTransitionKt</h1> |
| <p> |
| <pre>public final class EnterExitTransitionKt</pre> |
| </p> |
| <hr> |
| <h2>Summary</h2> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2"><h3>Public methods</h3></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialWidth,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</code></div> |
| <p>This expands the clip bounds of the appearing content horizontally, from the width returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialWidth</a></code> to the full width.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> initialSize,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</code></div> |
| <p>This expands the clip bounds of the appearing content from the size returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialSize</a></code> to the full size.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialHeight,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</code></div> |
| <p>This expands the clip bounds of the appearing content vertically, from the height returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialHeight</a></code> to the full height.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a>(<br> float initialAlpha,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Float.html">Float</a>> animationSpec<br>)</code></div> |
| <p>This fades in the content of the transition, from the specified starting alpha (i.e.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a>(<br> float targetAlpha,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Float.html">Float</a>> animationSpec<br>)</code></div> |
| <p>This fades out the content of the transition, from full opacity to the specified target alpha (i.e.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetWidth,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</code></div> |
| <p>This shrinks the clip bounds of the disappearing content horizontally, from the full width to the width returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetWidth</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> targetSize,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</code></div> |
| <p>This shrinks the clip bounds of the disappearing content from the full size to the size returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetSize</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetHeight,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</code></div> |
| <p>This shrinks the clip bounds of the disappearing content vertically, from the full height to the height returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetHeight</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideIn</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> initialOffset,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</code></div> |
| <p>This slides in the content of the transition, from a starting offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffset</a></code> to <code>IntOffset(0, 0)</code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialOffsetX,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</code></div> |
| <p>This slides in the content horizontally, from a starting offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetX</a></code> to <code>0</code><b>pixels</b>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialOffsetY,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</code></div> |
| <p>This slides in the content vertically, from a starting offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetY</a></code> to <code>0</code> in <b>pixels</b>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOut</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> targetOffset,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</code></div> |
| <p>This slides out the content of the transition, from an offset of <code>IntOffset(0, 0)</code> to the target offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffset</a></code>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetOffsetX,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</code></div> |
| <p>This slides out the content horizontally, from 0 to a target offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetX</a></code> in <b>pixels</b>.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>static final @<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a></code></td> |
| <td> |
| <div><code><a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetOffsetY,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</code></div> |
| <p>This slides out the content vertically, from 0 to a target offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetY</a></code> in <b>pixels</b>.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <h2>Public methods</h2> |
| <div><a name="expandHorizontally(AlignmentHorizontal, kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Boolean)"></a><a name="expandHorizontally-AlignmentHorizontal-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Boolean-"></a><a name="expandhorizontally"></a> |
| <h3 class="api-name" id="expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandHorizontally</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialWidth,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</pre> |
| <p>This expands the clip bounds of the appearing content horizontally, from the width returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialWidth</a></code> to the full width. <code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandFrom</a></code> controls which part of the content gets revealed first. By default, the clip bounds animates from 0 to full width, starting from the end of the content, and expand to fully revealing the whole content.</p> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandHorizontally</a></code> animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialWidth</a></code> is a lambda that takes the full width of the content and returns an initial width of the bounds of the content. This allows not only an absolute width, but also an initial width that is proportional to the content width.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">clip</a></code> defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.expandHorizontally |
| import androidx.compose.animation.shrinkHorizontally |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = expandHorizontally( |
| // Set the start width to 20 (pixels), 0 by default |
| initialWidth = { 20 } |
| ), |
| exit = shrinkHorizontally( |
| // Shrink towards the end (i.e. right edge for LTR, left edge for RTL). The default |
| // direction for the shrink is towards [Alignment.Start] |
| shrinkTowards = Alignment.End, |
| // Set the end width for the shrink animation to a quarter of the full width. |
| targetWidth = { fullWidth -> fullWidth / 4 }, |
| // Overwrites the default animation with tween for this shrink animation. |
| animationSpec = tween() |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom</code></td> |
| <td> |
| <p>the starting point of the expanding bounds, Alignment.End by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialWidth</code></td> |
| <td> |
| <p>the start width of the expanding bounds, returning 0 by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the expanding animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean clip</code></td> |
| <td> |
| <p>whether the content outside of the animated bounds should be clipped, true by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="expandIn(Alignment, kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Boolean)"></a><a name="expandIn-Alignment-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Boolean-"></a><a name="expandin"></a> |
| <h3 class="api-name" id="expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> initialSize,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</pre> |
| <p>This expands the clip bounds of the appearing content from the size returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialSize</a></code> to the full size. <code><a href="/reference/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandFrom</a></code> controls which part of the content gets revealed first. By default, the clip bounds animates from <code>IntSize(0, 0)</code> to full size, starting from revealing the bottom right corner (or bottom left corner in RTL layouts) of the content, to fully revealing the entire content as the size expands.</p> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandIn</a></code> animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialSize</a></code> is a lambda that takes the full size of the content and returns an initial size of the bounds of the content. This allows not only absolute size, but also an initial size that is proportional to the content size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#expandIn(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">clip</a></code> defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.</p> |
| <p>For expanding only horizontally or vertically, consider <code><a href="/reference/androidx/compose/animation/package-summary.html#expandHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandHorizontally</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandVertically</a></code>.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.expandIn |
| import androidx.compose.animation.shrinkOut |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.unit.IntSize |
| |
| var visible by remember { mutableStateOf(true) } |
| |
| AnimatedVisibility( |
| visible, |
| enter = expandIn( |
| // Overwrites the corner of the content that is first revealed |
| expandFrom = Alignment.BottomStart, |
| // Overwrites the initial size to 50 pixels by 50 pixels |
| initialSize = { IntSize(50, 50) }, |
| // Overwrites the default spring animation with tween |
| animationSpec = tween(100, easing = LinearOutSlowInEasing) |
| ), |
| exit = shrinkOut( |
| // Overwrites the area of the content that the shrink animation will end on. The |
| // following parameters will shrink the content's clip bounds from the full size of the |
| // content to 1/10 of the width and 1/5 of the height. The shrinking clip bounds will |
| // always be aligned to the CenterStart of the full-content bounds. |
| shrinkTowards = Alignment.CenterStart, |
| // Overwrites the target size of the shrinking animation. |
| targetSize = { fullSize -> IntSize(fullSize.width / 10, fullSize.height / 5) }, |
| animationSpec = tween(100, easing = FastOutSlowInEasing) |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom</code></td> |
| <td> |
| <p>the starting point of the expanding bounds, Alignment.BottomEnd by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> initialSize</code></td> |
| <td> |
| <p>the start size of the expanding bounds, returning <code>IntSize(0, 0)</code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the expanding animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean clip</code></td> |
| <td> |
| <p>whether the content outside of the animated bounds should be clipped, true by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="expandVertically(AlignmentVertical, kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Boolean)"></a><a name="expandVertically-AlignmentVertical-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Boolean-"></a><a name="expandvertically"></a> |
| <h3 class="api-name" id="expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandVertically</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialHeight,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</pre> |
| <p>This expands the clip bounds of the appearing content vertically, from the height returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialHeight</a></code> to the full height. <code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandFrom</a></code> controls which part of the content gets revealed first. By default, the clip bounds animates from 0 to full height, revealing the bottom edge first, followed by the rest of the content.</p> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">expandVertically</a></code> animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">initialHeight</a></code> is a lambda that takes the full height of the content and returns an initial height of the bounds of the content. This allows not only an absolute height, but also an initial height that is proportional to the content height.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#expandVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">clip</a></code> defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.expandVertically |
| import androidx.compose.animation.shrinkVertically |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| |
| AnimatedVisibility( |
| visible, |
| // Sets the initial height of the content to 20, revealing only the top of the content at |
| // the beginning of the expanding animation. |
| enter = expandVertically( |
| expandFrom = Alignment.Top, |
| initialHeight = { 20 } |
| ), |
| // Shrinks the content to half of its full height via an animation. |
| exit = shrinkVertically( |
| targetHeight = { fullHeight -> fullHeight / 2 }, |
| animationSpec = tween() |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> expandFrom</code></td> |
| <td> |
| <p>the starting point of the expanding bounds, Alignment.Bottom by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialHeight</code></td> |
| <td> |
| <p>the start height of the expanding bounds, returning 0 by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the expanding animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean clip</code></td> |
| <td> |
| <p>whether the content outside of the animated bounds should be clipped, true by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="fadeIn(kotlin.Float, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="fadeIn-kotlin.Float-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="fadein"></a> |
| <h3 class="api-name" id="fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeIn</a>(<br> float initialAlpha,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Float.html">Float</a>> animationSpec<br>)</pre> |
| <p>This fades in the content of the transition, from the specified starting alpha (i.e. <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">initialAlpha</a></code>) to 1f, using the supplied <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">animationSpec</a></code>. <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeIn(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">initialAlpha</a></code> defaults to 0f, and <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> is used by default.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = fadeIn( |
| // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default |
| initialAlpha = 0.4f |
| ), |
| exit = fadeOut( |
| // Overwrites the default animation with tween |
| animationSpec = tween(durationMillis = 250) |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>float initialAlpha</code></td> |
| <td> |
| <p>the starting alpha of the enter transition, 0f by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Float.html">Float</a>> animationSpec</code></td> |
| <td> |
| <p>the <code><a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> for this animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="fadeOut(kotlin.Float, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="fadeOut-kotlin.Float-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="fadeout"></a> |
| <h3 class="api-name" id="fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">fadeOut</a>(<br> float targetAlpha,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Float.html">Float</a>> animationSpec<br>)</pre> |
| <p>This fades out the content of the transition, from full opacity to the specified target alpha (i.e. <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">targetAlpha</a></code>), using the supplied <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">animationSpec</a></code>. By default, the content will be faded out to fully transparent (i.e. <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">targetAlpha</a></code> defaults to 0), and <code><a href="/reference/androidx/compose/animation/package-summary.html#fadeOut(kotlin.Float,androidx.compose.animation.core.FiniteAnimationSpec)">animationSpec</a></code> uses <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = fadeIn( |
| // Overwrites the initial value of alpha to 0.4f for fade in, 0 by default |
| initialAlpha = 0.4f |
| ), |
| exit = fadeOut( |
| // Overwrites the default animation with tween |
| animationSpec = tween(durationMillis = 250) |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>float targetAlpha</code></td> |
| <td> |
| <p>the target alpha of the exit transition, 0f by default</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Float.html">Float</a>> animationSpec</code></td> |
| <td> |
| <p>the <code><a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a></code> for this animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="shrinkHorizontally(AlignmentHorizontal, kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Boolean)"></a><a name="shrinkHorizontally-AlignmentHorizontal-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Boolean-"></a><a name="shrinkhorizontally"></a> |
| <h3 class="api-name" id="shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetWidth,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</pre> |
| <p>This shrinks the clip bounds of the disappearing content horizontally, from the full width to the width returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetWidth</a></code>. <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkTowards</a></code> controls the direction of the bounds shrink animation. By default, the clip bounds animates from full width to 0, shrinking towards the the end of the content.</p> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a></code> animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetWidth</a></code> is a lambda that takes the full width of the content and returns a target width of the content. This allows not only absolute width, but also a target width that is proportional to the content width.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">clip</a></code> defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.expandHorizontally |
| import androidx.compose.animation.shrinkHorizontally |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = expandHorizontally( |
| // Set the start width to 20 (pixels), 0 by default |
| initialWidth = { 20 } |
| ), |
| exit = shrinkHorizontally( |
| // Shrink towards the end (i.e. right edge for LTR, left edge for RTL). The default |
| // direction for the shrink is towards [Alignment.Start] |
| shrinkTowards = Alignment.End, |
| // Set the end width for the shrink animation to a quarter of the full width. |
| targetWidth = { fullWidth -> fullWidth / 4 }, |
| // Overwrites the default animation with tween for this shrink animation. |
| animationSpec = tween() |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards</code></td> |
| <td> |
| <p>the ending point of the shrinking bounds, Alignment.End by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetWidth</code></td> |
| <td> |
| <p>returns the end width of the shrinking bounds, 0 by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the shrinking animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean clip</code></td> |
| <td> |
| <p>whether the content outside of the animated bounds should be clipped, true by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="shrinkOut(Alignment, kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Boolean)"></a><a name="shrinkOut-Alignment-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Boolean-"></a><a name="shrinkout"></a> |
| <h3 class="api-name" id="shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> targetSize,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</pre> |
| <p>This shrinks the clip bounds of the disappearing content from the full size to the size returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetSize</a></code>. <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkTowards</a></code> controls the direction of the bounds shrink animation. By default, the clip bounds animates from full size to <code>IntSize(0, 0)</code>, shrinking towards the the bottom right corner (or bottom left corner in RTL layouts) of the content.</p> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkOut</a></code> animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetSize</a></code> is a lambda that takes the full size of the content and returns a target size of the bounds of the content. This allows not only absolute size, but also a target size that is proportional to the content size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkOut(Alignment,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">clip</a></code> defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.</p> |
| <p>For shrinking only horizontally or vertically, consider <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkHorizontally(AlignmentHorizontal,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkHorizontally</a></code>, <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a></code>.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.expandIn |
| import androidx.compose.animation.shrinkOut |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.unit.IntSize |
| |
| var visible by remember { mutableStateOf(true) } |
| |
| AnimatedVisibility( |
| visible, |
| enter = expandIn( |
| // Overwrites the corner of the content that is first revealed |
| expandFrom = Alignment.BottomStart, |
| // Overwrites the initial size to 50 pixels by 50 pixels |
| initialSize = { IntSize(50, 50) }, |
| // Overwrites the default spring animation with tween |
| animationSpec = tween(100, easing = LinearOutSlowInEasing) |
| ), |
| exit = shrinkOut( |
| // Overwrites the area of the content that the shrink animation will end on. The |
| // following parameters will shrink the content's clip bounds from the full size of the |
| // content to 1/10 of the width and 1/5 of the height. The shrinking clip bounds will |
| // always be aligned to the CenterStart of the full-content bounds. |
| shrinkTowards = Alignment.CenterStart, |
| // Overwrites the target size of the shrinking animation. |
| targetSize = { fullSize -> IntSize(fullSize.width / 10, fullSize.height / 5) }, |
| animationSpec = tween(100, easing = FastOutSlowInEasing) |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards</code></td> |
| <td> |
| <p>the ending point of the shrinking bounds, Alignment.BottomEnd by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> targetSize</code></td> |
| <td> |
| <p>returns the end size of the shrinking bounds, <code>IntSize(0, 0)</code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the shrinking animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean clip</code></td> |
| <td> |
| <p>whether the content outside of the animated bounds should be clipped, true by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="shrinkVertically(AlignmentVertical, kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec, kotlin.Boolean)"></a><a name="shrinkVertically-AlignmentVertical-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-kotlin.Boolean-"></a><a name="shrinkvertically"></a> |
| <h3 class="api-name" id="shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetHeight,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec,<br> boolean clip<br>)</pre> |
| <p>This shrinks the clip bounds of the disappearing content vertically, from the full height to the height returned from <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetHeight</a></code>. <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkTowards</a></code> controls the direction of the bounds shrink animation. By default, the clip bounds animates from full height to 0, shrinking towards the the bottom of the content.</p> |
| <p><b>Note</b>: <code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">shrinkVertically</a></code> animates the bounds of the content. This bounds change will also result in the animation of other layouts that are dependent on this size.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">targetHeight</a></code> is a lambda that takes the full height of the content and returns a target height of the content. This allows not only absolute height, but also a target height that is proportional to the content height.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#shrinkVertically(AlignmentVertical,kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec,kotlin.Boolean)">clip</a></code> defines whether the content outside of the animated bounds should be clipped. By default, clip is set to true, which only shows content in the animated bounds.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.expandVertically |
| import androidx.compose.animation.shrinkVertically |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| |
| AnimatedVisibility( |
| visible, |
| // Sets the initial height of the content to 20, revealing only the top of the content at |
| // the beginning of the expanding animation. |
| enter = expandVertically( |
| expandFrom = Alignment.Top, |
| initialHeight = { 20 } |
| ), |
| // Shrinks the content to half of its full height via an animation. |
| exit = shrinkVertically( |
| targetHeight = { fullHeight -> fullHeight / 2 }, |
| animationSpec = tween() |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a> shrinkTowards</code></td> |
| <td> |
| <p>the ending point of the shrinking bounds, Alignment.Bottom by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetHeight</code></td> |
| <td> |
| <p>returns the end height of the shrinking bounds, 0 by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the shrinking animation, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>boolean clip</code></td> |
| <td> |
| <p>whether the content outside of the animated bounds should be clipped, true by default</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="slideIn(kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="slideIn-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="slidein"></a> |
| <h3 class="api-name" id="slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideIn</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideIn</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> initialOffset,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</pre> |
| <p>This slides in the content of the transition, from a starting offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffset</a></code> to <code>IntOffset(0, 0)</code>. The direction of the slide can be controlled by configuring the <code><a href="/reference/androidx/compose/animation/package-summary.html#slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffset</a></code>. A positive x value means sliding from right to left, whereas a negative x value will slide the content to the right. Similarly positive and negative y values correspond to sliding up and down, respectively.</p> |
| <p>If the sliding is only desired horizontally or vertically, instead of along both axis, consider using <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</a></code> or <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</a></code>.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#slideIn(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffset</a></code> is a lambda that takes the full size of the content and returns an offset. This allows the offset to be defined proportional to the full size, or as an absolute value.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.slideIn |
| import androidx.compose.animation.slideOut |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.unit.IntOffset |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible, |
| enter = slideIn( |
| // Specifies the starting offset of the slide-in to be 1/4 of the width to the right, |
| // 100 (pixels) below the content position, which results in a simultaneous slide up |
| // and slide left. |
| { fullSize -> IntOffset(fullSize.width / 4, 100) }, |
| tween(100, easing = LinearOutSlowInEasing) |
| ), |
| exit = slideOut( |
| // The offset can be entirely independent of the size of the content. This specifies |
| // a target offset 180 pixels to the left of the content, and 50 pixels below. This will |
| // produce a slide-left combined with a slide-down. |
| { IntOffset(-180, 50) }, |
| tween(100, easing = FastOutSlowInEasing) |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> initialOffset</code></td> |
| <td> |
| <p>a lambda that takes the full size of the content and returns the initial offset for the slide-in</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the slide-in, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="slideInHorizontally(kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="slideInHorizontally-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="slideinhorizontally"></a> |
| <h3 class="api-name" id="slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialOffsetX,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</pre> |
| <p>This slides in the content horizontally, from a starting offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetX</a></code> to <code>0</code><b>pixels</b>. The direction of the slide can be controlled by configuring the <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetX</a></code>. A positive value means sliding from right to left, whereas a negative value would slide the content from left to right.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#slideInHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetX</a></code> is a lambda that takes the full width of the content and returns an offset. This allows the starting offset to be defined proportional to the full size, or as an absolute value. It defaults to return half of negative width, which would offset the content to the left by half of its width, and slide towards the right.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.spring |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.animation.slideInHorizontally |
| import androidx.compose.animation.slideOutHorizontally |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = slideInHorizontally( |
| // Offsets the content by 1/3 of its width to the left, and slide towards right |
| initialOffsetX = { fullWidth -> -fullWidth / 3 }, |
| // Overwrites the default animation with tween for this slide animation. |
| animationSpec = tween(durationMillis = 200) |
| ) + fadeIn( |
| // Overwrites the default animation with tween |
| animationSpec = tween(durationMillis = 200) |
| ), |
| exit = slideOutHorizontally( |
| // Overwrites the ending position of the slide-out to 200 (pixels) to the right |
| targetOffsetX = { 200 }, |
| animationSpec = spring(stiffness = Spring.StiffnessHigh) |
| ) + fadeOut() |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) {} |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialOffsetX</code></td> |
| <td> |
| <p>a lambda that takes the full width of the content in pixels and returns the initial offset for the slide-in, by default it returns <code>-fullWidth/2</code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the slide-in, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="slideInVertically(kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="slideInVertically-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="slideinvertically"></a> |
| <h3 class="api-name" id="slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/EnterTransition.html">EnterTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideInVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialOffsetY,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</pre> |
| <p>This slides in the content vertically, from a starting offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetY</a></code> to <code>0</code> in <b>pixels</b>. The direction of the slide can be controlled by configuring the <code><a href="/reference/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetY</a></code>. A positive initial offset means sliding up, whereas a negative value would slide the content down.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#slideInVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">initialOffsetY</a></code> is a lambda that takes the full Height of the content and returns an offset. This allows the starting offset to be defined proportional to the full height, or as an absolute value. It defaults to return half of negative height, which would offset the content up by half of its Height, and slide down.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.expandVertically |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.animation.shrinkVertically |
| import androidx.compose.animation.slideInVertically |
| import androidx.compose.animation.slideOutVertically |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = slideInVertically( |
| // Start the slide from 40 (pixels) above where the content is supposed to go, to |
| // produce a parallax effect |
| initialOffsetY = { -40 } |
| ) + expandVertically( |
| expandFrom = Alignment.Top |
| ) + fadeIn(initialAlpha = 0.3f), |
| exit = slideOutVertically() + shrinkVertically() + fadeOut() |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> initialOffsetY</code></td> |
| <td> |
| <p>a lambda that takes the full Height of the content and returns the initial offset for the slide-in, by default it returns <code>-fullHeight/2</code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the slide-in, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="slideOut(kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="slideOut-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="slideout"></a> |
| <h3 class="api-name" id="slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOut</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOut</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> targetOffset,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</pre> |
| <p>This slides out the content of the transition, from an offset of <code>IntOffset(0, 0)</code> to the target offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffset</a></code>. The direction of the slide can be controlled by configuring the <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffset</a></code>. A positive x value means sliding from left to right, whereas a negative x value would slide the content from right to left. Similarly, positive and negative y values correspond to sliding down and up, respectively.</p> |
| <p>If the sliding is only desired horizontally or vertically, instead of along both axis, consider using <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a></code> or <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a></code>.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#slideOut(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffset</a></code> is a lambda that takes the full size of the content and returns an offset. This allows the offset to be defined proportional to the full size, or as an absolute value.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.slideIn |
| import androidx.compose.animation.slideOut |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.material.Text |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| import androidx.compose.ui.unit.IntOffset |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible, |
| enter = slideIn( |
| // Specifies the starting offset of the slide-in to be 1/4 of the width to the right, |
| // 100 (pixels) below the content position, which results in a simultaneous slide up |
| // and slide left. |
| { fullSize -> IntOffset(fullSize.width / 4, 100) }, |
| tween(100, easing = LinearOutSlowInEasing) |
| ), |
| exit = slideOut( |
| // The offset can be entirely independent of the size of the content. This specifies |
| // a target offset 180 pixels to the left of the content, and 50 pixels below. This will |
| // produce a slide-left combined with a slide-down. |
| { IntOffset(-180, 50) }, |
| tween(100, easing = FastOutSlowInEasing) |
| ) |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Text("Content to appear/disappear", Modifier.fillMaxWidth().requiredHeight(200.dp)) |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> targetOffset</code></td> |
| <td> |
| <p>a lambda that takes the full size of the content and returns the target offset for the slide-out</p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the slide-out, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="slideOutHorizontally(kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="slideOutHorizontally-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="slideouthorizontally"></a> |
| <h3 class="api-name" id="slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutHorizontally</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetOffsetX,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</pre> |
| <p>This slides out the content horizontally, from 0 to a target offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetX</a></code> in <b>pixels</b>. The direction of the slide can be controlled by configuring the <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetX</a></code>. A positive value means sliding to the right, whereas a negative value would slide the content towards the left.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutHorizontally(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetX</a></code> is a lambda that takes the full width of the content and returns an offset. This allows the target offset to be defined proportional to the full size, or as an absolute value. It defaults to return half of negative width, which would slide the content to the left by half of its width.</p> |
| <pre class="prettyprint"> |
| import androidx.compose.animation.AnimatedVisibility |
| import androidx.compose.animation.core.spring |
| import androidx.compose.animation.core.tween |
| import androidx.compose.animation.fadeIn |
| import androidx.compose.animation.fadeOut |
| import androidx.compose.animation.slideInHorizontally |
| import androidx.compose.animation.slideOutHorizontally |
| import androidx.compose.foundation.layout.Box |
| import androidx.compose.foundation.layout.fillMaxWidth |
| import androidx.compose.foundation.layout.requiredHeight |
| import androidx.compose.runtime.mutableStateOf |
| import androidx.compose.runtime.remember |
| |
| var visible by remember { mutableStateOf(true) } |
| AnimatedVisibility( |
| visible = visible, |
| enter = slideInHorizontally( |
| // Offsets the content by 1/3 of its width to the left, and slide towards right |
| initialOffsetX = { fullWidth -> -fullWidth / 3 }, |
| // Overwrites the default animation with tween for this slide animation. |
| animationSpec = tween(durationMillis = 200) |
| ) + fadeIn( |
| // Overwrites the default animation with tween |
| animationSpec = tween(durationMillis = 200) |
| ), |
| exit = slideOutHorizontally( |
| // Overwrites the ending position of the slide-out to 200 (pixels) to the right |
| targetOffsetX = { 200 }, |
| animationSpec = spring(stiffness = Spring.StiffnessHigh) |
| ) + fadeOut() |
| ) { |
| // Content that needs to appear/disappear goes here: |
| Box(Modifier.fillMaxWidth().requiredHeight(200.dp)) {} |
| }</pre> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetOffsetX</code></td> |
| <td> |
| <p>a lambda that takes the full width of the content and returns the initial offset for the slide-in, by default it returns <code>fullWidth/2</code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the slide-out, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div><a name="slideOutVertically(kotlin.Function1, androidx.compose.animation.core.FiniteAnimationSpec)"></a><a name="slideOutVertically-kotlin.Function1-androidx.compose.animation.core.FiniteAnimationSpec-"></a><a name="slideoutvertically"></a> |
| <h3 class="api-name" id="slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</h3> |
| <pre class="api-signature no-pretty-print">@<a href="/reference/androidx/compose/animation/ExperimentalAnimationApi.html">ExperimentalAnimationApi</a><br>public static final @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/ExitTransition.html">ExitTransition</a> <a href="/reference/androidx/compose/animation/EnterExitTransitionKt.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">slideOutVertically</a>(<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetOffsetY,<br> @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec<br>)</pre> |
| <p>This slides out the content vertically, from 0 to a target offset defined in <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetY</a></code> in <b>pixels</b>. The direction of the slide-out can be controlled by configuring the <code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetY</a></code>. A positive target offset means sliding down, whereas a negative value would slide the content up.</p> |
| <p><code><a href="/reference/androidx/compose/animation/package-summary.html#slideOutVertically(kotlin.Function1,androidx.compose.animation.core.FiniteAnimationSpec)">targetOffsetY</a></code> is a lambda that takes the full Height of the content and returns an offset. This allows the target offset to be defined proportional to the full height, or as an absolute value. It defaults to return half of the negative height, which would slide the content up by half of its Height.</p> |
| <div class="devsite-table-wrapper"> |
| <table class="responsive"> |
| <thead> |
| <tr> |
| <th colspan="2">Parameters</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> Function1<@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>, @<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="https://developer.android.com/reference/java/lang/Integer.html">Integer</a>> targetOffsetY</code></td> |
| <td> |
| <p>a lambda that takes the full Height of the content and returns the target offset for the slide-out, by default it returns <code>fullHeight/2</code></p> |
| </td> |
| </tr> |
| <tr> |
| <td width="40%"><code>@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/androidx/compose/animation/core/FiniteAnimationSpec.html">FiniteAnimationSpec</a><@<a href="/reference/androidx/annotation/NonNull.html">NonNull</a> <a href="/reference/[JVM root]/<ERROR CLASS>.html"><ERROR CLASS></a>> animationSpec</code></td> |
| <td> |
| <p>the animation used for the slide-out, <code><a href="/reference/androidx/compose/animation/core/package-summary.html#spring(kotlin.Float,kotlin.Float,kotlin.Any)">spring</a></code> by default.</p> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </body> |
| </html> |
