You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
516 lines
50 KiB
JavaScript
516 lines
50 KiB
JavaScript
4 months ago
|
(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
|
||
|
|
var transition = require('../lib/index')
|
||
|
|
|
||
|
|
window.transition = transition
|
||
|
|
},{"../lib/index":3}],2:[function(require,module,exports){
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports["default"] = exports.easeInOutBounce = exports.easeOutBounce = exports.easeInBounce = exports.easeInOutElastic = exports.easeOutElastic = exports.easeInElastic = exports.easeInOutBack = exports.easeOutBack = exports.easeInBack = exports.easeInOutQuint = exports.easeOutQuint = exports.easeInQuint = exports.easeInOutQuart = exports.easeOutQuart = exports.easeInQuart = exports.easeInOutCubic = exports.easeOutCubic = exports.easeInCubic = exports.easeInOutQuad = exports.easeOutQuad = exports.easeInQuad = exports.easeInOutSine = exports.easeOutSine = exports.easeInSine = exports.linear = void 0;
|
||
|
|
var linear = [[[0, 1], '', [0.33, 0.67]], [[1, 0], [0.67, 0.33]]];
|
||
|
|
/**
|
||
|
|
* @description Sine
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.linear = linear;
|
||
|
|
var easeInSine = [[[0, 1]], [[0.538, 0.564], [0.169, 0.912], [0.880, 0.196]], [[1, 0]]];
|
||
|
|
exports.easeInSine = easeInSine;
|
||
|
|
var easeOutSine = [[[0, 1]], [[0.444, 0.448], [0.169, 0.736], [0.718, 0.16]], [[1, 0]]];
|
||
|
|
exports.easeOutSine = easeOutSine;
|
||
|
|
var easeInOutSine = [[[0, 1]], [[0.5, 0.5], [0.2, 1], [0.8, 0]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Quad
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutSine = easeInOutSine;
|
||
|
|
var easeInQuad = [[[0, 1]], [[0.550, 0.584], [0.231, 0.904], [0.868, 0.264]], [[1, 0]]];
|
||
|
|
exports.easeInQuad = easeInQuad;
|
||
|
|
var easeOutQuad = [[[0, 1]], [[0.413, 0.428], [0.065, 0.816], [0.760, 0.04]], [[1, 0]]];
|
||
|
|
exports.easeOutQuad = easeOutQuad;
|
||
|
|
var easeInOutQuad = [[[0, 1]], [[0.5, 0.5], [0.3, 0.9], [0.7, 0.1]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Cubic
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutQuad = easeInOutQuad;
|
||
|
|
var easeInCubic = [[[0, 1]], [[0.679, 0.688], [0.366, 0.992], [0.992, 0.384]], [[1, 0]]];
|
||
|
|
exports.easeInCubic = easeInCubic;
|
||
|
|
var easeOutCubic = [[[0, 1]], [[0.321, 0.312], [0.008, 0.616], [0.634, 0.008]], [[1, 0]]];
|
||
|
|
exports.easeOutCubic = easeOutCubic;
|
||
|
|
var easeInOutCubic = [[[0, 1]], [[0.5, 0.5], [0.3, 1], [0.7, 0]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Quart
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutCubic = easeInOutCubic;
|
||
|
|
var easeInQuart = [[[0, 1]], [[0.812, 0.74], [0.611, 0.988], [1.013, 0.492]], [[1, 0]]];
|
||
|
|
exports.easeInQuart = easeInQuart;
|
||
|
|
var easeOutQuart = [[[0, 1]], [[0.152, 0.244], [0.001, 0.448], [0.285, -0.02]], [[1, 0]]];
|
||
|
|
exports.easeOutQuart = easeOutQuart;
|
||
|
|
var easeInOutQuart = [[[0, 1]], [[0.5, 0.5], [0.4, 1], [0.6, 0]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Quint
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutQuart = easeInOutQuart;
|
||
|
|
var easeInQuint = [[[0, 1]], [[0.857, 0.856], [0.714, 1], [1, 0.712]], [[1, 0]]];
|
||
|
|
exports.easeInQuint = easeInQuint;
|
||
|
|
var easeOutQuint = [[[0, 1]], [[0.108, 0.2], [0.001, 0.4], [0.214, -0.012]], [[1, 0]]];
|
||
|
|
exports.easeOutQuint = easeOutQuint;
|
||
|
|
var easeInOutQuint = [[[0, 1]], [[0.5, 0.5], [0.5, 1], [0.5, 0]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Back
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutQuint = easeInOutQuint;
|
||
|
|
var easeInBack = [[[0, 1]], [[0.667, 0.896], [0.380, 1.184], [0.955, 0.616]], [[1, 0]]];
|
||
|
|
exports.easeInBack = easeInBack;
|
||
|
|
var easeOutBack = [[[0, 1]], [[0.335, 0.028], [0.061, 0.22], [0.631, -0.18]], [[1, 0]]];
|
||
|
|
exports.easeOutBack = easeOutBack;
|
||
|
|
var easeInOutBack = [[[0, 1]], [[0.5, 0.5], [0.4, 1.4], [0.6, -0.4]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Elastic
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutBack = easeInOutBack;
|
||
|
|
var easeInElastic = [[[0, 1]], [[0.474, 0.964], [0.382, 0.988], [0.557, 0.952]], [[0.619, 1.076], [0.565, 1.088], [0.669, 1.08]], [[0.770, 0.916], [0.712, 0.924], [0.847, 0.904]], [[0.911, 1.304], [0.872, 1.316], [0.961, 1.34]], [[1, 0]]];
|
||
|
|
exports.easeInElastic = easeInElastic;
|
||
|
|
var easeOutElastic = [[[0, 1]], [[0.073, -0.32], [0.034, -0.328], [0.104, -0.344]], [[0.191, 0.092], [0.110, 0.06], [0.256, 0.08]], [[0.310, -0.076], [0.260, -0.068], [0.357, -0.076]], [[0.432, 0.032], [0.362, 0.028], [0.683, -0.004]], [[1, 0]]];
|
||
|
|
exports.easeOutElastic = easeOutElastic;
|
||
|
|
var easeInOutElastic = [[[0, 1]], [[0.210, 0.94], [0.167, 0.884], [0.252, 0.98]], [[0.299, 1.104], [0.256, 1.092], [0.347, 1.108]], [[0.5, 0.496], [0.451, 0.672], [0.548, 0.324]], [[0.696, -0.108], [0.652, -0.112], [0.741, -0.124]], [[0.805, 0.064], [0.756, 0.012], [0.866, 0.096]], [[1, 0]]];
|
||
|
|
/**
|
||
|
|
* @description Bounce
|
||
|
|
*/
|
||
|
|
|
||
|
|
exports.easeInOutElastic = easeInOutElastic;
|
||
|
|
var easeInBounce = [[[0, 1]], [[0.148, 1], [0.075, 0.868], [0.193, 0.848]], [[0.326, 1], [0.276, 0.836], [0.405, 0.712]], [[0.600, 1], [0.511, 0.708], [0.671, 0.348]], [[1, 0]]];
|
||
|
|
exports.easeInBounce = easeInBounce;
|
||
|
|
var easeOutBounce = [[[0, 1]], [[0.357, 0.004], [0.270, 0.592], [0.376, 0.252]], [[0.604, -0.004], [0.548, 0.312], [0.669, 0.184]], [[0.820, 0], [0.749, 0.184], [0.905, 0.132]], [[1, 0]]];
|
||
|
|
exports.easeOutBounce = easeOutBounce;
|
||
|
|
var easeInOutBounce = [[[0, 1]], [[0.102, 1], [0.050, 0.864], [0.117, 0.86]], [[0.216, 0.996], [0.208, 0.844], [0.227, 0.808]], [[0.347, 0.996], [0.343, 0.8], [0.480, 0.292]], [[0.635, 0.004], [0.511, 0.676], [0.656, 0.208]], [[0.787, 0], [0.760, 0.2], [0.795, 0.144]], [[0.905, -0.004], [0.899, 0.164], [0.944, 0.144]], [[1, 0]]];
|
||
|
|
exports.easeInOutBounce = easeInOutBounce;
|
||
|
|
|
||
|
|
var _default = new Map([['linear', linear], ['easeInSine', easeInSine], ['easeOutSine', easeOutSine], ['easeInOutSine', easeInOutSine], ['easeInQuad', easeInQuad], ['easeOutQuad', easeOutQuad], ['easeInOutQuad', easeInOutQuad], ['easeInCubic', easeInCubic], ['easeOutCubic', easeOutCubic], ['easeInOutCubic', easeInOutCubic], ['easeInQuart', easeInQuart], ['easeOutQuart', easeOutQuart], ['easeInOutQuart', easeInOutQuart], ['easeInQuint', easeInQuint], ['easeOutQuint', easeOutQuint], ['easeInOutQuint', easeInOutQuint], ['easeInBack', easeInBack], ['easeOutBack', easeOutBack], ['easeInOutBack', easeInOutBack], ['easeInElastic', easeInElastic], ['easeOutElastic', easeOutElastic], ['easeInOutElastic', easeInOutElastic], ['easeInBounce', easeInBounce], ['easeOutBounce', easeOutBounce], ['easeInOutBounce', easeInOutBounce]]);
|
||
|
|
|
||
|
|
exports["default"] = _default;
|
||
|
|
},{}],3:[function(require,module,exports){
|
||
|
|
"use strict";
|
||
|
|
|
||
|
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
||
|
|
|
||
|
|
Object.defineProperty(exports, "__esModule", {
|
||
|
|
value: true
|
||
|
|
});
|
||
|
|
exports.transition = transition;
|
||
|
|
exports.injectNewCurve = injectNewCurve;
|
||
|
|
exports["default"] = void 0;
|
||
|
|
|
||
|
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
||
|
|
|
||
|
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
||
|
|
|
||
|
|
var _curves = _interopRequireDefault(require("./config/curves"));
|
||
|
|
|
||
|
|
var defaultTransitionBC = 'linear';
|
||
|
|
/**
|
||
|
|
* @description Get the N-frame animation state by the start and end state
|
||
|
|
* of the animation and the easing curve
|
||
|
|
* @param {String|Array} tBC Easing curve name or data
|
||
|
|
* @param {Number|Array|Object} startState Animation start state
|
||
|
|
* @param {Number|Array|Object} endState Animation end state
|
||
|
|
* @param {Number} frameNum Number of Animation frames
|
||
|
|
* @param {Boolean} deep Whether to use recursive mode
|
||
|
|
* @return {Array|Boolean} State of each frame of the animation (Invalid input will return false)
|
||
|
|
*/
|
||
|
|
|
||
|
|
function transition(tBC) {
|
||
|
|
var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
||
|
|
var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
|
||
|
|
var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
|
||
|
|
var deep = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
||
|
|
if (!checkParams.apply(void 0, arguments)) return false;
|
||
|
|
|
||
|
|
try {
|
||
|
|
// Get the transition bezier curve
|
||
|
|
var bezierCurve = getBezierCurve(tBC); // Get the progress of each frame state
|
||
|
|
|
||
|
|
var frameStateProgress = getFrameStateProgress(bezierCurve, frameNum); // If the recursion mode is not enabled or the state type is Number, the shallow state calculation is performed directly.
|
||
|
|
|
||
|
|
if (!deep || typeof endState === 'number') return getTransitionState(startState, endState, frameStateProgress);
|
||
|
|
return recursionTransitionState(startState, endState, frameStateProgress);
|
||
|
|
} catch (_unused) {
|
||
|
|
console.warn('Transition parameter may be abnormal!');
|
||
|
|
return [endState];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Check if the parameters are legal
|
||
|
|
* @param {String} tBC Name of transition bezier curve
|
||
|
|
* @param {Any} startState Transition start state
|
||
|
|
* @param {Any} endState Transition end state
|
||
|
|
* @param {Number} frameNum Number of transition frames
|
||
|
|
* @return {Boolean} Is the parameter legal
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function checkParams(tBC) {
|
||
|
|
var startState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
||
|
|
var endState = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
||
|
|
var frameNum = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 30;
|
||
|
|
|
||
|
|
if (!tBC || startState === false || endState === false || !frameNum) {
|
||
|
|
console.error('transition: Missing Parameters!');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((0, _typeof2["default"])(startState) !== (0, _typeof2["default"])(endState)) {
|
||
|
|
console.error('transition: Inconsistent Status Types!');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
var stateType = (0, _typeof2["default"])(endState);
|
||
|
|
|
||
|
|
if (stateType === 'string' || stateType === 'boolean' || !tBC.length) {
|
||
|
|
console.error('transition: Unsupported Data Type of State!');
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!_curves["default"].has(tBC) && !(tBC instanceof Array)) {
|
||
|
|
console.warn('transition: Transition curve not found, default curve will be used!');
|
||
|
|
}
|
||
|
|
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the transition bezier curve
|
||
|
|
* @param {String} tBC Name of transition bezier curve
|
||
|
|
* @return {Array} Bezier curve data
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getBezierCurve(tBC) {
|
||
|
|
var bezierCurve = '';
|
||
|
|
|
||
|
|
if (_curves["default"].has(tBC)) {
|
||
|
|
bezierCurve = _curves["default"].get(tBC);
|
||
|
|
} else if (tBC instanceof Array) {
|
||
|
|
bezierCurve = tBC;
|
||
|
|
} else {
|
||
|
|
bezierCurve = _curves["default"].get(defaultTransitionBC);
|
||
|
|
}
|
||
|
|
|
||
|
|
return bezierCurve;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the progress of each frame state
|
||
|
|
* @param {Array} bezierCurve Transition bezier curve
|
||
|
|
* @param {Number} frameNum Number of transition frames
|
||
|
|
* @return {Array} Progress of each frame state
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getFrameStateProgress(bezierCurve, frameNum) {
|
||
|
|
var tMinus = 1 / (frameNum - 1);
|
||
|
|
var tState = new Array(frameNum).fill(0).map(function (t, i) {
|
||
|
|
return i * tMinus;
|
||
|
|
});
|
||
|
|
var frameState = tState.map(function (t) {
|
||
|
|
return getFrameStateFromT(bezierCurve, t);
|
||
|
|
});
|
||
|
|
return frameState;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the progress of the corresponding frame according to t
|
||
|
|
* @param {Array} bezierCurve Transition bezier curve
|
||
|
|
* @param {Number} t Current frame t
|
||
|
|
* @return {Number} Progress of current frame
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getFrameStateFromT(bezierCurve, t) {
|
||
|
|
var tBezierCurvePoint = getBezierCurvePointFromT(bezierCurve, t);
|
||
|
|
var bezierCurvePointT = getBezierCurvePointTFromReT(tBezierCurvePoint, t);
|
||
|
|
return getBezierCurveTState(tBezierCurvePoint, bezierCurvePointT);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the corresponding sub-curve according to t
|
||
|
|
* @param {Array} bezierCurve Transition bezier curve
|
||
|
|
* @param {Number} t Current frame t
|
||
|
|
* @return {Array} Sub-curve of t
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getBezierCurvePointFromT(bezierCurve, t) {
|
||
|
|
var lastIndex = bezierCurve.length - 1;
|
||
|
|
var begin = '',
|
||
|
|
end = '';
|
||
|
|
bezierCurve.findIndex(function (item, i) {
|
||
|
|
if (i === lastIndex) return;
|
||
|
|
begin = item;
|
||
|
|
end = bezierCurve[i + 1];
|
||
|
|
var currentMainPointX = begin[0][0];
|
||
|
|
var nextMainPointX = end[0][0];
|
||
|
|
return t >= currentMainPointX && t < nextMainPointX;
|
||
|
|
});
|
||
|
|
var p0 = begin[0];
|
||
|
|
var p1 = begin[2] || begin[0];
|
||
|
|
var p2 = end[1] || end[0];
|
||
|
|
var p3 = end[0];
|
||
|
|
return [p0, p1, p2, p3];
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get local t based on t and sub-curve
|
||
|
|
* @param {Array} bezierCurve Sub-curve
|
||
|
|
* @param {Number} t Current frame t
|
||
|
|
* @return {Number} local t of sub-curve
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getBezierCurvePointTFromReT(bezierCurve, t) {
|
||
|
|
var reBeginX = bezierCurve[0][0];
|
||
|
|
var reEndX = bezierCurve[3][0];
|
||
|
|
var xMinus = reEndX - reBeginX;
|
||
|
|
var tMinus = t - reBeginX;
|
||
|
|
return tMinus / xMinus;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the curve progress of t
|
||
|
|
* @param {Array} bezierCurve Sub-curve
|
||
|
|
* @param {Number} t Current frame t
|
||
|
|
* @return {Number} Progress of current frame
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getBezierCurveTState(_ref, t) {
|
||
|
|
var _ref2 = (0, _slicedToArray2["default"])(_ref, 4),
|
||
|
|
_ref2$ = (0, _slicedToArray2["default"])(_ref2[0], 2),
|
||
|
|
p0 = _ref2$[1],
|
||
|
|
_ref2$2 = (0, _slicedToArray2["default"])(_ref2[1], 2),
|
||
|
|
p1 = _ref2$2[1],
|
||
|
|
_ref2$3 = (0, _slicedToArray2["default"])(_ref2[2], 2),
|
||
|
|
p2 = _ref2$3[1],
|
||
|
|
_ref2$4 = (0, _slicedToArray2["default"])(_ref2[3], 2),
|
||
|
|
p3 = _ref2$4[1];
|
||
|
|
|
||
|
|
var pow = Math.pow;
|
||
|
|
var tMinus = 1 - t;
|
||
|
|
var result1 = p0 * pow(tMinus, 3);
|
||
|
|
var result2 = 3 * p1 * t * pow(tMinus, 2);
|
||
|
|
var result3 = 3 * p2 * pow(t, 2) * tMinus;
|
||
|
|
var result4 = p3 * pow(t, 3);
|
||
|
|
return 1 - (result1 + result2 + result3 + result4);
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get transition state according to frame progress
|
||
|
|
* @param {Any} startState Transition start state
|
||
|
|
* @param {Any} endState Transition end state
|
||
|
|
* @param {Array} frameState Frame state progress
|
||
|
|
* @return {Array} Transition frame state
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getTransitionState(begin, end, frameState) {
|
||
|
|
var stateType = 'object';
|
||
|
|
if (typeof begin === 'number') stateType = 'number';
|
||
|
|
if (begin instanceof Array) stateType = 'array';
|
||
|
|
if (stateType === 'number') return getNumberTransitionState(begin, end, frameState);
|
||
|
|
if (stateType === 'array') return getArrayTransitionState(begin, end, frameState);
|
||
|
|
if (stateType === 'object') return getObjectTransitionState(begin, end, frameState);
|
||
|
|
return frameState.map(function (t) {
|
||
|
|
return end;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the transition data of the number type
|
||
|
|
* @param {Number} startState Transition start state
|
||
|
|
* @param {Number} endState Transition end state
|
||
|
|
* @param {Array} frameState Frame state progress
|
||
|
|
* @return {Array} Transition frame state
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getNumberTransitionState(begin, end, frameState) {
|
||
|
|
var minus = end - begin;
|
||
|
|
return frameState.map(function (s) {
|
||
|
|
return begin + minus * s;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the transition data of the array type
|
||
|
|
* @param {Array} startState Transition start state
|
||
|
|
* @param {Array} endState Transition end state
|
||
|
|
* @param {Array} frameState Frame state progress
|
||
|
|
* @return {Array} Transition frame state
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getArrayTransitionState(begin, end, frameState) {
|
||
|
|
var minus = end.map(function (v, i) {
|
||
|
|
if (typeof v !== 'number') return false;
|
||
|
|
return v - begin[i];
|
||
|
|
});
|
||
|
|
return frameState.map(function (s) {
|
||
|
|
return minus.map(function (v, i) {
|
||
|
|
if (v === false) return end[i];
|
||
|
|
return begin[i] + v * s;
|
||
|
|
});
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the transition data of the object type
|
||
|
|
* @param {Object} startState Transition start state
|
||
|
|
* @param {Object} endState Transition end state
|
||
|
|
* @param {Array} frameState Frame state progress
|
||
|
|
* @return {Array} Transition frame state
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function getObjectTransitionState(begin, end, frameState) {
|
||
|
|
var keys = Object.keys(end);
|
||
|
|
var beginValue = keys.map(function (k) {
|
||
|
|
return begin[k];
|
||
|
|
});
|
||
|
|
var endValue = keys.map(function (k) {
|
||
|
|
return end[k];
|
||
|
|
});
|
||
|
|
var arrayState = getArrayTransitionState(beginValue, endValue, frameState);
|
||
|
|
return arrayState.map(function (item) {
|
||
|
|
var frameData = {};
|
||
|
|
item.forEach(function (v, i) {
|
||
|
|
return frameData[keys[i]] = v;
|
||
|
|
});
|
||
|
|
return frameData;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Get the transition state data by recursion
|
||
|
|
* @param {Array|Object} startState Transition start state
|
||
|
|
* @param {Array|Object} endState Transition end state
|
||
|
|
* @param {Array} frameState Frame state progress
|
||
|
|
* @return {Array} Transition frame state
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function recursionTransitionState(begin, end, frameState) {
|
||
|
|
var state = getTransitionState(begin, end, frameState);
|
||
|
|
|
||
|
|
var _loop = function _loop(key) {
|
||
|
|
var bTemp = begin[key];
|
||
|
|
var eTemp = end[key];
|
||
|
|
if ((0, _typeof2["default"])(eTemp) !== 'object') return "continue";
|
||
|
|
var data = recursionTransitionState(bTemp, eTemp, frameState);
|
||
|
|
state.forEach(function (fs, i) {
|
||
|
|
return fs[key] = data[i];
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
for (var key in end) {
|
||
|
|
var _ret = _loop(key);
|
||
|
|
|
||
|
|
if (_ret === "continue") continue;
|
||
|
|
}
|
||
|
|
|
||
|
|
return state;
|
||
|
|
}
|
||
|
|
/**
|
||
|
|
* @description Inject new curve into curves as config
|
||
|
|
* @param {Any} key The key of curve
|
||
|
|
* @param {Array} curve Bezier curve data
|
||
|
|
* @return {Undefined} No return
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
function injectNewCurve(key, curve) {
|
||
|
|
if (!key || !curve) {
|
||
|
|
console.error('InjectNewCurve Missing Parameters!');
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
_curves["default"].set(key, curve);
|
||
|
|
}
|
||
|
|
|
||
|
|
var _default = transition;
|
||
|
|
exports["default"] = _default;
|
||
|
|
},{"./config/curves":2,"@babel/runtime/helpers/interopRequireDefault":5,"@babel/runtime/helpers/slicedToArray":8,"@babel/runtime/helpers/typeof":9}],4:[function(require,module,exports){
|
||
|
|
function _arrayWithHoles(arr) {
|
||
|
|
if (Array.isArray(arr)) return arr;
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = _arrayWithHoles;
|
||
|
|
},{}],5:[function(require,module,exports){
|
||
|
|
function _interopRequireDefault(obj) {
|
||
|
|
return obj && obj.__esModule ? obj : {
|
||
|
|
"default": obj
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = _interopRequireDefault;
|
||
|
|
},{}],6:[function(require,module,exports){
|
||
|
|
function _iterableToArrayLimit(arr, i) {
|
||
|
|
var _arr = [];
|
||
|
|
var _n = true;
|
||
|
|
var _d = false;
|
||
|
|
var _e = undefined;
|
||
|
|
|
||
|
|
try {
|
||
|
|
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
|
||
|
|
_arr.push(_s.value);
|
||
|
|
|
||
|
|
if (i && _arr.length === i) break;
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
_d = true;
|
||
|
|
_e = err;
|
||
|
|
} finally {
|
||
|
|
try {
|
||
|
|
if (!_n && _i["return"] != null) _i["return"]();
|
||
|
|
} finally {
|
||
|
|
if (_d) throw _e;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return _arr;
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = _iterableToArrayLimit;
|
||
|
|
},{}],7:[function(require,module,exports){
|
||
|
|
function _nonIterableRest() {
|
||
|
|
throw new TypeError("Invalid attempt to destructure non-iterable instance");
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = _nonIterableRest;
|
||
|
|
},{}],8:[function(require,module,exports){
|
||
|
|
var arrayWithHoles = require("./arrayWithHoles");
|
||
|
|
|
||
|
|
var iterableToArrayLimit = require("./iterableToArrayLimit");
|
||
|
|
|
||
|
|
var nonIterableRest = require("./nonIterableRest");
|
||
|
|
|
||
|
|
function _slicedToArray(arr, i) {
|
||
|
|
return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || nonIterableRest();
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = _slicedToArray;
|
||
|
|
},{"./arrayWithHoles":4,"./iterableToArrayLimit":6,"./nonIterableRest":7}],9:[function(require,module,exports){
|
||
|
|
function _typeof2(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof2 = function _typeof2(obj) { return typeof obj; }; } else { _typeof2 = function _typeof2(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof2(obj); }
|
||
|
|
|
||
|
|
function _typeof(obj) {
|
||
|
|
if (typeof Symbol === "function" && _typeof2(Symbol.iterator) === "symbol") {
|
||
|
|
module.exports = _typeof = function _typeof(obj) {
|
||
|
|
return _typeof2(obj);
|
||
|
|
};
|
||
|
|
} else {
|
||
|
|
module.exports = _typeof = function _typeof(obj) {
|
||
|
|
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : _typeof2(obj);
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
return _typeof(obj);
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = _typeof;
|
||
|
|
},{}]},{},[1])
|
||
|
|
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6L1VzZXJzL0FkbWluaXN0cmF0b3IvQXBwRGF0YS9Sb2FtaW5nL25wbS9ub2RlX21vZHVsZXMvYnJvd3NlcmlmeS9ub2RlX21vZHVsZXMvYnJvd3Nlci1wYWNrL19wcmVsdWRlLmpzIiwiYnVpbGQvZW50cnkuanMiLCJsaWIvY29uZmlnL2N1cnZlcy5qcyIsImxpYi9pbmRleC5qcyIsIm5vZGVfbW9kdWxlcy9AYmFiZWwvcnVudGltZS9oZWxwZXJzL2FycmF5V2l0aEhvbGVzLmpzIiwibm9kZV9tb2R1bGVzL0BiYWJlbC9ydW50aW1lL2hlbHBlcnMvaW50ZXJvcFJlcXVpcmVEZWZhdWx0LmpzIiwibm9kZV9tb2R1bGVzL0BiYWJlbC9ydW50aW1lL2hlbHBlcnMvaXRlcmFibGVUb0FycmF5TGltaXQuanMiLCJub2RlX21vZHVsZXMvQGJhYmVsL3J1bnRpbWUvaGVscGVycy9ub25JdGVyYWJsZVJlc3QuanMiLCJub2RlX21vZHVsZXMvQGJhYmVsL3J1bnRpbWUvaGVscGVycy9zbGljZWRUb0FycmF5LmpzIiwibm9kZV9tb2R1bGVzL0BiYWJlbC9ydW50aW1lL2hlbHBlcnMvdHlwZW9mLmpzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FDQUE7QUFDQTtBQUNBOztBQ0ZBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7O0FDM0ZBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ2hWQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ0pBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ05BO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUMxQkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUNKQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBOztBQ1ZBO0FBQ0E7QUFDQTtBQUNBO0F
|