https://kotlinlang.org logo
#compose
Title
# compose
o

orangy

09/22/2021, 3:20 PM
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:
Copy code
data class ShapeStroke(val width: Dp, val color: Color)
I want to write a function
Copy code
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?
Okay, I’ve found
derivedStateOf
and it kinda works
Copy code
@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?
z

Zach Klippenstein (he/him) [MOD]

09/22/2021, 10:15 PM
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