I don t quite understand relations between State lt T gt and Transition lt T gt 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 lt S gt Transition lt S gt animateShapeStroke State lt ShapeStroke gt ``` so that it would just add child animations for width and color and return `State lt ShapeStroke gt ` 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 lt S gt Transition lt S gt animateShapeStroke noinline transitionSpec Composable Transition Segment lt S gt gt FiniteAnimationSpec lt ShapeStroke gt = spring label String = ShapeStrokeAnimation targetValueByState Composable state S gt ShapeStroke State lt ShapeStroke gt 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

I don t quite understand relations between State lt T gt and kotlinlang #compose

Channels

portugal

stayhungrystayfoolish

skia-wasm-interop-temp

java-to-kotlin-refactoring

event21-community-content

refactoring-to-kotlin

kotlin-multiplatform-contest

tricity-kotlin-user-group

cincinnati-user-group

prozis-android-backup

russian-kotlinasfirst

juul-libraries

lanark

wimix_sentry

androidgithubprojects

swagger-gradle-codegen

competitive-programming

navigation-architecture-component

myndocs-oauth2-server

practical-functional-programming

hyderabad

kotlinultimatechallenge

jvm-ir-backend-feedback

Title

# compose

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?

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