rc-tween-one
Version:
tween-one anim component for react
277 lines (255 loc) • 8.28 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.windowIsUndefined = undefined;
exports.toArrayChildren = toArrayChildren;
exports.dataToArray = dataToArray;
exports.objectEqual = objectEqual;
exports.findChildInChildrenByKey = findChildInChildrenByKey;
exports.mergeChildren = mergeChildren;
exports.transformArguments = transformArguments;
exports.getChildrenFromProps = getChildrenFromProps;
exports.startConvertToEndUnit = startConvertToEndUnit;
exports.parsePath = parsePath;
exports.getTransformValue = getTransformValue;
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _deepEql = require('deep-eql');
var _deepEql2 = _interopRequireDefault(_deepEql);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
var windowIsUndefined = exports.windowIsUndefined = !(typeof window !== 'undefined' && window.document && window.document.createElement);
function toArrayChildren(children) {
var ret = [];
_react2['default'].Children.forEach(children, function (c) {
ret.push(c);
});
return ret;
}
function dataToArray(vars) {
if (!vars && vars !== 0) {
return [];
}
if (Array.isArray(vars)) {
return vars;
}
return [vars];
}
function objectEqual(obj1, obj2) {
if (obj1 === obj2 || (0, _deepEql2['default'])(obj1, obj2)) {
return true;
}
if (!obj1 || !obj2) {
return false;
}
// animation 写在标签上的进行判断是否相等， 判断每个参数有没有 function;
var equalBool = true;
if (Array.isArray(obj1) && Array.isArray(obj2)) {
if (obj1.length !== obj2.length) {
return false;
}
for (var i = 0; i < obj1.length; i++) {
var currentObj = obj1[i];
var nextObj = obj2[i];
for (var p in currentObj) {
// eslint-disable-line no-restricted-syntax
if (currentObj[p] !== nextObj[p]) {
if (typeof currentObj[p] === 'object' && typeof nextObj[p] === 'object') {
equalBool = objectEqual(currentObj[p], nextObj[p]);
} else if (typeof currentObj[p] === 'function' && typeof nextObj[p] === 'function') {
if (currentObj[p].name !== nextObj[p].name) {
equalBool = false;
}
} else {
equalBool = false;
return false;
}
}
}
}
}
var setEqualBool = function setEqualBool(objA, objB) {
Object.keys(objA).forEach(function (key) {
if (!(key in objB)) {
equalBool = false;
}
if (typeof objA[key] === 'object' && typeof objB[key] === 'object') {
equalBool = objectEqual(objA[key], objB[key]);
} else if (typeof objA[key] === 'function' && typeof objB[key] === 'function') {
if (objA[key].name !== objB[key].name) {
equalBool = false;
}
} else if (objA[key] !== objB[key]) {
equalBool = false;
}
});
};
setEqualBool(obj1, obj2);
setEqualBool(obj2, obj1);
return equalBool;
}
function findChildInChildrenByKey(children, key) {
var ret = null;
if (children) {
children.forEach(function (c) {
if (ret || !c) {
return;
}
if (c.key === key) {
ret = c;
}
});
}
return ret;
}
function mergeChildren(prev, next) {
var ret = [];
// For each key of `next`, the list of keys to insert before that key in
// the combined list
var nextChildrenPending = {};
var pendingChildren = [];
var followChildrenKey = void 0;
prev.forEach(function (c) {
if (!c) {
return;
}
if (findChildInChildrenByKey(next, c.key)) {
if (pendingChildren.length) {
nextChildrenPending[c.key] = pendingChildren;
pendingChildren = [];
}
followChildrenKey = c.key;
} else if (c.key) {
pendingChildren.push(c);
}
});
if (!followChildrenKey) {
ret = ret.concat(pendingChildren);
}
next.forEach(function (c) {
if (!c) {
return;
}
if (nextChildrenPending.hasOwnProperty(c.key)) {
// eslint-disable-line no-prototype-builtins
ret = ret.concat(nextChildrenPending[c.key]);
}
ret.push(c);
if (c.key === followChildrenKey) {
ret = ret.concat(pendingChildren);
}
});
return ret;
}
function transformArguments(arg, key, i) {
var result = void 0;
if (typeof arg === 'function') {
result = arg({
key: key,
index: i
});
} else {
result = arg;
}
return result;
}
function getChildrenFromProps(props) {
return props && props.children;
}
function startConvertToEndUnit(target, computedStyle, style, num, unit, dataUnit, fixed, isOriginWidth) {
if (windowIsUndefined) {
return num;
}
var horiz = /(?:Left|Right|Width|X)/i.test(style) || isOriginWidth;
horiz = style === 'padding' || style === 'marign' ? true : horiz;
var t = style.indexOf('border') !== -1 || style.indexOf('translate') !== -1 ? target : target.parentNode || document.body;
t = fixed ? document.body : t;
var pix = void 0;
var htmlComputedStyle = void 0;
// transform 在 safari 下会留着单位，chrome 下会全部转换成 px;
switch (unit) {
case '%':
pix = parseFloat(num) / 100 * (horiz ? t.clientWidth : t.clientHeight);
break;
case 'vw':
pix = parseFloat(num) * document.body.clientWidth / 100;
break;
case 'vh':
pix = parseFloat(num) * document.body.clientHeight / 100;
break;
case 'em':
pix = parseFloat(num) * parseFloat(computedStyle.fontSize);
break;
case 'rem':
{
htmlComputedStyle = window.getComputedStyle(document.getElementsByTagName('html')[0]);
pix = parseFloat(num) * parseFloat(htmlComputedStyle.fontSize);
break;
}
default:
pix = parseFloat(num);
break;
}
switch (dataUnit) {
case '%':
pix = pix ? pix * 100 / (horiz ? t.clientWidth : t.clientHeight) : 0;
break;
case 'vw':
pix = parseFloat(num) / document.body.clientWidth * 100;
break;
case 'vh':
pix = parseFloat(num) / document.body.clientHeight * 100;
break;
case 'em':
pix = parseFloat(num) / parseFloat(computedStyle.fontSize);
break;
case 'rem':
{
htmlComputedStyle = htmlComputedStyle || window.getComputedStyle(document.getElementsByTagName('html')[0]);
pix = parseFloat(num) / parseFloat(htmlComputedStyle.fontSize);
break;
}
default:
break;
}
return pix;
}
function parsePath(path) {
if (typeof path === 'string') {
if (path.charAt(0).match(/m/i)) {
var domPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');
domPath.setAttributeNS(null, 'd', path);
return domPath;
}
return document.querySelector(path);
} else if (path.style) {
return path;
}
throw new Error('Error while parsing the path');
}
function getTransformValue(t) {
if (typeof t === 'string') {
return t;
}
var perspective = t.perspective;
var angle = t.rotate;
var rotateX = t.rotateX;
var rotateY = t.rotateY;
var sx = t.scaleX;
var sy = t.scaleY;
var sz = t.scaleZ;
var skx = t.skewX;
var sky = t.skewY;
var translateX = typeof t.translateX === 'string' ? t.translateX : t.translateX + 'px';
var translateY = typeof t.translateY === 'string' ? t.translateY : t.translateY + 'px';
var translateZ = typeof t.translateZ === 'string' ? t.translateZ : t.translateZ + 'px';
var sk = skx || sky ? 'skew(' + skx + 'deg,' + sky + 'deg)' : '';
var an = angle ? 'rotate(' + angle + 'deg)' : '';
var ss = sx !== 1 || sy !== 1 || sz !== 1 ? 'scale3d(' + sx + ',' + sy + ',' + sz + ')' : '';
var rX = rotateX ? 'rotateX(' + rotateX + 'deg)' : '';
var rY = rotateY ? 'rotateY(' + rotateY + 'deg)' : '';
var per = perspective ? 'perspective(' + perspective + 'px)' : '';
var defautlTranslate = ss || an || rX || rY || sk ? '' : 'translate(0px, 0px)';
var translate = t.translateZ ? 'translate3d(' + translateX + ',' + translateY + ',' + translateZ + ')' : (t.translateX || t.translateY) && 'translate(' + translateX + ',' + translateY + ')' || defautlTranslate;
return (per + ' ' + translate + ' ' + ss + ' ' + an + ' ' + rX + ' ' + rY + ' ' + sk).trim();
}