Skip to content

Commit

Permalink
Replace inner timing function (#2149)
Browse files Browse the repository at this point in the history
## Description

In timing animation, we use the following function to compute the value for the current frame of animation:
```js
animation.current += ((toValue - current) * (newProgress - progress)) / (1 - progress);
```
But these function has asymptote in `progress = 1` and value 1 is inside function's domain. In summary, if progress was equal to 1 we had division by 0 in consequence `animation.current` was `NaN`. Android can't handle style with `NaN` value and this was a cause of blinking.

I decided to change this function to a complementary form without asymptote:
```js
animation.current = startValue + (toValue - startValue) * progress;
```

another possible solution (but imo worst):
```js
const a = ((toValue - current) * (newProgress - progress)) / (1 - (progress == 1 ? 1 + Number.EPSILON : progress))
```

Fixes #2079
  • Loading branch information
piaskowyk committed Jun 24, 2021
1 parent 2ee1429 commit 57e8969
Showing 1 changed file with 5 additions and 8 deletions.
13 changes: 5 additions & 8 deletions src/reanimated2/animations.ts
Original file line number Diff line number Diff line change
Expand Up @@ -193,7 +193,7 @@ export function withTiming(toValue, userConfig, callback) {
}

function timing(animation, now) {
const { toValue, progress, startTime, current } = animation;
const { toValue, startTime, startValue } = animation;
const runtime = now - startTime;

if (runtime >= config.duration) {
Expand All @@ -202,11 +202,8 @@ export function withTiming(toValue, userConfig, callback) {
animation.current = toValue;
return true;
}

const newProgress = animation.easing(runtime / config.duration);
animation.current +=
((toValue - current) * (newProgress - progress)) / (1 - progress);
animation.progress = newProgress;
const progress = animation.easing(runtime / config.duration);
animation.current = startValue + (toValue - startValue) * progress;
return false;
}

Expand All @@ -221,10 +218,10 @@ export function withTiming(toValue, userConfig, callback) {
// new timing over the old one with the same parameters. If so, we want
// to copy animation timeline properties
animation.startTime = previousAnimation.startTime;
animation.progress = previousAnimation.progress;
animation.startValue = previousAnimation.startValue;
} else {
animation.startTime = now;
animation.progress = 0;
animation.startValue = value;
}
animation.current = value;
if (typeof config.easing === 'object') {
Expand Down

0 comments on commit 57e8969

Please sign in to comment.