fx.js 7.4 KB

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