# animateFloat

Common/All

## Functions summary

|---|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateFloat.composable#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)( initialValue: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, targetValue: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html, animationSpec: https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteRepeatableSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html )` Creates an animation of Float type that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`. | Cmn |
| `inline https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable <S : https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-any/index.html?> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition<S>.https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateFloat.composable#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)( noinline transitionSpec: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition.Segment<S>.() -> https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>, label: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html, targetValueByState: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable (state) -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html )` Creates a Float animation as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`. | Cmn |

## Functions

### InfiniteTransition.animateFloat

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/InfiniteTransition.kt+function:animateFloat) Added in [1.4.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.4.0)

```
@Composable
fun InfiniteTransition.animateFloat(
    initialValue: Float,
    targetValue: Float,
    animationSpec: InfiniteRepeatableSpec<Float>,
    label: String = "FloatAnimation"
): State<Float>
```

Creates an animation of Float type that runs infinitely as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/InfiniteTransition`.

Once the animation is created, it will run from `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` to `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and repeat. Depending on the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode` of the provided `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`, the animation could either restart after each iteration (i.e. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Restart`), or reverse after each iteration (i.e . `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/RepeatMode#Reverse`).

If `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` or `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` is changed at any point during the animation, the animation will be restarted with the new `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` and `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)`. **Note** : this means continuity will *not* be preserved.

A `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.InfiniteTransition).animateFloat(kotlin.Float,kotlin.Float,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` for differentiating this animation from others in android studio.

```kotlin
import androidx.compose.animation.animateColor
import androidx.compose.animation.core.LinearEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.graphicsLayer

@Composable
fun InfinitelyPulsingHeart() {
    // Creates an [InfiniteTransition] instance for managing child animations.
    val infiniteTransition = rememberInfiniteTransition()

    // Creates a child animation of float type as a part of the [InfiniteTransition].
    val scale by
        infiniteTransition.animateFloat(
            initialValue = 3f,
            targetValue = 6f,
            animationSpec =
                infiniteRepeatable(
                    // Infinitely repeating a 1000ms tween animation using default easing curve.
                    animation = tween(1000),
                    // After each iteration of the animation (i.e. every 1000ms), the animation
                    // will
                    // start again from the [initialValue] defined above.
                    // This is the default [RepeatMode]. See [RepeatMode.Reverse] below for an
                    // alternative.
                    repeatMode = RepeatMode.Restart,
                ),
        )

    // Creates a Color animation as a part of the [InfiniteTransition].
    val color by
        infiniteTransition.animateColor(
            initialValue = Color.Red,
            targetValue = Color(0xff800000), // Dark Red
            animationSpec =
                infiniteRepeatable(
                    // Linearly interpolate between initialValue and targetValue every 1000ms.
                    animation = tween(1000, easing = LinearEasing),
                    // Once [TargetValue] is reached, starts the next iteration in reverse (i.e.
                    // from
                    // TargetValue to InitialValue). Then again from InitialValue to
                    // TargetValue. This
                    // [RepeatMode] ensures that the animation value is *always continuous*.
                    repeatMode = RepeatMode.Reverse,
                ),
        )

    Box(Modifier.fillMaxSize()) {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = null,
            modifier =
                Modifier.align(Alignment.Center).graphicsLayer(scaleX = scale, scaleY = scale),
            tint = color,
        )
    }
}
```

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.InfiniteTransition).animateValue(kotlin.Any,kotlin.Any,androidx.compose.animation.core.TwoWayConverter,androidx.compose.animation.core.InfiniteRepeatableSpec,kotlin.String)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)` |   |

### Transition.animateFloat

Cmn Artifact: [androidx.compose.animation:animation-core](https://developer.android.com/jetpack/androidx/releases/compose-animation) [View Source](https://cs.android.com/search?q=file:androidx/compose/animation/core/Transition.kt+function:animateFloat) Added in [1.0.0](https://developer.android.com/jetpack/androidx/releases/compose-animation#1.0.0)

```
@Composable
inline fun <S : Any?> Transition<S>.animateFloat(
    noinline transitionSpec: @Composable Transition.Segment<S>.() -> FiniteAnimationSpec<Float> = {
        spring()
    },
    label: String = "FloatAnimation",
    targetValueByState: @Composable (state) -> Float
): State<Float>
```

Creates a Float animation as a part of the given `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`. This means the states of this animation will be managed by the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition`.

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)` is used as a mapping from a target state to the target value of this animation. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` will be using this mapping to determine what value to target this animation towards. **Note** that `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)` is a composable function. This means the mapping function could access states, CompositionLocals, themes, etc. If the targetValue changes outside of a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` run (i.e. when the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` already reached its targetState), the `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/Transition` will start running again to ensure this animation reaches its new target smoothly.

