315 lines
12 KiB
JavaScript
315 lines
12 KiB
JavaScript
|
var animationState = {};
|
||
|
|
animationState.reset = function (engine) {
|
||
|
|
if ('string' === typeof engine) {
|
||
|
|
this.defaultEngine = engine;
|
||
|
|
}
|
||
|
|
this.defaults = {};
|
||
|
|
this.displayList = [];
|
||
|
|
this.displayDict = {};
|
||
|
|
this.start = null;
|
||
|
|
this.time = 0;
|
||
|
|
this.timeline = [];
|
||
|
|
this.timelineIndex = 0;
|
||
|
|
this.requestID = null;
|
||
|
|
this.paused = false;
|
||
|
|
this.displayEngine = 'undefined' === typeof engine ? this.defaultEngine : engine;
|
||
|
|
}
|
||
|
|
|
||
|
|
function addActions(frame, timeline) {
|
||
|
|
var keyframe = keyframes[frame];
|
||
|
|
var len = keyframe.length;
|
||
|
|
for (var i = 0; i < len; ++i) {
|
||
|
|
var action = keyframe[i];
|
||
|
|
loopOver(action, timeline);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function animateList(now) {
|
||
|
|
if (animationState.paused) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
if (animationState.start == null) {
|
||
|
|
animationState.start = now - animationState.time;
|
||
|
|
}
|
||
|
|
animationState.time = now - animationState.start;
|
||
|
|
var stillAnimating = false;
|
||
|
|
for (var index = animationState.timelineIndex; index < animationState.timeline.length; ++index) {
|
||
|
|
var animation = animationState.timeline[index];
|
||
|
|
if (animation.time > animationState.time) {
|
||
|
|
stillAnimating = true;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
if (animation.time + animation.duration < animationState.time) {
|
||
|
|
if (animation.finalized) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
animation.finalized = true;
|
||
|
|
}
|
||
|
|
stillAnimating = true;
|
||
|
|
var actions = animation.actions;
|
||
|
|
for (var aIndex = 0; aIndex < actions.length; ++aIndex) {
|
||
|
|
var action = actions[aIndex];
|
||
|
|
var hasDraw = 'draw' in action;
|
||
|
|
var hasRef = 'ref' in action;
|
||
|
|
var displayIndex;
|
||
|
|
if (hasDraw) {
|
||
|
|
var ref = hasRef ? action.ref : "anonymous_" + index + "_" + aIndex;
|
||
|
|
assert('string' == typeof(ref));
|
||
|
|
if (ref in animationState.displayDict) {
|
||
|
|
displayIndex = animationState.displayDict[ref];
|
||
|
|
} else {
|
||
|
|
assert('string' == typeof(action.draw));
|
||
|
|
var draw = (new Function("return " + action.draw))();
|
||
|
|
assert('object' == typeof(draw));
|
||
|
|
var paint;
|
||
|
|
if ('paint' in action) {
|
||
|
|
assert('string' == typeof(action.paint));
|
||
|
|
paint = (new Function("return " + action.paint))();
|
||
|
|
assert('object' == typeof(paint) && !isArray(paint));
|
||
|
|
} else {
|
||
|
|
paint = animationState.defaults.paint;
|
||
|
|
}
|
||
|
|
displayIndex = animationState.displayList.length;
|
||
|
|
animationState.displayList.push( { "ref":ref, "draw":draw, "paint":paint,
|
||
|
|
"drawSpec":action.draw, "paintSpec":action.paint,
|
||
|
|
"drawCopied":false, "paintCopied":false,
|
||
|
|
"drawDirty":true, "paintDirty":true, "once":false } );
|
||
|
|
animationState.displayDict[ref] = displayIndex;
|
||
|
|
}
|
||
|
|
} else if (hasRef) {
|
||
|
|
assert('string' == typeof(action.ref));
|
||
|
|
displayIndex = animationState.displayDict[action.ref];
|
||
|
|
} else {
|
||
|
|
assert(actions.length == 1);
|
||
|
|
for (var prop in action) {
|
||
|
|
if ('paint' == prop) {
|
||
|
|
assert('string' == typeof(action[prop]));
|
||
|
|
var obj = (new Function("return " + action[prop]))();
|
||
|
|
assert('object' == typeof(obj) && !isArray(obj));
|
||
|
|
animationState.defaults[prop] = obj;
|
||
|
|
} else {
|
||
|
|
animationState.defaults[prop] = action[prop];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
var targetSpec = 'target' in action ? action.target : animationState.defaults.target;
|
||
|
|
assert(targetSpec);
|
||
|
|
assert('string' == typeof(targetSpec));
|
||
|
|
assert(displayIndex < animationState.displayList.length);
|
||
|
|
var display = animationState.displayList[displayIndex];
|
||
|
|
var modDraw = targetSpec.startsWith('draw');
|
||
|
|
assert(modDraw || targetSpec.startsWith('paint'));
|
||
|
|
var modType = modDraw ? "draw" : "paint";
|
||
|
|
var copied = modDraw ? display.drawCopied : action.paintCopied;
|
||
|
|
if (!copied) {
|
||
|
|
var copy;
|
||
|
|
if (!modDraw || display.drawSpec.startsWith("text")) {
|
||
|
|
copy = {};
|
||
|
|
var original = modDraw ? display.draw : display.paint;
|
||
|
|
for (var p in original) {
|
||
|
|
copy[p] = original[p];
|
||
|
|
}
|
||
|
|
} else if (display.drawSpec.startsWith("paths")) {
|
||
|
|
copy = [];
|
||
|
|
for (var i = 0; i < display.draw.length; ++i) {
|
||
|
|
var curves = display.draw[i];
|
||
|
|
var curve = Object.keys(curves)[0];
|
||
|
|
copy[i] = {};
|
||
|
|
copy[i][curve] = curves[curve].slice(0); // clone the array of curves
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
assert(display.drawSpec.startsWith("pictures"));
|
||
|
|
copy = [];
|
||
|
|
for (var i = 0; i < display.draw.length; ++i) {
|
||
|
|
var entry = display.draw[i];
|
||
|
|
copy[i] = { "draw":entry.draw, "paint":entry.paint };
|
||
|
|
}
|
||
|
|
}
|
||
|
|
display[modType] = copy;
|
||
|
|
display[modType + "Copied"] = true;
|
||
|
|
}
|
||
|
|
var targetField, targetObject, fieldOffset;
|
||
|
|
if (targetSpec.endsWith("]")) {
|
||
|
|
fieldOffset = targetSpec.lastIndexOf("[");
|
||
|
|
assert(fieldOffset >= 0);
|
||
|
|
targetField = targetSpec.substring(fieldOffset + 1, targetSpec.length - 1);
|
||
|
|
var arrayIndex = +targetField;
|
||
|
|
if (!isNaN(arrayIndex) && targetField.length > 0) {
|
||
|
|
targetField = arrayIndex;
|
||
|
|
}
|
||
|
|
|
||
|
|
} else {
|
||
|
|
fieldOffset = targetSpec.lastIndexOf(".");
|
||
|
|
if (fieldOffset >= 0) {
|
||
|
|
targetField = targetSpec.substring(fieldOffset + 1, targetSpec.length);
|
||
|
|
} else {
|
||
|
|
targetObject = display;
|
||
|
|
targetField = targetSpec;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (fieldOffset >= 0) {
|
||
|
|
var sub = targetSpec.substring(0, fieldOffset);
|
||
|
|
targetObject = (new Function('display', "return display." + sub))(display);
|
||
|
|
}
|
||
|
|
assert(null != targetObject[targetField]);
|
||
|
|
if (!('start' in action) || action.start < animation.time) {
|
||
|
|
for (var p in animationState.defaults) {
|
||
|
|
if ('draw' == p || 'paint' == p || 'ref' == p) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
assert('range' == p || 'target' == p || 'formula' == p || 'params' == p);
|
||
|
|
if (!(p in action)) {
|
||
|
|
action[p] = animationState.defaults[p];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if ('number' == typeof(action.formula)) {
|
||
|
|
targetObject[targetField] = action.formula;
|
||
|
|
action.once = true;
|
||
|
|
}
|
||
|
|
action.start = animation.time;
|
||
|
|
}
|
||
|
|
if (action.once) {
|
||
|
|
continue;
|
||
|
|
}
|
||
|
|
var value = Math.min(1, (animationState.time - animation.time) / animation.duration);
|
||
|
|
var scaled = action.range[0] + (action.range[1] - action.range[0]) * value;
|
||
|
|
if ('params' in action) {
|
||
|
|
if (!('func' in action)) {
|
||
|
|
if (isArray(action.params)) {
|
||
|
|
action.funcParams = [];
|
||
|
|
var len = action.params.length;
|
||
|
|
for (var i = 0; i < len; ++i) {
|
||
|
|
action.funcParams[i] = 'target' == action.params[i]
|
||
|
|
? targetObject[targetField]
|
||
|
|
: (new Function("return " + action.params[i]))();
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
action.funcParams = 'target' == action.params
|
||
|
|
? targetObject[targetField]
|
||
|
|
: (new Function("return " + action.params))();
|
||
|
|
}
|
||
|
|
assert('formula' in action && 'string' == typeof(action.formula));
|
||
|
|
// evaluate inline function to get value
|
||
|
|
action.func = new Function('value', 'params', "return " + action.formula);
|
||
|
|
}
|
||
|
|
scaled = action.func(scaled, action.funcParams);
|
||
|
|
}
|
||
|
|
if (targetObject[targetField] != scaled) {
|
||
|
|
if (modDraw) {
|
||
|
|
display.drawDirty = true;
|
||
|
|
} else {
|
||
|
|
display.paintDirty = true;
|
||
|
|
}
|
||
|
|
targetObject[targetField] = scaled;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
displayBackend(animationState.displayEngine, animationState.displayList);
|
||
|
|
|
||
|
|
if (stillAnimating) {
|
||
|
|
animationState.requestID = requestAnimationFrame(animateList);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function flattenPaint(paint) {
|
||
|
|
if (!paint.paint) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var parent = paints[paint.paint];
|
||
|
|
flattenPaint(parent);
|
||
|
|
for (var prop in parent) {
|
||
|
|
if (!(prop in paint)) {
|
||
|
|
paint[prop] = parent[prop];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
paint.paint = null;
|
||
|
|
}
|
||
|
|
|
||
|
|
function init(engine, keyframe) {
|
||
|
|
animationState.reset(engine);
|
||
|
|
setupPaint();
|
||
|
|
setupBackend(animationState.displayEngine);
|
||
|
|
keyframeInit(keyframe);
|
||
|
|
}
|
||
|
|
|
||
|
|
function keyframeInit(frame) {
|
||
|
|
animationState.reset();
|
||
|
|
addActions("_default", animationState.timeline);
|
||
|
|
addActions(frame, animationState.timeline);
|
||
|
|
for (var index = 0; index < animationState.timeline.length; ++index) {
|
||
|
|
animationState.timeline[index].position = index;
|
||
|
|
}
|
||
|
|
animationState.timeline.sort(function(a, b) {
|
||
|
|
if (a.time == b.time) {
|
||
|
|
return a.position - b.position;
|
||
|
|
}
|
||
|
|
return a.time - b.time;
|
||
|
|
});
|
||
|
|
keyframeBackendInit(animationState.displayEngine, animationState.displayList,
|
||
|
|
keyframes[frame][0]);
|
||
|
|
animationState.requestID = requestAnimationFrame(animateList);
|
||
|
|
}
|
||
|
|
|
||
|
|
function loopAddProp(action, propName) {
|
||
|
|
var funcStr = "";
|
||
|
|
var prop = action[propName];
|
||
|
|
if ('draw' != propName && isArray(prop)) {
|
||
|
|
funcStr += '[';
|
||
|
|
for (var index = 0; index < prop.length; ++index) {
|
||
|
|
funcStr += loopAddProp(prop, index);
|
||
|
|
if (index + 1 < prop.length) {
|
||
|
|
funcStr += ", ";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
funcStr += ']';
|
||
|
|
return funcStr;
|
||
|
|
}
|
||
|
|
assert("object" != typeof(prop));
|
||
|
|
var useString = "string" == typeof(prop) && isAlpha(prop.charCodeAt(0));
|
||
|
|
if (useString) {
|
||
|
|
funcStr += "'";
|
||
|
|
}
|
||
|
|
funcStr += prop;
|
||
|
|
if (useString) {
|
||
|
|
funcStr += "'";
|
||
|
|
}
|
||
|
|
return funcStr;
|
||
|
|
}
|
||
|
|
|
||
|
|
function loopOver(rec, timeline) {
|
||
|
|
var funcStr = "";
|
||
|
|
if (rec.for) {
|
||
|
|
funcStr += "for (" + rec.for[0] + "; " + rec.for[1] + "; " + rec.for[2] + ") {\n";
|
||
|
|
}
|
||
|
|
funcStr += " var time = " + ('time' in rec ? rec.time : 0) + ";\n";
|
||
|
|
funcStr += " var duration = " + ('duration' in rec ? rec.duration : 0) + ";\n";
|
||
|
|
funcStr += " var actions = [];\n";
|
||
|
|
var len = rec.actions.length;
|
||
|
|
for (var i = 0; i < len; ++i) {
|
||
|
|
funcStr += " var action" + i + " = {\n";
|
||
|
|
var action = rec.actions[i];
|
||
|
|
for (var p in action) {
|
||
|
|
funcStr += " '" + p + "':";
|
||
|
|
funcStr += loopAddProp(action, p);
|
||
|
|
funcStr += ",\n";
|
||
|
|
}
|
||
|
|
funcStr = funcStr.substring(0, funcStr.length - 2);
|
||
|
|
funcStr += "\n };\n";
|
||
|
|
funcStr += " actions.push(action" + i + ");\n";
|
||
|
|
}
|
||
|
|
funcStr += " timeline.push( { 'time':time, 'duration':duration, 'actions':actions,"
|
||
|
|
+ "'finalized':false } );\n";
|
||
|
|
if (rec.for) {
|
||
|
|
funcStr += "}\n";
|
||
|
|
}
|
||
|
|
var func = new Function('rec', 'timeline', funcStr);
|
||
|
|
func(rec, timeline);
|
||
|
|
}
|
||
|
|
|
||
|
|
function setupPaint() {
|
||
|
|
for (var prop in paints) {
|
||
|
|
flattenPaint(paints[prop]);
|
||
|
|
}
|
||
|
|
}
|