IssueTracker

Issue

Currently, it is very hard to implement more complex gesture-driven animations.

• APIs like (Anchored)Draggable only output pixel values. While these can be converted to a float animation progress, this often requires finding out the width of the composable to turn the absolute value into a relative one, which in turn needs ConstraintLayout or other workarounds. It would be nice to have a convenience API to turn these gestures into an animation progess float (or even directly into a Transition)
• Once one has a progess float, it can not be easily used for "complex" animations, such as AnimatedContent, AnimatedVisibility or in the Transition API. I feel like controlling e.g. a crossfade smoothly with a gesture should be very simple.

Proposed Solution

Resulting from these considerations, these are the API additions I propose:

• Add a way to query animation progress from an AnchoredDraggableState (instead of only offset).
  Something like:

  fun AnchoredDraggableState<T>.animationProgress(from: T, to: T) -> Float {
    // something along the lines of
    val fromOffset = this.anchors.positionOf(from)
    val toOffset = this.anchors.positionOf(to)
    return ((this.offset - fromOffset) / toOffset - fromOffset).coerceIn(0, 1)
  }
  

• Add a way to set not only the target state of a Transition/AnimatedContent/etc. but also provide an animation progress (this would probably require to also provide a source state). For Composables like AnimatedContent this should probably be a lambda parameter to avoid unncecessary recompositions.
• Add a convenience method to directly convert an AnimatedDraggableState into a gesture driven Transition (or any other way to link those two) since they would really play well together in my opinion.
• Add the possibility to query the current animation progress of a transition to a certain state (optionally providing a source state) - for example:

  fun Transition<T>.progressTowards(target: T) -> Float {
    // if transition is currently settlet in target state, return 1
    // if transition is animating from or to target state, return float between 0..1
    // otherwise return 0
  }
  

Concrete Use Case

I have a composable that can be in multiple different layout states (concretely: Item containers (lists) that can be collapsed and then slide off screen). These states don't all include the same composables (once the container has been collapsed it doesn't need to compose its items) and have different sizes (the container shrinks when collapsing). Ideally, I would like to use AnimatedContent or Crossfade for the container shrinking and an offset modifier to make it slide off screen.

Now I want this animation to be powered by a continuous gesture, but it should be possible to stop in the "collapsed but still on-screen" state. So I would like to use an anchoredDraggable with three states and define anchors in Dp. The Dp difference between "collapsed" and "off-screen" would be exactly the width of the collapsed containers in order to have them slide out in sync with the motion of my finger.

I imagine something like this:

enum class ContainerState { Expanded, Collapsed, OffScreen }
val collapsedContainerWidth = 100.dp

@Composable
fun MyScreen() {
    val anchors = DraggableAnchors {
        // MINOR REQUEST: allow anchors in dp or provide Density scope for converting to Px
        Expanded at 0.dp
        Collapsed at -50.dp // collapse over the swipe of length 50dp
        OffScreen at -50.dp - collapsedContainerWidth // slide out in sync with finger
    }
    val draggableState = remember { AnchoredDraggableState(anchors = anchors) }
    // REQUEST: provide way to derive transition from draggable state
    // (adopting the anchor type as target type - in this case ContainerState)
    val transition = remember { Transition.fromAnchoredDraggable(draggableState) }

}

@Composable
fun Container(transition: Transition<ContainerState>) {
    transition.AnimatedContent(
        modifier = Modifier.offset {
           // REQUEST: add API to query animation progress towards a given state
           transition.progressTowards(ContainerState.OffScreen) * (-collapsedContainerWidth)
        }
    ) { containerState ->
        when (containerState) {
            ContainerState.Expanded -> // composable for expanded container
            else -> // composable for collapsed container
        }
    }
}