I don’t quite understand relations between State&l...

# compose

[orangy]

I don’t quite understand relations between State<T> and Transition<T> and how to make a “composable” animations. Let’s say I have this simple data class:

data class ShapeStroke(val width: Dp, val color: Color)

I want to write a function

fun <S> Transition<S>.animateShapeStroke() : State<ShapeStroke>

so that it would just add child animations for width and color and return State<ShapeStroke> instance. What’s proper way to do this?

[orangy]

Okay, I’ve found derivedStateOf and it kinda works

@Immutable
data class ShapeStroke(val width: Dp, val color: Color, val insets: Insets = Insets.Empty)

@Composable
inline fun <S> Transition<S>.animateShapeStroke(
    noinline transitionSpec:
    @Composable Transition.Segment<S>.() -> FiniteAnimationSpec<ShapeStroke?> = { spring() },
    label: String = "ShapeStrokeAnimation",
    targetValueByState: @Composable() (state: S) -> ShapeStroke?
): State<ShapeStroke> {

    val width by animateDp(label = "$label.width") { targetValueByState(it)?.width ?: 0.dp }
    val color by animateColor(label = "$label.color") { targetValueByState(it)?.color ?: Color.Unspecified }
    val insets by animateInsets(label = "$label.insets") { targetValueByState(it)?.insets ?: Insets.Empty }

    return derivedStateOf { ShapeStroke(width, color, insets) }
}

But currently the question is how to convert transitionSpec for ShapeStroke into specs for child values?

[Zach Klippenstein (he/him) [MOD]]

you’ll want to remember that derivedStateOf. I’m not sure how to answer your question though, i’m not super familiar with nested transition apis