Skip to content

Commit

Permalink
Fix "withDecay clamps position to the wrong boundary" (software-mansi…
Browse files Browse the repository at this point in the history
…on#4591)

<!-- Thanks for submitting a pull request! We appreciate you spending
the time to work on these changes. Please follow the template so that
the reviewers can easily understand what the code changes affect. -->

## Summary

<!-- Explain the motivation for this PR. Include "Fixes #<number>" if
applicable. -->

Closes software-mansion#4508 

### Bug description
<table>
<tr><th>BEFORE</th><th>AFTER</th></tr>
<tr><td width="50%">Animation looks good if and only if the animated
square has no positive velocity (velocity towards center of screen). In
other case it moves much too fast and clamp to the opposite position
with no bounces</td><td>If square has some positive velocity it moves
visibly faster. Square always bounces when approaching clamp limit (with
rubber band effect on).</td></tr>
<tr><td>


https://github.com/software-mansion/react-native-reanimated/assets/56199675/3035ad50-b108-49f0-8714-791c4ae706fe

</td><td>



https://github.com/software-mansion/react-native-reanimated/assets/56199675/d6cb43d5-3e9c-4ee5-aee2-a5a2bb4394b3



</td></tr>
</table>

### Description of code change

I've removed a condition updating the derivative only when square is
within predefined boundaries - since we want to keep its springified
movement even if it is overshooting. Especially that we used to end
animation almost immediately after exceeding limits.

Since after this change the `derivative` is always modified we should no
longer compare it to zero, but use some epsilon instead.

## Test plan

I've tested it on this example:
https://github.com/MatiPl01/reanimated-issues, linked in the issue.

<!-- Provide a minimal but complete code snippet that can be used to
test out this change along with instructions how to run it and a
description of the expected behavior. -->

---------

Co-authored-by: Aleksandra Cynk <aleksandracynk@swmansion.com>
  • Loading branch information
Latropos and Aleksandra Cynk authored Jun 27, 2023
1 parent 6d62163 commit bbc755b
Showing 1 changed file with 7 additions and 8 deletions.
15 changes: 7 additions & 8 deletions src/reanimated2/animation/decay.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,16 +68,15 @@ export function withDecay(

if (config.rubberBandEffect) {
decay = (animation: InnerDecayAnimation, now: number): boolean => {
const {
lastTimestamp,
startTimestamp,
current,
initialVelocity,
velocity,
} = animation;
const { lastTimestamp, startTimestamp, current, velocity } = animation;

const deltaTime = Math.min(now - lastTimestamp, 64);
const clampIndex = initialVelocity > 0 ? 1 : 0;
const clampIndex =
Math.abs(current - config.clamp![0]) <
Math.abs(current - config.clamp![1])
? 0
: 1;

let derivative = 0;
if (current < config.clamp![0] || current > config.clamp![1]) {
derivative = current - config.clamp![clampIndex];
Expand Down

0 comments on commit bbc755b

Please sign in to comment.