elmer-ui-core
Version:
web app framework
292 lines (291 loc) • 13.6 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ElmerAnimation = void 0;
var elmer_common_1 = require("elmer-common");
var ElmerAnimationProperty_1 = require("./ElmerAnimationProperty");
var ElmerAnimation = (function () {
function ElmerAnimation(options) {
this.options = options;
this.animationData = [];
this.cavAnimation = new elmer_common_1.Canvas();
this.calcFrameAttribute();
this.start();
}
ElmerAnimation.prototype.start = function () {
if (this.options) {
typeof this.options.onBegin === "function" && this.options.onBegin();
this.beginTime = (new Date()).getTime();
this.handler = this.cavAnimation.startAnimation(this.animationCallBack, this);
}
};
ElmerAnimation.prototype.stop = function () {
this.cavAnimation.stopAnimation(this.handler);
this.options && typeof this.options.onEnd === "function" && this.options.onEnd();
this.dispose();
};
ElmerAnimation.prototype.calcFrameAttribute = function () {
var data = this.options.data || [];
var animationData = [];
data.map(function (item) {
animationData.push({
beginTime: item.beginTime,
defaultData: ElmerAnimationProperty_1.default.readWillChangeCssDefaultData(item.dom, item.from, item.to),
dom: item.dom,
duration: item.duration,
fromData: ElmerAnimationProperty_1.default.converOption(item.from),
onBegin: item.onStart,
onEnd: item.onFinish,
optionA: item.optionA,
optionP: item.optionP,
optionS: item.optionS,
toData: ElmerAnimationProperty_1.default.converOption(item.to),
type: item.type,
});
});
this.animationData = animationData;
};
ElmerAnimation.prototype.dispose = function () {
if (this.animationData && this.animationData.length > 0) {
this.animationData.map(function (tmpItem) {
typeof tmpItem.onEnd === "function" && tmpItem.onEnd({
default: tmpItem.defaultData,
from: tmpItem.fromData,
to: tmpItem.toData,
});
});
}
this.animationData = null;
this.cavAnimation = null;
this.options = null;
this.timeAnimationCallBack = null;
delete this.animationData;
delete this.cavAnimation;
delete this.options;
delete this.timeAnimationCallBack;
};
ElmerAnimation.prototype.getTimeAnimationCallBack = function (animationType) {
var resultCallBack = null;
switch (animationType) {
case "Linear":
resultCallBack = elmer_common_1.MathAnimationApi.Linear;
break;
case "BackEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Back.easeIn;
break;
case "BackEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Back.easeInOut;
break;
case "BackEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Back.easeOut;
break;
case "BounceEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Bounce.easeIn;
break;
case "BounceEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Bounce.easeInOut;
break;
case "BounceEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Bounce.easeOut;
break;
case "CircleEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Circle.easeIn;
break;
case "CircleEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Circle.easeInOut;
break;
case "CircleEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Circle.easeOut;
break;
case "CubicEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Cubic.easeIn;
break;
case "CubicEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Cubic.easeInOut;
break;
case "CubicEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Cubic.easeOut;
break;
case "ElasticEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Elastic.easeIn;
break;
case "ElasticEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Elastic.easeInOut;
break;
case "ElasticEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Elastic.easeOut;
break;
case "ExpoEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Expo.easeIn;
break;
case "ExpoEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Expo.easeInOut;
break;
case "ExpoEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Expo.easeOut;
break;
case "QuadEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Quad.easeIn;
break;
case "QuadEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Quad.easeInOut;
break;
case "QuadEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Quad.easeOut;
break;
case "QuartEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Quart.easeIn;
break;
case "QuartEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Quart.easeInOut;
break;
case "QuartEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Quart.easeOut;
break;
case "QuintEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Quint.easeIn;
break;
case "QuintEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Quint.easeInOut;
break;
case "QuintEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Quint.easeOut;
break;
case "SineEaseIn":
resultCallBack = elmer_common_1.MathAnimationApi.Sine.easeIn;
break;
case "SineEaseInOut":
resultCallBack = elmer_common_1.MathAnimationApi.Sine.easeInOut;
break;
case "SineEaseOut":
resultCallBack = elmer_common_1.MathAnimationApi.Sine.easeOut;
break;
}
return resultCallBack;
};
ElmerAnimation.prototype.animationCallBack = function () {
var _this = this;
var curTime = (new Date()).getTime();
var offset = curTime - this.beginTime;
if (!this.options) {
this.stop();
}
else {
if (offset > this.options.duration) {
this.stop();
}
else {
this.animationData.map(function (itemData, keyIndex) {
var itemBeginTime = itemData.beginTime || 0;
if (itemBeginTime <= offset && offset <= itemBeginTime + itemData.duration) {
if (!itemData.isBegin) {
itemData.isBegin = true;
typeof itemData.onBegin === "function" && itemData.onBegin(itemData);
}
var updateCssProperty = _this.calcUpdateProperty(offset, itemData);
typeof _this.options.onChange === "function" && _this.options.onChange({
data: updateCssProperty,
dom: itemData.dom,
value: ElmerAnimationProperty_1.default.converAnimationProperty(updateCssProperty)
});
}
else {
if (offset > itemBeginTime + itemData.duration) {
typeof itemData.onEnd === "function" && itemData.onEnd({
default: itemData.defaultData,
from: itemData.fromData,
to: itemData.toData,
});
delete _this.animationData[keyIndex];
}
}
});
}
}
curTime = null;
offset = null;
};
ElmerAnimation.prototype.calcUpdateProperty = function (time, data) {
var _this = this;
var timeAnimationCallBack = this.getTimeAnimationCallBack(data.type);
var updateProperty = {};
if (typeof timeAnimationCallBack === "function") {
Object.keys(data.toData).map(function (cssKey) {
var defaultValue = data.defaultData[cssKey];
var beginValue = data.fromData[cssKey] || defaultValue;
var toValue = data.toData[cssKey];
var toValueData = [];
var beginValueData = [];
var updateValue = {};
toValueData.push(toValue.value1);
toValueData.push(toValue.value2);
toValueData.push(toValue.value3);
toValueData.push(toValue.value4);
beginValueData.push(beginValue.value1);
beginValueData.push(beginValue.value2);
beginValueData.push(beginValue.value3);
beginValueData.push(beginValue.value4);
toValueData.map(function (tmpValue, index) {
var dataIndex = index + 1;
var dataKey = "value" + dataIndex;
if (!ElmerAnimationProperty_1.isCssEmpty(tmpValue)) {
var beginValueNum_1 = 0;
if (elmer_common_1.StaticCommon.isArray(tmpValue)) {
var tmpSplitValues_1 = [];
tmpValue.map(function (tmpSplitData, subIndex) {
beginValueNum_1 = beginValueData[index][subIndex] || 0;
tmpSplitValues_1.push(_this.calcTimeAnimationResult(time, data.type, timeAnimationCallBack, {
beginValue: beginValueNum_1,
changeValue: tmpSplitData - beginValueNum_1,
currentTime: time,
duration: data.duration,
optionA: data.optionA,
optionP: data.optionP,
optionS: data.optionS
}));
});
updateValue[dataKey] = tmpSplitValues_1;
}
else {
beginValueNum_1 = beginValueData[index] || 0;
updateValue[dataKey] = _this.calcTimeAnimationResult(time, data.type, timeAnimationCallBack, {
beginValue: beginValueNum_1,
changeValue: tmpValue - beginValueNum_1,
currentTime: time,
duration: data.duration,
optionA: data.optionA,
optionP: data.optionP,
optionS: data.optionS
});
}
updateValue["value" + dataIndex + "Unit"] = toValue["value" + dataIndex + "Unit"];
}
});
updateProperty[cssKey] = updateValue;
});
}
timeAnimationCallBack = null;
return updateProperty;
};
ElmerAnimation.prototype.calcTimeAnimationResult = function (time, type, timeAnimationCallBack, options) {
var result = 0;
if (typeof options.beginValue === "number" && typeof options.changeValue === "number" && typeof options.duration === "number") {
if (["ElasticEaseIn", "ElasticEaseInOut", "ElasticEaseOut", "BackEaseIn", "BackEaseInOut", "BackEaseOut"].indexOf(type) < 0) {
result = timeAnimationCallBack(time, options.beginValue, options.changeValue, options.duration);
}
else {
if (["ElasticEaseIn", "ElasticEaseInOut", "ElasticEaseOut"].indexOf(type) >= 0) {
result = timeAnimationCallBack(time, options.beginValue, options.changeValue, options.duration, options.optionA, options.optionP);
}
else if (["BackEaseIn", "BackEaseInOut", "BackEaseOut"].indexOf(type) >= 0) {
result = timeAnimationCallBack(time, options.beginValue, options.changeValue, options.duration, options.optionS);
}
}
}
else {
result = undefined;
}
return result;
};
return ElmerAnimation;
}());
exports.ElmerAnimation = ElmerAnimation;