- Author:
- David Nickerson <david.nickerson@gmail.com>
- Date:
- 2021-09-17 15:50:49+12:00
- Desc:
- tweak html formatting
- Permanent Source URI:
- https://models.fieldml.org/workspace/a1/rawfile/1b3862589abf79ae9119ee0b5e99a8b785d762e1/dojo-presentation/js/dojo/dojox/gfx/fx.js
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;
};
})();
