source: Dev/branches/rest-dojo-ui/client/dojox/gfx/fx.js @ 256

Last change on this file since 256 was 256, checked in by hendrikvanantwerpen, 13 years ago

Reworked project structure based on REST interaction and Dojo library. As
soon as this is stable, the old jQueryUI branch can be removed (it's
kept for reference).
File size: 7.4 KB
Line 
1define(["dojo/_base/lang", "./_base", "./matrix", "dojo/_base/Color", "dojo/_base/array", "dojo/_base/fx", "dojo/_base/connect"],
2  function(lang, g, m, Color, arr, fx, Hub){
3        var fxg = g.fx = {};
4        /*===== g = dojox.gfx; fxg = dojox.gfx.fx; =====*/
5
6        // Generic interpolators. Should they be moved to dojox.fx?
7
8        function InterpolNumber(start, end){
9                this.start = start, this.end = end;
10        }
11        InterpolNumber.prototype.getValue = function(r){
12                return (this.end - this.start) * r + this.start;
13        };
14
15        function InterpolUnit(start, end, units){
16                this.start = start, this.end = end;
17                this.units = units;
18        }
19        InterpolUnit.prototype.getValue = function(r){
20                return (this.end - this.start) * r + this.start + this.units;
21        };
22
23        function InterpolColor(start, end){
24                this.start = start, this.end = end;
25                this.temp = new Color();
26        }
27        InterpolColor.prototype.getValue = function(r){
28                return Color.blendColors(this.start, this.end, r, this.temp);
29        };
30
31        function InterpolValues(values){
32                this.values = values;
33                this.length = values.length;
34        }
35        InterpolValues.prototype.getValue = function(r){
36                return this.values[Math.min(Math.floor(r * this.length), this.length - 1)];
37        };
38
39        function InterpolObject(values, def){
40                this.values = values;
41                this.def = def ? def : {};
42        }
43        InterpolObject.prototype.getValue = function(r){
44                var ret = lang.clone(this.def);
45                for(var i in this.values){
46                        ret[i] = this.values[i].getValue(r);
47                }
48                return ret;
49        };
50
51        function InterpolTransform(stack, original){
52                this.stack = stack;
53                this.original = original;
54        }
55        InterpolTransform.prototype.getValue = function(r){
56                var ret = [];
57                arr.forEach(this.stack, function(t){
58                        if(t instanceof m.Matrix2D){
59                                ret.push(t);
60                                return;
61                        }
62                        if(t.name == "original" && this.original){
63                                ret.push(this.original);
64                                return;
65                        }
66                        if(!(t.name in m)){ return; }
67                        var f = m[t.name];
68                        if(typeof f != "function"){
69                                // constant
70                                ret.push(f);
71                                return;
72                        }
73                        var val = arr.map(t.start, function(v, i){
74                                                        return (t.end[i] - v) * r + v;
75                                                }),
76                                matrix = f.apply(m, val);
77                        if(matrix instanceof m.Matrix2D){
78                                ret.push(matrix);
79                        }
80                }, this);
81                return ret;
82        };
83
84        var transparent = new Color(0, 0, 0, 0);
85
86        function getColorInterpol(prop, obj, name, def){
87                if(prop.values){
88                        return new InterpolValues(prop.values);
89                }
90                var value, start, end;
91                if(prop.start){
92                        start = g.normalizeColor(prop.start);
93                }else{
94                        start = value = obj ? (name ? obj[name] : obj) : def;
95                }
96                if(prop.end){
97                        end = g.normalizeColor(prop.end);
98                }else{
99                        if(!value){
100                                value = obj ? (name ? obj[name] : obj) : def;
101                        }
102                        end = value;
103                }
104                return new InterpolColor(start, end);
105        }
106
107        function getNumberInterpol(prop, obj, name, def){
108                if(prop.values){
109                        return new InterpolValues(prop.values);
110                }
111                var value, start, end;
112                if(prop.start){
113                        start = prop.start;
114                }else{
115                        start = value = obj ? obj[name] : def;
116                }
117                if(prop.end){
118                        end = prop.end;
119                }else{
120                        if(typeof value != "number"){
121                                value = obj ? obj[name] : def;
122                        }
123                        end = value;
124                }
125                return new InterpolNumber(start, end);
126        }
127
128        fxg.animateStroke = function(/*Object*/ args){
129                // summary:
130                //      Returns an animation which will change stroke properties over time.
131                // example:
132                //      |       dojox.gfx.fx.animateStroke{{
133                //      |               shape: shape,
134                //      |               duration: 500,
135                //      |               color: {start: "red", end: "green"},
136                //      |               width: {end: 15},
137                //      |               join:  {values: ["miter", "bevel", "round"]}
138                //      |       }).play();
139                if(!args.easing){ args.easing = fx._defaultEasing; }
140                var anim = new fx.Animation(args), shape = args.shape, stroke;
141                Hub.connect(anim, "beforeBegin", anim, function(){
142                        stroke = shape.getStroke();
143                        var prop = args.color, values = {}, value, start, end;
144                        if(prop){
145                                values.color = getColorInterpol(prop, stroke, "color", transparent);
146                        }
147                        prop = args.style;
148                        if(prop && prop.values){
149                                values.style = new InterpolValues(prop.values);
150                        }
151                        prop = args.width;
152                        if(prop){
153                                values.width = getNumberInterpol(prop, stroke, "width", 1);
154                        }
155                        prop = args.cap;
156                        if(prop && prop.values){
157                                values.cap = new InterpolValues(prop.values);
158                        }
159                        prop = args.join;
160                        if(prop){
161                                if(prop.values){
162                                        values.join = new InterpolValues(prop.values);
163                                }else{
164                                        start = prop.start ? prop.start : (stroke && stroke.join || 0);
165                                        end = prop.end ? prop.end : (stroke && stroke.join || 0);
166                                        if(typeof start == "number" && typeof end == "number"){
167                                                values.join = new InterpolNumber(start, end);
168                                        }
169                                }
170                        }
171                        this.curve = new InterpolObject(values, stroke);
172                });
173                Hub.connect(anim, "onAnimate", shape, "setStroke");
174                return anim; // dojo.Animation
175        };
176
177        fxg.animateFill = function(/*Object*/ args){
178                // summary:
179                //      Returns an animation which will change fill color over time.
180                //      Only solid fill color is supported at the moment
181                // example:
182                //      |       dojox.gfx.fx.animateFill{{
183                //      |               shape: shape,
184                //      |               duration: 500,
185                //      |               color: {start: "red", end: "green"}
186                //      |       }).play();
187                if(!args.easing){ args.easing = fx._defaultEasing; }
188                var anim = new fx.Animation(args), shape = args.shape, fill;
189                Hub.connect(anim, "beforeBegin", anim, function(){
190                        fill = shape.getFill();
191                        var prop = args.color, values = {};
192                        if(prop){
193                                this.curve = getColorInterpol(prop, fill, "", transparent);
194                        }
195                });
196                Hub.connect(anim, "onAnimate", shape, "setFill");
197                return anim; // dojo.Animation
198        };
199
200        fxg.animateFont = function(/*Object*/ args){
201                // summary:
202                //      Returns an animation which will change font properties over time.
203                // example:
204                //      |       dojox.gfx.fx.animateFont{{
205                //      |               shape: shape,
206                //      |               duration: 500,
207                //      |               variant: {values: ["normal", "small-caps"]},
208                //      |               size:  {end: 10, units: "pt"}
209                //      |       }).play();
210                if(!args.easing){ args.easing = fx._defaultEasing; }
211                var anim = new fx.Animation(args), shape = args.shape, font;
212                Hub.connect(anim, "beforeBegin", anim, function(){
213                        font = shape.getFont();
214                        var prop = args.style, values = {}, value, start, end;
215                        if(prop && prop.values){
216                                values.style = new InterpolValues(prop.values);
217                        }
218                        prop = args.variant;
219                        if(prop && prop.values){
220                                values.variant = new InterpolValues(prop.values);
221                        }
222                        prop = args.weight;
223                        if(prop && prop.values){
224                                values.weight = new InterpolValues(prop.values);
225                        }
226                        prop = args.family;
227                        if(prop && prop.values){
228                                values.family = new InterpolValues(prop.values);
229                        }
230                        prop = args.size;
231                        if(prop && prop.units){
232                                start = parseFloat(prop.start ? prop.start : (shape.font && shape.font.size || "0"));
233                                end = parseFloat(prop.end ? prop.end : (shape.font && shape.font.size || "0"));
234                                values.size = new InterpolUnit(start, end, prop.units);
235                        }
236                        this.curve = new InterpolObject(values, font);
237                });
238                Hub.connect(anim, "onAnimate", shape, "setFont");
239                return anim; // dojo.Animation
240        };
241
242        fxg.animateTransform = function(/*Object*/ args){
243                // summary:
244                //      Returns an animation which will change transformation over time.
245                // example:
246                //      |       dojox.gfx.fx.animateTransform{{
247                //      |               shape: shape,
248                //      |               duration: 500,
249                //      |               transform: [
250                //      |                       {name: "translate", start: [0, 0], end: [200, 200]},
251                //      |                       {name: "original"}
252                //      |               ]
253                //      |       }).play();
254                if(!args.easing){ args.easing = fx._defaultEasing; }
255                var anim = new fx.Animation(args), shape = args.shape, original;
256                Hub.connect(anim, "beforeBegin", anim, function(){
257                        original = shape.getTransform();
258                        this.curve = new InterpolTransform(args.transform, original);
259                });
260                Hub.connect(anim, "onAnimate", shape, "setTransform");
261                return anim; // dojo.Animation
262        };
263       
264        return fxg;
265});
Note: See TracBrowser for help on using the repository browser.