Allow smooth curvy animations between keyframes [292114811]

Fixed

Feature Request

Status Update

No update yet.

Description

ar...@gmail.com

created issue #1

Jul 21, 2023 02:49PM

Jetpack Compose version: 1.4.3

Jetpack Compose component used: animateOffsetAsState, KeyframesSpec

Android Studio Build: #IU-231.8109.175

Kotlin version: 1.8.20

This is a feature request. As described in the docs, we can specify AnimationSpec using keyframes, which returns KeyframesSpec.

For example:

val value by animateOffsetAsState(
    targetValue = Offset(x = 0F, y = 1000F),
    animationSpec = keyframes {
        durationMillis = 1000
        Offset(x = 0F, y = 0F) at 0 // ms
        Offset(x = 1000F, y = 500F) at 500 // ms
        Offset(x = 0F, y = 1000F) at 1000 // ms
    },
)

This example animates between the specified coordinates in straight lines. It would be good to be able to enable some kind of interpolation. So that the path is smooth and curvy, instead of sharply changing the direction.

The API could look like this:

val value by animateOffsetAsState(
    targetValue = Offset(x = 0F, y = 1000F),
    animationSpec = keyframes {
        smooth = true // Option #1 (simplest)
        interpolator = cubic(), // Option #2 (more advanced)

        durationMillis = 1000
        Offset(x = 0F, y = 0F) at 0 // ms
        Offset(x = 1000F, y = 500F) at 500 // ms
        Offset(x = 0F, y = 1000F) at 1000 // ms
    },
)

Comments

os...@google.com <os...@google.com> Jul 25, 2023 06:59PM

Reassigned to os...@google.com.

ap...@google.com <ap...@google.com> #2Oct 12, 2023 08:58PM

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

commit 700259f0afe267dfe78b93db932a3cfd827a119d
Author: Sherry Hu <shuanghu@google.com>
Date: Mon May 10 14:23:09 2021

Add transition motion between fold and unfold.

Bug: 186211031
Test: manual
Change-Id: Id60f07311eca2d94ef91dc28ae45823a475160b4

M slidingpanelayout/slidingpanelayout/build.gradle
M slidingpanelayout/slidingpanelayout/src/androidTest/java/androidx/slidingpanelayout/widget/FoldTest.kt
M slidingpanelayout/slidingpanelayout/src/main/java/androidx/slidingpanelayout/widget/SlidingPaneLayout.java

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

ap...@google.com <ap...@google.com> #3Nov 17, 2023 05:00PM

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

commit e6268721f6a22f5e84d2d244f1d9cad5affa6f1c
Author: Oscar Adame Vázquez <oscarad@google.com>
Date: Wed Oct 18 13:58:55 2023

Implement Easing support for KeyframesWithSplineSpec

To be consistent with the default KeyframesSpec implementation.

Relnote: "Added binary search method to primitive list collections."

Bug: 292114811
Test: KeyframeSplineAnimationTest#testMultipleEasing
Change-Id: Iea5d4d0766f0b75cadca190b78b042d3f7ee1c28

M collection/collection/template/generateCollections.sh
A compose/animation/animation-core/src/androidUnitTest/kotlin/androidx/compose/animation/core/IntListExtensionTest.kt
M compose/animation/animation-core/src/androidUnitTest/kotlin/androidx/compose/animation/core/KeyframeSplineAnimationTest.kt
M compose/animation/animation-core/src/androidUnitTest/kotlin/androidx/compose/animation/core/MonoSplineTest.kt
M compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/AnimationSpec.kt
A compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/IntListExtension.kt
M compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/MonoSpline.kt
M compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/VectorizedMonoSplineKeyframesSpec.kt

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

os...@google.com <os...@google.com> #4Nov 17, 2023 05:45PM

Marked as fixed.

At this point, implementation for keyframes with splines is "complete" for the next compose animation alpha release.

There'll be a few other related things coming on follow-up releases, so keep an eye out on

https://developer.android.com/jetpack/androidx/releases/compose-animation

ar...@gmail.com <ar...@gmail.com> #5Nov 17, 2023 05:47PM

Thank you!

pr...@google.com <pr...@google.com> #6Nov 29, 2023 09:39PM

The following release(s) address this bug.It is possible this bug has only been partially addressed:

androidx.collection:collection:1.4.0-beta02
androidx.collection:collection-iosarm64:1.4.0-beta02
androidx.collection:collection-iossimulatorarm64:1.4.0-beta02
androidx.collection:collection-iosx64:1.4.0-beta02
androidx.collection:collection-jvm:1.4.0-beta02
androidx.collection:collection-linuxx64:1.4.0-beta02
androidx.collection:collection-macosarm64:1.4.0-beta02
androidx.collection:collection-macosx64:1.4.0-beta02

ap...@google.com <ap...@google.com> #7Mar 29, 2024 09:46PM

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

commit 03606e5a01dbde0c22387831a63d586e683822cb
Author: Oscar Adame Vázquez <oscarad@google.com>
Date: Mon Aug 21 10:59:06 2023

Support periodic monotonic splines

Added the possibility to make a spline based keyframe periodic. A
periodic spline makes the starting and ending velocity equal.

Defined as a 'periodicBias' property. Float.NaN by default for the
regular monotic spline behavior. Otherwise, 'periodicBias' may be a
value between 0 and 1. It indicates which end of the velocity curve is
modified the most to achieve periodicity.

So, when periodicBias is 0, only the starting velocity is changed to
match the ending velocity. Likewise when periodicBias is 1, only the
ending velocity is changed to match the starting velocity. Hence, at
0.5f, the starting and ending velocity will be the exact average between
the two.

Relnote: "You may now pass a periodicBias value (Float) to `keyframesWithSpline`, this will make it so that the initial and final velocity of the spline are equal. Useful for repeatable animations using splines. The bias indicates how much each velocity (initial and final) gets modified to achieve periodicity."

Bug: 292114811
Test: KeyframeSplineAnimationTest#interpolatedValues_periodic
Change-Id: Ic1e6c4996f8c25055955331384639b57e9ad86db

M compose/animation/animation-core/api/current.txt
M compose/animation/animation-core/api/restricted_current.txt
M compose/animation/animation-core/samples/src/main/java/androidx/compose/animation/core/samples/KeyframesWithSplineBuilderSample.kt
M compose/animation/animation-core/src/androidUnitTest/kotlin/androidx/compose/animation/core/KeyframeSplineAnimationTest.kt
M compose/animation/animation-core/src/androidUnitTest/kotlin/androidx/compose/animation/core/MonoSplineTest.kt
M compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/AnimationSpec.kt
M compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/MonoSpline.kt
M compose/animation/animation-core/src/commonMain/kotlin/androidx/compose/animation/core/VectorizedMonoSplineKeyframesSpec.kt
M compose/animation/animation/integration-tests/animation-demos/src/main/java/androidx/compose/animation/demos/AnimationDemos.kt
M compose/animation/animation/integration-tests/animation-demos/src/main/java/androidx/compose/animation/demos/suspendfun/OffsetKeyframeSplinePlaygroundDemo.kt
A compose/animation/animation/integration-tests/animation-demos/src/main/java/androidx/compose/animation/demos/suspendfun/PeriodicMonoSplineDemo.kt

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

na...@google.com <na...@google.com> #8Apr 17, 2024 05:17PM