An optional `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)` can be provided to specify (potentially different) animation for each pair of initialState and targetState. `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/FiniteAnimationSpec` includes any non-infinite animation, such as `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#tween(kotlin.Int,kotlin.Int,androidx.compose.animation.core.Easing)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)`, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#keyframes(kotlin.Function1)` and even `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#repeatable(kotlin.Int,androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode,androidx.compose.animation.core.StartOffset)`, but not `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#infiniteRepeatable(androidx.compose.animation.core.DurationBasedAnimationSpec,androidx.compose.animation.core.RepeatMode,androidx.compose.animation.core.StartOffset)`. By default, `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)` uses a `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#spring(kotlin.Float,kotlin.Float,kotlin.Any)` animation for all transition destinations.

```kotlin
import androidx.compose.animation.core.Transition
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.keyframes
import androidx.compose.animation.core.snap
import androidx.compose.animation.core.spring
import androidx.compose.animation.core.tween
import androidx.compose.foundation.layout.Box
import androidx.compose.material.Button
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.graphicsLayer

// enum class ButtonStatus {Initial, Pressed, Released}
@Composable
fun AnimateAlphaAndScale(modifier: Modifier, transition: Transition<ButtonStatus>) {
    // Defines a float animation as a child animation of transition. This allows the
    // transition to manage the states of this animation. The returned State<Float> from the
    // [animateFloat] function is used here as a property delegate.
    // This float animation will use the default [spring] for all transition destinations, as
    // specified by the default `transitionSpec`.
    val scale: Float by
        transition.animateFloat { state -> if (state == ButtonStatus.Pressed) 1.2f else 1f }

    // Alternatively, we can specify different animation specs based on the initial state and
    // target state of the a transition run using `transitionSpec`.
    val alpha: Float by
        transition.animateFloat(
            transitionSpec = {
                when {
                    ButtonStatus.Initial isTransitioningTo ButtonStatus.Pressed -> {
                        keyframes {
                            durationMillis = 225
                            0f at 0 // optional
                            0.3f at 75
                            0.2f at 225 // optional
                        }
                    }
                    ButtonStatus.Pressed isTransitioningTo ButtonStatus.Released -> {
                        tween(durationMillis = 220)
                    }
                    else -> {
                        snap()
                    }
                }
            }
        ) { state ->
            // Same target value for Initial and Released states
            if (state == ButtonStatus.Pressed) 0.2f else 0f
        }

    Box(modifier.graphicsLayer(alpha = alpha, scaleX = scale)) {
        // content goes here
    }
}
```

`https://developer.android.com/reference/kotlin/androidx/compose/animation/core/package-summary#(androidx.compose.animation.core.Transition).animateFloat(kotlin.Function1,kotlin.String,kotlin.Function1)` is used to differentiate from other animations in the same transition in Android Studio.

| Returns |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State<https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-float/index.html>` | A `https://developer.android.com/reference/kotlin/androidx/compose/runtime/State` object, the value of which is updated by animation |

| See also |
|---|---|
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/rememberTransition.composable#rememberTransition(androidx.compose.animation.core.TransitionState,kotlin.String)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/updateTransition.composable#updateTransition(kotlin.Any,kotlin.String)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/core/animateValue.composable#(androidx.compose.animation.core.Transition).animateValue(androidx.compose.animation.core.TwoWayConverter,kotlin.Function1,kotlin.String,kotlin.Function1)` |   |
| `https://developer.android.com/reference/kotlin/androidx/compose/animation/animateColor.composable#(androidx.compose.animation.core.Transition).animateColor(kotlin.Function1,kotlin.String,kotlin.Function1)` |   |