Thread
#compose
    orangy

    orangy

    1 year ago
    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?
    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]

    Zach Klippenstein (he/him) [MOD]

    1 year ago
    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