PathEasing

An easing function for an arbitrary Path.

The Path must begin at (0, 0) and end at (1, 1). The x-coordinate along the Path is the input value and the output is the y coordinate of the line at that point. This means that the Path must conform to a function y = f(x).

The Path must be continuous along the x axis. The Path should also be monotonically increasing along the x axis. If the Path is not monotonic and there are multiple y values for a given x, the chosen y value is implementation dependent and may vary.

The Path must not contain any Path.close command as it would force the path to restart from the beginning.

This is equivalent to the Android PathInterpolator.

CubicBezierEasing should be used if a single bezier curve is required as it performs fewer allocations. PathEasing should be used when creating an arbitrary path.

Note: a PathEasing instance can be used from any thread, but not concurrently.

import androidx.compose.animation.core.PathEasing
import androidx.compose.animation.core.animateIntOffsetAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.offset
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Path
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp

// Creates a custom PathEasing curve and applies it to an animation
var toggled by remember {
    mutableStateOf(true)
}
val pathForAnimation = remember {
    Path().apply {
        moveTo(0f, 0f)
        cubicTo(0.05f, 0f, 0.133333f, 0.06f, 0.166666f, 0.4f)
        cubicTo(0.208333f, 0.82f, 0.25f, 1f, 1f, 1f)
    }
}
val offset by animateIntOffsetAsState(
    targetValue =
    if (toggled) IntOffset.Zero else IntOffset(300, 300),
    label = "offset",
    animationSpec = tween(durationMillis = 1000, easing = PathEasing(pathForAnimation))
)
Box(modifier = Modifier
    .fillMaxSize()
    .clickable {
        toggled = !toggled
    }) {
    Box(modifier = Modifier
        .offset {
            offset
        }
        .size(100.dp)
        .background(Color.Blue))
}

Summary

PathEasing(path: Path)

open fun transform(fraction: Float): Float