You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

267 lines
10 KiB

  1. 'use strict';
  2. exports.__esModule = true;
  3. var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
  4. var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
  5. function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  6. function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
  7. function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
  8. var _mapToZero = require('./mapToZero');
  9. var _mapToZero2 = _interopRequireDefault(_mapToZero);
  10. var _stripStyle = require('./stripStyle');
  11. var _stripStyle2 = _interopRequireDefault(_stripStyle);
  12. var _stepper3 = require('./stepper');
  13. var _stepper4 = _interopRequireDefault(_stepper3);
  14. var _performanceNow = require('performance-now');
  15. var _performanceNow2 = _interopRequireDefault(_performanceNow);
  16. var _raf = require('raf');
  17. var _raf2 = _interopRequireDefault(_raf);
  18. var _shouldStopAnimation = require('./shouldStopAnimation');
  19. var _shouldStopAnimation2 = _interopRequireDefault(_shouldStopAnimation);
  20. var _react = require('react');
  21. var _react2 = _interopRequireDefault(_react);
  22. var _propTypes = require('prop-types');
  23. var _propTypes2 = _interopRequireDefault(_propTypes);
  24. var msPerFrame = 1000 / 60;
  25. var Motion = (function (_React$Component) {
  26. _inherits(Motion, _React$Component);
  27. _createClass(Motion, null, [{
  28. key: 'propTypes',
  29. value: {
  30. // TOOD: warn against putting a config in here
  31. defaultStyle: _propTypes2['default'].objectOf(_propTypes2['default'].number),
  32. style: _propTypes2['default'].objectOf(_propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].object])).isRequired,
  33. children: _propTypes2['default'].func.isRequired,
  34. onRest: _propTypes2['default'].func
  35. },
  36. enumerable: true
  37. }]);
  38. function Motion(props) {
  39. var _this = this;
  40. _classCallCheck(this, Motion);
  41. _React$Component.call(this, props);
  42. this.wasAnimating = false;
  43. this.animationID = null;
  44. this.prevTime = 0;
  45. this.accumulatedTime = 0;
  46. this.unreadPropStyle = null;
  47. this.clearUnreadPropStyle = function (destStyle) {
  48. var dirty = false;
  49. var _state = _this.state;
  50. var currentStyle = _state.currentStyle;
  51. var currentVelocity = _state.currentVelocity;
  52. var lastIdealStyle = _state.lastIdealStyle;
  53. var lastIdealVelocity = _state.lastIdealVelocity;
  54. for (var key in destStyle) {
  55. if (!Object.prototype.hasOwnProperty.call(destStyle, key)) {
  56. continue;
  57. }
  58. var styleValue = destStyle[key];
  59. if (typeof styleValue === 'number') {
  60. if (!dirty) {
  61. dirty = true;
  62. currentStyle = _extends({}, currentStyle);
  63. currentVelocity = _extends({}, currentVelocity);
  64. lastIdealStyle = _extends({}, lastIdealStyle);
  65. lastIdealVelocity = _extends({}, lastIdealVelocity);
  66. }
  67. currentStyle[key] = styleValue;
  68. currentVelocity[key] = 0;
  69. lastIdealStyle[key] = styleValue;
  70. lastIdealVelocity[key] = 0;
  71. }
  72. }
  73. if (dirty) {
  74. _this.setState({ currentStyle: currentStyle, currentVelocity: currentVelocity, lastIdealStyle: lastIdealStyle, lastIdealVelocity: lastIdealVelocity });
  75. }
  76. };
  77. this.startAnimationIfNecessary = function () {
  78. // TODO: when config is {a: 10} and dest is {a: 10} do we raf once and
  79. // call cb? No, otherwise accidental parent rerender causes cb trigger
  80. _this.animationID = _raf2['default'](function (timestamp) {
  81. // check if we need to animate in the first place
  82. var propsStyle = _this.props.style;
  83. if (_shouldStopAnimation2['default'](_this.state.currentStyle, propsStyle, _this.state.currentVelocity)) {
  84. if (_this.wasAnimating && _this.props.onRest) {
  85. _this.props.onRest();
  86. }
  87. // no need to cancel animationID here; shouldn't have any in flight
  88. _this.animationID = null;
  89. _this.wasAnimating = false;
  90. _this.accumulatedTime = 0;
  91. return;
  92. }
  93. _this.wasAnimating = true;
  94. var currentTime = timestamp || _performanceNow2['default']();
  95. var timeDelta = currentTime - _this.prevTime;
  96. _this.prevTime = currentTime;
  97. _this.accumulatedTime = _this.accumulatedTime + timeDelta;
  98. // more than 10 frames? prolly switched browser tab. Restart
  99. if (_this.accumulatedTime > msPerFrame * 10) {
  100. _this.accumulatedTime = 0;
  101. }
  102. if (_this.accumulatedTime === 0) {
  103. // no need to cancel animationID here; shouldn't have any in flight
  104. _this.animationID = null;
  105. _this.startAnimationIfNecessary();
  106. return;
  107. }
  108. var currentFrameCompletion = (_this.accumulatedTime - Math.floor(_this.accumulatedTime / msPerFrame) * msPerFrame) / msPerFrame;
  109. var framesToCatchUp = Math.floor(_this.accumulatedTime / msPerFrame);
  110. var newLastIdealStyle = {};
  111. var newLastIdealVelocity = {};
  112. var newCurrentStyle = {};
  113. var newCurrentVelocity = {};
  114. for (var key in propsStyle) {
  115. if (!Object.prototype.hasOwnProperty.call(propsStyle, key)) {
  116. continue;
  117. }
  118. var styleValue = propsStyle[key];
  119. if (typeof styleValue === 'number') {
  120. newCurrentStyle[key] = styleValue;
  121. newCurrentVelocity[key] = 0;
  122. newLastIdealStyle[key] = styleValue;
  123. newLastIdealVelocity[key] = 0;
  124. } else {
  125. var newLastIdealStyleValue = _this.state.lastIdealStyle[key];
  126. var newLastIdealVelocityValue = _this.state.lastIdealVelocity[key];
  127. for (var i = 0; i < framesToCatchUp; i++) {
  128. var _stepper = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
  129. newLastIdealStyleValue = _stepper[0];
  130. newLastIdealVelocityValue = _stepper[1];
  131. }
  132. var _stepper2 = _stepper4['default'](msPerFrame / 1000, newLastIdealStyleValue, newLastIdealVelocityValue, styleValue.val, styleValue.stiffness, styleValue.damping, styleValue.precision);
  133. var nextIdealX = _stepper2[0];
  134. var nextIdealV = _stepper2[1];
  135. newCurrentStyle[key] = newLastIdealStyleValue + (nextIdealX - newLastIdealStyleValue) * currentFrameCompletion;
  136. newCurrentVelocity[key] = newLastIdealVelocityValue + (nextIdealV - newLastIdealVelocityValue) * currentFrameCompletion;
  137. newLastIdealStyle[key] = newLastIdealStyleValue;
  138. newLastIdealVelocity[key] = newLastIdealVelocityValue;
  139. }
  140. }
  141. _this.animationID = null;
  142. // the amount we're looped over above
  143. _this.accumulatedTime -= framesToCatchUp * msPerFrame;
  144. _this.setState({
  145. currentStyle: newCurrentStyle,
  146. currentVelocity: newCurrentVelocity,
  147. lastIdealStyle: newLastIdealStyle,
  148. lastIdealVelocity: newLastIdealVelocity
  149. });
  150. _this.unreadPropStyle = null;
  151. _this.startAnimationIfNecessary();
  152. });
  153. };
  154. this.state = this.defaultState();
  155. }
  156. Motion.prototype.defaultState = function defaultState() {
  157. var _props = this.props;
  158. var defaultStyle = _props.defaultStyle;
  159. var style = _props.style;
  160. var currentStyle = defaultStyle || _stripStyle2['default'](style);
  161. var currentVelocity = _mapToZero2['default'](currentStyle);
  162. return {
  163. currentStyle: currentStyle,
  164. currentVelocity: currentVelocity,
  165. lastIdealStyle: currentStyle,
  166. lastIdealVelocity: currentVelocity
  167. };
  168. };
  169. // it's possible that currentStyle's value is stale: if props is immediately
  170. // changed from 0 to 400 to spring(0) again, the async currentStyle is still
  171. // at 0 (didn't have time to tick and interpolate even once). If we naively
  172. // compare currentStyle with destVal it'll be 0 === 0 (no animation, stop).
  173. // In reality currentStyle should be 400
  174. Motion.prototype.componentDidMount = function componentDidMount() {
  175. this.prevTime = _performanceNow2['default']();
  176. this.startAnimationIfNecessary();
  177. };
  178. Motion.prototype.componentWillReceiveProps = function componentWillReceiveProps(props) {
  179. if (this.unreadPropStyle != null) {
  180. // previous props haven't had the chance to be set yet; set them here
  181. this.clearUnreadPropStyle(this.unreadPropStyle);
  182. }
  183. this.unreadPropStyle = props.style;
  184. if (this.animationID == null) {
  185. this.prevTime = _performanceNow2['default']();
  186. this.startAnimationIfNecessary();
  187. }
  188. };
  189. Motion.prototype.componentWillUnmount = function componentWillUnmount() {
  190. if (this.animationID != null) {
  191. _raf2['default'].cancel(this.animationID);
  192. this.animationID = null;
  193. }
  194. };
  195. Motion.prototype.render = function render() {
  196. var renderedChildren = this.props.children(this.state.currentStyle);
  197. return renderedChildren && _react2['default'].Children.only(renderedChildren);
  198. };
  199. return Motion;
  200. })(_react2['default'].Component);
  201. exports['default'] = Motion;
  202. module.exports = exports['default'];
  203. // after checking for unreadPropStyle != null, we manually go set the
  204. // non-interpolating values (those that are a number, without a spring
  205. // config)