[Animated] Remove rebound dependency
Summary: We already reimplement the spring computation, we were only using rebound for the tension/friction conversion. Turns out that it is quite small so we can just embed it. I'm doing this as I'm preparing for doing a web version of the feature and I'm trying to minimize the number of dependencies. https://github.com/facebook/rebound-js/blob/master/rebound.js#L932
This commit is contained in:
parent
6a4b83c16f
commit
afdeefc864
|
@ -17,12 +17,12 @@ var InteractionManager = require('InteractionManager');
|
||||||
var Interpolation = require('Interpolation');
|
var Interpolation = require('Interpolation');
|
||||||
var React = require('React');
|
var React = require('React');
|
||||||
var Set = require('Set');
|
var Set = require('Set');
|
||||||
|
var SpringConfig = require('SpringConfig');
|
||||||
var Text = require('Text');
|
var Text = require('Text');
|
||||||
var View = require('View');
|
var View = require('View');
|
||||||
var invariant = require('invariant');
|
var invariant = require('invariant');
|
||||||
|
|
||||||
var flattenStyle = require('flattenStyle');
|
var flattenStyle = require('flattenStyle');
|
||||||
var rebound = require('rebound');
|
|
||||||
var requestAnimationFrame = require('requestAnimationFrame');
|
var requestAnimationFrame = require('requestAnimationFrame');
|
||||||
|
|
||||||
import type InterpolationConfigType from 'Interpolation';
|
import type InterpolationConfigType from 'Interpolation';
|
||||||
|
@ -351,12 +351,12 @@ class SpringAnimation extends Animation {
|
||||||
config.tension === undefined && config.friction === undefined,
|
config.tension === undefined && config.friction === undefined,
|
||||||
'You can only define bounciness/speed or tension/friction but not both',
|
'You can only define bounciness/speed or tension/friction but not both',
|
||||||
);
|
);
|
||||||
springConfig = rebound.SpringConfig.fromBouncinessAndSpeed(
|
springConfig = SpringConfig.fromBouncinessAndSpeed(
|
||||||
withDefault(config.bounciness, 8),
|
withDefault(config.bounciness, 8),
|
||||||
withDefault(config.speed, 12),
|
withDefault(config.speed, 12),
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
springConfig = rebound.SpringConfig.fromOrigamiTensionAndFriction(
|
springConfig = SpringConfig.fromOrigamiTensionAndFriction(
|
||||||
withDefault(config.tension, 40),
|
withDefault(config.tension, 40),
|
||||||
withDefault(config.friction, 7),
|
withDefault(config.friction, 7),
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,102 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) 2015-present, Facebook, Inc.
|
||||||
|
* All rights reserved.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the BSD-style license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree. An additional grant
|
||||||
|
* of patent rights can be found in the PATENTS file in the same directory.
|
||||||
|
*
|
||||||
|
* @providesModule SpringConfig
|
||||||
|
* @flow
|
||||||
|
*/
|
||||||
|
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
type SpringConfigType = {
|
||||||
|
tension: number,
|
||||||
|
friction: number,
|
||||||
|
};
|
||||||
|
|
||||||
|
function tensionFromOrigamiValue(oValue) {
|
||||||
|
return (oValue - 30) * 3.62 + 194;
|
||||||
|
}
|
||||||
|
|
||||||
|
function frictionFromOrigamiValue(oValue) {
|
||||||
|
return (oValue - 8) * 3 + 25;
|
||||||
|
}
|
||||||
|
|
||||||
|
function fromOrigamiTensionAndFriction(
|
||||||
|
tension: number,
|
||||||
|
friction: number,
|
||||||
|
): SpringConfigType {
|
||||||
|
return {
|
||||||
|
tension: tensionFromOrigamiValue(tension),
|
||||||
|
friction: frictionFromOrigamiValue(friction)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function fromBouncinessAndSpeed(
|
||||||
|
bounciness: number,
|
||||||
|
speed: number,
|
||||||
|
): SpringConfigType {
|
||||||
|
function normalize(value, startValue, endValue) {
|
||||||
|
return (value - startValue) / (endValue - startValue);
|
||||||
|
}
|
||||||
|
|
||||||
|
function projectNormal(n, start, end) {
|
||||||
|
return start + (n * (end - start));
|
||||||
|
}
|
||||||
|
|
||||||
|
function linearInterpolation(t, start, end) {
|
||||||
|
return t * end + (1 - t) * start;
|
||||||
|
}
|
||||||
|
|
||||||
|
function quadraticOutInterpolation(t, start, end) {
|
||||||
|
return linearInterpolation(2 * t - t * t, start, end);
|
||||||
|
}
|
||||||
|
|
||||||
|
function b3Friction1(x) {
|
||||||
|
return (0.0007 * Math.pow(x, 3)) -
|
||||||
|
(0.031 * Math.pow(x, 2)) + 0.64 * x + 1.28;
|
||||||
|
}
|
||||||
|
|
||||||
|
function b3Friction2(x) {
|
||||||
|
return (0.000044 * Math.pow(x, 3)) -
|
||||||
|
(0.006 * Math.pow(x, 2)) + 0.36 * x + 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
function b3Friction3(x) {
|
||||||
|
return (0.00000045 * Math.pow(x, 3)) -
|
||||||
|
(0.000332 * Math.pow(x, 2)) + 0.1078 * x + 5.84;
|
||||||
|
}
|
||||||
|
|
||||||
|
function b3Nobounce(tension) {
|
||||||
|
if (tension <= 18) {
|
||||||
|
return b3Friction1(tension);
|
||||||
|
} else if (tension > 18 && tension <= 44) {
|
||||||
|
return b3Friction2(tension);
|
||||||
|
} else {
|
||||||
|
return b3Friction3(tension);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var b = normalize(bounciness / 1.7, 0, 20);
|
||||||
|
b = projectNormal(b, 0, 0.8);
|
||||||
|
var s = normalize(speed / 1.7, 0, 20);
|
||||||
|
var bouncyTension = projectNormal(s, 0.5, 200);
|
||||||
|
var bouncyFriction = quadraticOutInterpolation(
|
||||||
|
b,
|
||||||
|
b3Nobounce(bouncyTension),
|
||||||
|
0.01
|
||||||
|
);
|
||||||
|
|
||||||
|
return {
|
||||||
|
tension: tensionFromOrigamiValue(bouncyTension),
|
||||||
|
friction: frictionFromOrigamiValue(bouncyFriction)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
fromOrigamiTensionAndFriction,
|
||||||
|
fromBouncinessAndSpeed,
|
||||||
|
};
|
Loading…
Reference in New Issue