Better support for gesture-controlled animations [298271489]

Fixed

Feature Request

compose-roadmap-proposal

Status Update

No update yet.

Description

ro...@t-online.de

created issue #1

Aug 31, 2023 03:10PM

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
        }
    }
}

Comments

ro...@t-online.de <ro...@t-online.de> #2Aug 31, 2023 03:18PM

Project: platform/frameworks/support
Branch: androidx-master-dev

commit c60f33e229e31ab328ef6b59dab63b264954831c
Author: Alexandre Elias <aelias@google.com>
Date: Fri Jul 10 16:23:09 2020

Semantics no-op cleanups

Partly in response to lmr's broad code review, I did a pass of
superficial API/implementation cleanup. The main changes are:

- I changed each Boolean SemanticsProperty where false is equivalent to
not being present to take "Unit" instead. This is conceptually
clearer: it avoids questions like "can I cancel out a semantics from a
merged child by setting it to false?" Because "property = Unit" looks
weird, I also changed the style of these to "property()".

- I moved the Semantics id generator closer to where it's used, in
SemanticsModifierCore. I made it internal and an AtomicInt.
(Note that integer ids are heavily used in the Android
AccessibilityNodeInfo APIs so I can't simply remove them entirely.)

- I deleted dead code. Some examples include SemanticsHintOverrides,
a public API not connected to anything, and SemanticsPropertyKey
merge() open method which is never called. (In both cases I have
a different plan in mind for accessibility.)

Fixes: 145951226
Fixes: 145955412
Test: existing tests
Relnote: "Single-value semantics properties now use a calling style.
For example, 'semantics { hidden = true }' is now written as:
'semantics { hidden() }'."

Change-Id: Ic1afd12ea22c926babc9662f1804d80b33aa0cfc

M ui/integration-tests/benchmark/src/androidTest/java/androidx/ui/benchmark/test/LayoutNodeModifierBenchmark.kt
M ui/ui-core/api/0.1.0-dev15.txt
M ui/ui-core/api/current.txt
M ui/ui-core/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-core/api/public_plus_experimental_current.txt
M ui/ui-core/api/restricted_0.1.0-dev15.txt
M ui/ui-core/api/restricted_current.txt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/graphics/vector/VectorTest.kt
M ui/ui-core/src/androidAndroidTest/kotlin/androidx/ui/semantics/SemanticsTests.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidActuals.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeView.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidComposeViewAccessibilityDelegateCompat.kt
M ui/ui-core/src/androidMain/kotlin/androidx/ui/core/AndroidPopup.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/Expect.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsConfiguration.kt
D ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsHintOverrides.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsModifier.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsNode.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsOwner.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/core/semantics/SemanticsWrapper.kt
M ui/ui-core/src/commonMain/kotlin/androidx/ui/semantics/SemanticsProperties.kt
M ui/ui-foundation/api/0.1.0-dev15.txt
M ui/ui-foundation/api/current.txt
M ui/ui-foundation/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-foundation/api/public_plus_experimental_current.txt
M ui/ui-foundation/api/restricted_0.1.0-dev15.txt
M ui/ui-foundation/api/restricted_current.txt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Clickable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Dialog.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/Scroller.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Selectable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/selection/Toggleable.kt
M ui/ui-foundation/src/main/java/androidx/ui/foundation/semantics/FoundationSemanticsProperties.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ButtonTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CardTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/CheckboxScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/RadioButtonScreenshotTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ScaffoldTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SnackbarTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/SurfaceTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/ripple/RippleIndicationTest.kt
M ui/ui-material/src/androidTest/java/androidx/ui/material/textfield/TextFieldScreenshotTest.kt
M ui/ui-material/src/main/java/androidx/ui/material/AppBar.kt
M ui/ui-material/src/main/java/androidx/ui/material/TextFieldImpl.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/AssertsTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/CallSemanticsActionTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ErrorMessagesTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/FindersTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/PrintToStringTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/ScrollToTest.kt
M ui/ui-test/src/androidTest/java/androidx/ui/test/TextActionsTest.kt
M ui/ui-test/src/main/java/androidx/ui/test/Actions.kt
M ui/ui-test/src/main/java/androidx/ui/test/Filters.kt
M ui/ui-text/api/0.1.0-dev15.txt
M ui/ui-text/api/current.txt
M ui/ui-text/api/public_plus_experimental_0.1.0-dev15.txt
M ui/ui-text/api/public_plus_experimental_current.txt
M ui/ui-text/api/restricted_0.1.0-dev15.txt
M ui/ui-text/api/restricted_current.txt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/CoreTextField.kt
M ui/ui-text/src/commonMain/kotlin/androidx/ui/text/TextSemanticsProperties.kt

https://android-review.googlesource.com/1360099

ha...@google.com <ha...@google.com> Sep 1, 2023 01:57PM

Assigned to jo...@google.com.

ap...@google.com <ap...@google.com> #3Mar 5, 2024 12:30PM

Project: platform/frameworks/support
Branch: androidx-main

commit ea1c7b82abfbd75b1396b1113852253e7b7dc444
Author: Jossi Wolf <jossiwolf@google.com>
Date: Sun Jan 28 12:29:03 2024

Changes AnchoredDraggable to operate based on small sliding window

Previously, AnchoredDraggable would operate based on `currentValue`, which could be several anchor points away from the current position of the offset. This made exposing APIs reflecting offset fractions tricky. The new behavior is aligned with Pager and subsequently allows us to expose a `currentValueOffsetFraction`.

Relnote: AnchoredDraggable's currentValue will now update when passing through an anchor point. Use settledValue to receive the previous currentValue semantics, only updating when settling at an anchor. The progress is now exposed as a function (requiring a starting and end point) instead of a property.
Test: Existing & refactored tests
Bug: 318707189, 298271489, 294991954
Change-Id: Ibe6e88f172b099e8f1f841722946471e4641f999

M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/AnchoredDraggableDemo.kt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/AnchoredDraggableSample.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/anchoredDraggable/AnchoredDraggableGestureTest.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/anchoredDraggable/AnchoredDraggableStateTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/AnchoredDraggable.kt

https://android-review.googlesource.com/2930845

ap...@google.com <ap...@google.com> #4Mar 8, 2024 01:20PM

Project: platform/frameworks/support
Branch: androidx-main

commit 5c108158e6cf2e03dcd4523e9fcf4230514e8a58
Author: Jossi Wolf <jossiwolf@google.com>
Date: Tue Mar 05 17:34:38 2024

Revert "Revert "Changes AnchoredDraggable to operate based on sm..."

Revert submission 2988649-revert-2930845-DMIZVAQUBO

Reason for revert: Re-landing since this doesn't include the API changes

Reverted changes: /q/submissionid:2988649-revert-2930845-DMIZVAQUBO

Relnote: AnchoredDraggable's currentValue will now update when passing through an anchor point. Use settledValue to receive the previous currentValue semantics, only updating when settling at an anchor. The progress is now exposed as a function (requiring a starting and end point) instead of a property.
Test: Existing & refactored tests
Bug: 318707189, 298271489, 294991954

Change-Id: I2ebd3677fd98f0d14f5d365a901cd1b36b0ce9e2

M compose/foundation/foundation/api/current.txt
M compose/foundation/foundation/api/restricted_current.txt
M compose/foundation/foundation/integration-tests/foundation-demos/src/main/java/androidx/compose/foundation/demos/AnchoredDraggableDemo.kt
M compose/foundation/foundation/samples/src/main/java/androidx/compose/foundation/samples/AnchoredDraggableSample.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/anchoredDraggable/AnchoredDraggableGestureTest.kt
M compose/foundation/foundation/src/androidInstrumentedTest/kotlin/androidx/compose/foundation/anchoredDraggable/AnchoredDraggableStateTest.kt
M compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/gestures/AnchoredDraggable.kt

https://android-review.googlesource.com/2989470

jo...@google.com <jo...@google.com> Mar 21, 2024 04:06PM

Marked as fixed.