123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265 |
- define("dojox/gfx/fx", ["dojo/_base/lang", "./_base", "./matrix", "dojo/_base/Color", "dojo/_base/array", "dojo/_base/fx", "dojo/_base/connect"],
- function(lang, g, m, Color, arr, fx, Hub){
- var fxg = g.fx = {};
- /*===== g = dojox.gfx; fxg = dojox.gfx.fx; =====*/
- // Generic interpolators. Should they be moved to dojox.fx?
- function InterpolNumber(start, end){
- this.start = start, this.end = end;
- }
- InterpolNumber.prototype.getValue = function(r){
- return (this.end - this.start) * r + this.start;
- };
- function InterpolUnit(start, end, units){
- this.start = start, this.end = end;
- this.units = units;
- }
- InterpolUnit.prototype.getValue = function(r){
- return (this.end - this.start) * r + this.start + this.units;
- };
- function InterpolColor(start, end){
- this.start = start, this.end = end;
- this.temp = new Color();
- }
- InterpolColor.prototype.getValue = function(r){
- return Color.blendColors(this.start, this.end, r, this.temp);
- };
- function InterpolValues(values){
- this.values = values;
- this.length = values.length;
- }
- InterpolValues.prototype.getValue = function(r){
- return this.values[Math.min(Math.floor(r * this.length), this.length - 1)];
- };
- function InterpolObject(values, def){
- this.values = values;
- this.def = def ? def : {};
- }
- InterpolObject.prototype.getValue = function(r){
- var ret = lang.clone(this.def);
- for(var i in this.values){
- ret[i] = this.values[i].getValue(r);
- }
- return ret;
- };
- function InterpolTransform(stack, original){
- this.stack = stack;
- this.original = original;
- }
- InterpolTransform.prototype.getValue = function(r){
- var ret = [];
- arr.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 = arr.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 Color(0, 0, 0, 0);
- function getColorInterpol(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);
- }
- function getNumberInterpol(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);
- }
- fxg.animateStroke = function(/*Object*/ args){
- // summary:
- // Returns an 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 = fx._defaultEasing; }
- var anim = new fx.Animation(args), shape = args.shape, stroke;
- Hub.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);
- });
- Hub.connect(anim, "onAnimate", shape, "setStroke");
- return anim; // dojo.Animation
- };
- fxg.animateFill = function(/*Object*/ args){
- // summary:
- // Returns an 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 = fx._defaultEasing; }
- var anim = new fx.Animation(args), shape = args.shape, fill;
- Hub.connect(anim, "beforeBegin", anim, function(){
- fill = shape.getFill();
- var prop = args.color, values = {};
- if(prop){
- this.curve = getColorInterpol(prop, fill, "", transparent);
- }
- });
- Hub.connect(anim, "onAnimate", shape, "setFill");
- return anim; // dojo.Animation
- };
- fxg.animateFont = function(/*Object*/ args){
- // summary:
- // Returns an 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, units: "pt"}
- // | }).play();
- if(!args.easing){ args.easing = fx._defaultEasing; }
- var anim = new fx.Animation(args), shape = args.shape, font;
- Hub.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.units){
- 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.units);
- }
- this.curve = new InterpolObject(values, font);
- });
- Hub.connect(anim, "onAnimate", shape, "setFont");
- return anim; // dojo.Animation
- };
- fxg.animateTransform = function(/*Object*/ args){
- // summary:
- // Returns an 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 = fx._defaultEasing; }
- var anim = new fx.Animation(args), shape = args.shape, original;
- Hub.connect(anim, "beforeBegin", anim, function(){
- original = shape.getTransform();
- this.curve = new InterpolTransform(args.transform, original);
- });
- Hub.connect(anim, "onAnimate", shape, "setTransform");
- return anim; // dojo.Animation
- };
-
- return fxg;
- });
|