Shared element transition using spring interpolation is jumpy at the end (only Android)

[nelsonprsousa]

🐛 Bug Report

The spring interpolation is a bit jumpy at the end of the animation. Only on Android (looks okay on iOS).

Have you read the Contributing Guidelines on issues?

Yes.

To Reproduce

1. Clone this repo
2. Go to set-spring-bug branch
3. yarn
4. yarn android

Expected behavior

The animation should happens like in iOS (it is a little bit jumpy in Android).

Actual Behavior

Looks like there are a pixel left to animate
Here's the iOS and Android animation:

Screen.Recording.2021-03-20.at.23.29.06.mov

Your Environment

• React Native Navigation version: 7.8.4
• React Native version: 0.63.4
• Platform(s) (iOS, Android, or both?): Android

Reproducible Demo

1. Clone this repo
2. Go to set-spring-bug branch

[nelsonprsousa]

I also noticed that if we use mass: 1 the bug is no longer reproducible. Looks like this value is being used to do something like padding.

Here's a mass: 50 example:

[guyca]

@swabbass this is probably related to WOARNN-386

[swabbass]

WOARNN-386

I need to try that and see, think it could be

[swabbass]

@nelsonprsousa I tried to run your demo, and it just crashes right away when I click on the card, that was on 7.8.4 and on the latest version (7.11.3) it crashes on parsing options, which was fixed here #7046.

so now using master fix.

it seems that the SpringInterpolator is mostly inspired by this, when i modified the animation to match what is in the file the bug does not reproduce, seems mass, damping, stiffness affects the end view size some how, I'm looking into it :]

[nelsonprsousa]

@nelsonprsousa I tried to run your demo, and it just crashes right away when I click on the card, that was on 7.8.4 and on the latest version (7.11.3) it crashes on parsing options, which was fixed here #7046.

so now using master fix.

it seems that the SpringInterpolator is mostly inspired by this, when i modified the animation to match what is in the file the bug does not reproduce, seems mass, damping, stiffness affects the end view size some how, I'm looking into it :]

Hey @swabbass, thanks for your feedback.

I was using v7.8.4 because the last one had that regression problem. However on my side it does not crash the app, just happens what you see on the example video.

Did you use the set-spring-bug branch?

Thank you 🙏

[swabbass]

@nelsonprsousa I tried to run your demo, and it just crashes right away when I click on the card, that was on 7.8.4 and on the latest version (7.11.3) it crashes on parsing options, which was fixed here #7046.
so now using master fix.
it seems that the SpringInterpolator is mostly inspired by this, when i modified the animation to match what is in the file the bug does not reproduce, seems mass, damping, stiffness affects the end view size some how, I'm looking into it :]

Hey @swabbass, thanks for your feedback.

I was using v7.8.4 because the last one had that regression problem. However on my side it does not crash the app, just happens what you see on the example video.

Did you use the set-spring-bug branch?

Thank you 🙏

yes, I'm using that branch, now it's working with master changes.

The main point was that the code is inspired by an ios interpolator function, which should be working fine on ios (the logic seems to be the same as in android, RNN), but in android, I have to do more digging in order to determine if the implementation is not suitable for android animator or the animation got cut somehow.

I see that @mrousavy added this feature lately and maybe he can help us to figure out why the animation seems to be not ending in the right position (end)?, meanwhile I'm checking why this happens on Android.

[mrousavy]

Hey 👋
Just a wild guess, but this might be happening because the spring animation actually never ends, it just goes to like 99.999% completion. With more mass, it's less completion, e.g. with mass: 3 it's 99%. On iOS it just force-sets the value to the final value (100%) after the animation, on android it leaves it as is.

We could reproduce this if you just return 0.5 in the spring interpolator.