fix: add memoization of spring nodes

This commit is contained in:
Michal Osadnik
2019-08-16 15:44:41 +01:00
parent 5dc8a289ef
commit c1798a233a
3 changed files with 80 additions and 3 deletions

View File

@@ -97,6 +97,8 @@ jest.mock('react-native-reanimated', () => {
timing: NOOP,
spring: NOOP,
proc: a => a,
useCode: NOOP,
},

View File

@@ -81,7 +81,7 @@
"react": "*",
"react-native": "*",
"react-native-gesture-handler": "^1.0.0",
"react-native-reanimated": "^1.0.0",
"react-native-reanimated": "^1.3.0-alpha",
"react-native-screens": "^1.0.0 || ^1.0.0-alpha"
},
"jest": {

View File

@@ -87,6 +87,8 @@ const {
onChange,
set,
spring,
// @ts-ignore
proc,
sub,
timing,
startClock,
@@ -96,6 +98,79 @@ const {
Value,
} = Animated;
const springHelper = proc(
(
finished: Animated.Value<number>,
velocity: Animated.Value<number>,
position: Animated.Value<number>,
time: Animated.Value<number>,
prevPosition: Animated.Value<number>,
toValue: Animated.Adaptable<number>,
damping: Animated.Adaptable<number>,
mass: Animated.Adaptable<number>,
stiffness: Animated.Adaptable<number>,
overshootClamping: Animated.Adaptable<number>,
restSpeedThreshold: Animated.Adaptable<number>,
restDisplacementThreshold: Animated.Adaptable<number>,
clock: Animated.Clock
) =>
spring(
clock,
{
finished,
velocity,
position,
time,
// @ts-ignore
prevPosition,
},
{
toValue,
damping,
mass,
stiffness,
overshootClamping,
restDisplacementThreshold,
restSpeedThreshold,
}
)
);
function memoizedSpring(
clock: Animated.Clock,
state: {
finished: Animated.Value<number>;
velocity: Animated.Value<number>;
position: Animated.Value<number>;
time: Animated.Value<number>;
},
config: {
toValue: Animated.Adaptable<number>;
damping: Animated.Adaptable<number>;
mass: Animated.Adaptable<number>;
stiffness: Animated.Adaptable<number>;
overshootClamping: Animated.Adaptable<boolean>;
restSpeedThreshold: Animated.Adaptable<number>;
restDisplacementThreshold: Animated.Adaptable<number>;
}
) {
return springHelper(
state.finished,
state.velocity,
state.position,
state.time,
new Value(0),
config.toValue,
config.damping,
config.mass,
config.stiffness,
config.overshootClamping,
config.restSpeedThreshold,
config.restDisplacementThreshold,
clock
);
}
export default class Card extends React.Component<Props> {
static defaultProps = {
overlayEnabled: Platform.OS !== 'ios',
@@ -216,7 +291,7 @@ export default class Card extends React.Component<Props> {
cond(
eq(isVisible, 1),
openingSpec.timing === 'spring'
? spring(
? memoizedSpring(
this.clock,
{ ...this.transitionState, velocity: this.transitionVelocity },
{ ...openingSpec.config, toValue: this.toValue }
@@ -227,7 +302,7 @@ export default class Card extends React.Component<Props> {
{ ...openingSpec.config, toValue: this.toValue }
),
closingSpec.timing === 'spring'
? spring(
? memoizedSpring(
this.clock,
{ ...this.transitionState, velocity: this.transitionVelocity },
{ ...closingSpec.config, toValue: this.toValue }