KeyframesWithSplineSpec
- Cmn
class KeyframesWithSplineSpec<T : Any?> : DurationBasedAnimationSpec
KeyframesWithSplineSpec creates a keyframe based DurationBasedAnimationSpec using the Monotone cubic Hermite spline to interpolate between the values in config.
KeyframesWithSplineSpec may be used to animate any n-dimensional values, but you'll likely use it most to animate positional 2D values such as Offset. For example:
import androidx.compose.animation.core.keyframesWithSpline import androidx.compose.ui.geometry.Offset keyframesWithSpline { durationMillis = 200 Offset(0f, 0f) at 0 Offset(500f, 100f) at 100 Offset(400f, 50f) at 150 }
You may also provide a periodicBias value (between 0f and 1f) to make a periodic spline. Periodic splines adjust the initial and final velocity to be the same. This is useful to create smooth repeatable animations. Such as an infinite pulsating animation:
import androidx.compose.animation.core.LinearEasing import androidx.compose.animation.core.RepeatMode import androidx.compose.animation.core.animate import androidx.compose.animation.core.infiniteRepeatable import androidx.compose.animation.core.keyframesWithSpline import androidx.compose.foundation.Image import androidx.compose.foundation.layout.size import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Favorite import androidx.compose.runtime.LaunchedEffect import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableFloatStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.graphicsLayer import androidx.compose.ui.unit.dp var alpha by remember { mutableFloatStateOf(0f) } LaunchedEffect(Unit) { animate( initialValue = 0f, targetValue = 0f, animationSpec = infiniteRepeatable( // With a periodicBias of 0.5f it creates a similar animation to a sinusoidal // curve // so the transition as the animation repeats is completely seamless animation = keyframesWithSpline(periodicBias = 0.5f) { durationMillis = 2000 1f at 1000 using LinearEasing }, repeatMode = RepeatMode.Restart, ), ) { value, _ -> alpha = value } } Image( imageVector = Icons.Filled.Favorite, contentDescription = null, modifier = Modifier.size(150.dp).graphicsLayer { this.alpha = alpha }, colorFilter = ColorFilter.tint(Color.Red), )
The periodicBias value (from 0.0 to 1.0) indicates how much of the original starting and final velocity are modified to achieve periodicity:
-
0f: Modifies only the starting velocity to match the final velocity
-
1f: Modifies only the final velocity to match the starting velocity
-
0.5f: Modifies both velocities equally, picking the average between the two
import androidx.compose.animation.core.keyframesWithSpline import androidx.compose.ui.geometry.Offset import androidx.compose.ui.unit.IntOffset keyframesWithSpline { durationMillis = 200 IntOffset(0, 0) at 0 IntOffset(500, 100) at 100 IntOffset(400, 50) at 150 }
import androidx.compose.animation.core.keyframesWithSpline import androidx.compose.ui.geometry.Offset import androidx.compose.ui.unit.DpOffset import androidx.compose.ui.unit.dp keyframesWithSpline { durationMillis = 200 DpOffset(0.dp, 0.dp) at 0 DpOffset(500.dp, 100.dp) at 100 DpOffset(400.dp, 50.dp) at 150 }
| See also | |
|---|---|
keyframesWithSpline |
Summary
Nested types |
|---|
| Keyframe configuration class for |
Public constructors | |
|---|---|
<T : Any?> KeyframesWithSplineSpec( | Cmn |
<T : Any?> KeyframesWithSplineSpec(Constructor that returns a periodic spline implementation. | Cmn |
Public functions | ||
|---|---|---|
open VectorizedDurationBasedAnimationSpec<V> | <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>)Creates a | Cmn |
Public properties | ||
|---|---|---|
KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T> | Cmn |
Public constructors
KeyframesWithSplineSpec
<T : Any?> KeyframesWithSplineSpec(
config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>
)
KeyframesWithSplineSpec
<T : Any?> KeyframesWithSplineSpec(
config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T>,
periodicBias: @FloatRange(from = 0.0, to = 1.0) Float
)
Constructor that returns a periodic spline implementation.
| Parameters | |
|---|---|
config: KeyframesWithSplineSpec.KeyframesWithSplineSpecConfig<T> | Keyframe configuration of the spline, should contain the set of values, timestamps and easing curves to animate through. |
periodicBias: @FloatRange(from = 0.0, to = 1.0) Float | A value from 0f to 1f, indicating how much the starting or ending velocities are modified respectively to achieve periodicity. |
Public functions
vectorize
open fun <V : AnimationVector> vectorize(converter: TwoWayConverter<T, V>): VectorizedDurationBasedAnimationSpec<V>
Creates a VectorizedAnimationSpec with the given TwoWayConverter.
The underlying animation system operates on AnimationVectors. T will be converted to AnimationVector to animate. VectorizedAnimationSpec describes how the converted AnimationVector should be animated. E.g. The animation could simply interpolate between the start and end values (i.e.TweenSpec), or apply spring physics to produce the motion (i.e. SpringSpec), etc)
| Parameters | |
|---|---|
converter: TwoWayConverter<T, V> | converts the type |