diff options
Diffstat (limited to 'includes/js/dojox/gfx/fx.js')
-rw-r--r-- | includes/js/dojox/gfx/fx.js | 281 |
1 files changed, 281 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx/fx.js b/includes/js/dojox/gfx/fx.js new file mode 100644 index 0000000..2b576d6 --- /dev/null +++ b/includes/js/dojox/gfx/fx.js @@ -0,0 +1,281 @@ +if(!dojo._hasResource["dojox.gfx.fx"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.gfx.fx"] = true; +dojo.provide("dojox.gfx.fx"); + +dojo.require("dojox.gfx.matrix"); + +(function(){ + var d = dojo, g = dojox.gfx, m = g.matrix; + + // Generic interpolators. Should they be moved to dojox.fx? + + var InterpolNumber = function(start, end){ + this.start = start, this.end = end; + }; + d.extend(InterpolNumber, { + getValue: function(r){ + return (this.end - this.start) * r + this.start; + } + }); + + var InterpolUnit = function(start, end, unit){ + this.start = start, this.end = end; + this.unit = unit; + }; + d.extend(InterpolUnit, { + getValue: function(r){ + return (this.end - this.start) * r + this.start + this.unit; + } + }); + + var InterpolColor = function(start, end){ + this.start = start, this.end = end; + this.temp = new dojo.Color(); + }; + d.extend(InterpolColor, { + getValue: function(r){ + return d.blendColors(this.start, this.end, r, this.temp); + } + }); + + var InterpolValues = function(values){ + this.values = values; + this.length = values.length; + }; + d.extend(InterpolValues, { + getValue: function(r){ + return this.values[Math.min(Math.floor(r * this.length), this.length - 1)]; + } + }); + + var InterpolObject = function(values, def){ + this.values = values; + this.def = def ? def : {}; + }; + d.extend(InterpolObject, { + getValue: function(r){ + var ret = dojo.clone(this.def); + for(var i in this.values){ + ret[i] = this.values[i].getValue(r); + } + return ret; + } + }); + + var InterpolTransform = function(stack, original){ + this.stack = stack; + this.original = original; + }; + d.extend(InterpolTransform, { + getValue: function(r){ + var ret = []; + dojo.forEach(this.stack, function(t){ + if(t instanceof m.Matrix2D){ + ret.push(t); + return; + } + if(t.name == "original" && this.original){ + ret.push(this.original); + return; + } + if(!(t.name in m)){ return; } + var f = m[t.name]; + if(typeof f != "function"){ + // constant + ret.push(f); + return; + } + var val = dojo.map(t.start, function(v, i){ + return (t.end[i] - v) * r + v; + }), + matrix = f.apply(m, val); + if(matrix instanceof m.Matrix2D){ + ret.push(matrix); + } + }, this); + return ret; + } + }); + + var transparent = new d.Color(0, 0, 0, 0); + + var getColorInterpol = function(prop, obj, name, def){ + if(prop.values){ + return new InterpolValues(prop.values); + } + var value, start, end; + if(prop.start){ + start = g.normalizeColor(prop.start); + }else{ + start = value = obj ? (name ? obj[name] : obj) : def; + } + if(prop.end){ + end = g.normalizeColor(prop.end); + }else{ + if(!value){ + value = obj ? (name ? obj[name] : obj) : def; + } + end = value; + } + return new InterpolColor(start, end); + }; + + var getNumberInterpol = function(prop, obj, name, def){ + if(prop.values){ + return new InterpolValues(prop.values); + } + var value, start, end; + if(prop.start){ + start = prop.start; + }else{ + start = value = obj ? obj[name] : def; + } + if(prop.end){ + end = prop.end; + }else{ + if(typeof value != "number"){ + value = obj ? obj[name] : def; + } + end = value; + } + return new InterpolNumber(start, end); + }; + + g.fx.animateStroke = function(/*Object*/ args){ + // summary: + // returns the animation, which will change stroke properties over time + // example: + // | dojox.gfx.fx.animateStroke{{ + // | shape: shape, + // | duration: 500, + // | color: {start: "red", end: "green"}, + // | width: {end: 15}, + // | join: {values: ["miter", "bevel", "round"]} + // | }).play(); + if(!args.easing){ args.easing = d._defaultEasing; } + var anim = new d._Animation(args), shape = args.shape, stroke; + d.connect(anim, "beforeBegin", anim, function(){ + stroke = shape.getStroke(); + var prop = args.color, values = {}, value, start, end; + if(prop){ + values.color = getColorInterpol(prop, stroke, "color", transparent); + } + prop = args.style; + if(prop && prop.values){ + values.style = new InterpolValues(prop.values); + } + prop = args.width; + if(prop){ + values.width = getNumberInterpol(prop, stroke, "width", 1); + } + prop = args.cap; + if(prop && prop.values){ + values.cap = new InterpolValues(prop.values); + } + prop = args.join; + if(prop){ + if(prop.values){ + values.join = new InterpolValues(prop.values); + }else{ + start = prop.start ? prop.start : (stroke && stroke.join || 0); + end = prop.end ? prop.end : (stroke && stroke.join || 0); + if(typeof start == "number" && typeof end == "number"){ + values.join = new InterpolNumber(start, end); + } + } + } + this.curve = new InterpolObject(values, stroke); + }); + d.connect(anim, "onAnimate", shape, "setStroke"); + return anim; + }; + + g.fx.animateFill = function(/*Object*/ args){ + // summary: + // returns the animation, which will change fill color over time, + // only solid fill color is supported at the moment + // example: + // | dojox.gfx.fx.animateFill{{ + // | shape: shape, + // | duration: 500, + // | color: {start: "red", end: "green"} + // | }).play(); + if(!args.easing){ args.easing = d._defaultEasing; } + var anim = new d._Animation(args), shape = args.shape, fill; + d.connect(anim, "beforeBegin", anim, function(){ + fill = shape.getFill(); + var prop = args.color, values = {}; + if(prop){ + this.curve = getColorInterpol(prop, fill, "", transparent); + } + }); + d.connect(anim, "onAnimate", shape, "setFill"); + return anim; + }; + + g.fx.animateFont = function(/*Object*/ args){ + // summary: + // returns the animation, which will change font properties over time + // example: + // | dojox.gfx.fx.animateFont{{ + // | shape: shape, + // | duration: 500, + // | variant: {values: ["normal", "small-caps"]}, + // | size: {end: 10, unit: "pt"} + // | }).play(); + if(!args.easing){ args.easing = d._defaultEasing; } + var anim = new d._Animation(args), shape = args.shape, font; + d.connect(anim, "beforeBegin", anim, function(){ + font = shape.getFont(); + var prop = args.style, values = {}, value, start, end; + if(prop && prop.values){ + values.style = new InterpolValues(prop.values); + } + prop = args.variant; + if(prop && prop.values){ + values.variant = new InterpolValues(prop.values); + } + prop = args.weight; + if(prop && prop.values){ + values.weight = new InterpolValues(prop.values); + } + prop = args.family; + if(prop && prop.values){ + values.family = new InterpolValues(prop.values); + } + prop = args.size; + if(prop && prop.unit){ + start = parseFloat(prop.start ? prop.start : (shape.font && shape.font.size || "0")); + end = parseFloat(prop.end ? prop.end : (shape.font && shape.font.size || "0")); + values.size = new InterpolUnit(start, end, prop.unit); + } + this.curve = new InterpolObject(values, font); + }); + d.connect(anim, "onAnimate", shape, "setFont"); + return anim; + }; + + g.fx.animateTransform = function(/*Object*/ args){ + // summary: + // returns the animation, which will change transformation over time + // example: + // | dojox.gfx.fx.animateTransform{{ + // | shape: shape, + // | duration: 500, + // | transform: [ + // | {name: "translate", start: [0, 0], end: [200, 200]}, + // | {name: "original"} + // | ] + // | }).play(); + if(!args.easing){ args.easing = d._defaultEasing; } + var anim = new d._Animation(args), shape = args.shape, original; + d.connect(anim, "beforeBegin", anim, function(){ + original = shape.getTransform(); + this.curve = new InterpolTransform(args.transform, original); + }); + d.connect(anim, "onAnimate", shape, "setTransform"); + return anim; + }; +})(); + +} |