json based animation toy

experimental/docs/animationCommon.js

+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]);
+    }
+}