Using this program can achieve many common animation effects, including size transformation, position transformation, fade fade and so on.
Program Description: The principle of the gradient effect is to use the timer constantly set the value, if you want to slow down the effect of setting a step (detailed look at JavaScript spring effect).
This is just a combination of the properties that can be changed (transparency, width, height, left and top), with the same gradient series (step) to synchronize the gradient to form multiple properties at the same time the effect of the gradient.
Here are some useful places to talk about:
"Final Style"
The final style is also mentioned in the Benquan capture of the JavaScript image cutting effect, and the width of the border in the final style must be subtracted when the width is set with the data obtained by offset.
Here I use the MUXRWC to implement the Currentstyle method under FF so that both FF and IE can get the final style from Currentstyle:
Copy Code code as follows:
if (!isie) {
htmlelement.prototype.__definegetter__ ("Currentstyle", function () {
Return This.ownerDocument.defaultView.getComputedStyle (this, null);
});
}
Use this to get the border width:
Copy Code code as follows:
This._xborder = function () {return (parseint (obj.currentStyle.borderLeftWidth) + parseint ( Obj.currentStyle.borderRightWidth)); }
This._yborder = function () {return (parseint (obj.currentStyle.borderTopWidth) + parseint ( Obj.currentStyle.borderBottomWidth)); }
"Width or Height first"
Width or height First, you actually do one of the gradients, and then you perform another gradient after you finish.
The gradient program returns a bool value that indicates whether the gradient is complete after a gradient has been performed, which can be used to:
Copy Code code as follows:
This. SetWidth () && this. SetHeight ();
Due to the characteristics of &&, when this. SetWidth () returns True to execute this. SetHeight (), this is also a good technique.
In order to synchronize a gradient, another gradient uses twice times the step size:
Copy Code code as follows:
This. Step = 2*this. Step;
This. SetOpacity (); This. Settop (); This. Setleft ();
This. Step = this. STEP/2;
This will make the width or high priority effect.
"Fixed-point gradient"
To start with the principle, for example, with the width of the midpoint as the reference point, you can imagine if the width of the reduction of N, so long as left relative increase n*0.5 (ie N/2),
You can then make a midpoint-centric transformation (and, of course, set the transform object to relative or absolute positioning first).
So how did this "0.5" come from? A bit of mathematical knowledge should know that the gradient object to the left to the transformation point and the total width of the gradient object than
In the program, save the value with Width.pos, and calculate the position of the transformation point before the transformation:
this._x = This._obj.offsetleft + this._obj.offsetwidth * this. Width.pos;
Each transformation is reset to left according to this position and width:
This._obj.style.left = This._x-this._obj.offsetwidth * this. Width.pos + "px";
It may be said that directly on the original left based on the transformation width *width.pos not the same?
The problem, however, is that the values obtained after multiple transformations are calculated (many times before reaching the target) are inaccurate.
Because many decimal places are ignored in the transformation calculation, the more the result of the calculation, the greater the discrepancy,
So first set the transformation position reference value (_x), so no matter how many times to calculate the transformation position will not go bit.
By the same token, you can set a different width.pos (including negative numbers and more than 1 numbers) and Height.pos to a central gradient at any point.
There is the design of the program also spent a lot of thought, in order to improve the degree of integration, made a fadestruct structure, where run, start, end, target property is whether the gradient, start value, ending value, target value.
Use the Object.extend two times to set the default value, you can see the program in detail.
Instructions for use:
Only one of the necessary parameters is a gradient object, but only the gradient object has no effect, you must set additional properties:
Opacity: Transparent gradient parameters
Height: High gradient parameter
Width: Widths Gradient parameters
Top:top Gradient Parameters
Left:left Gradient Parameters
step:10,//Rate of change
time:10,//change Interval
Mode: "Both",//gradient order
show:false,//whether the state is open by default
Onfinish:function () {}//execution when completed
Among them opacity, Height, Width, top and left are more special, is fadestruct structure
Example of this object:
Copy Code code as follows:
var f = new Fade ("Idfade", {show:true,
Opacity: {run:true},
Height: {run:true},
Width: {run:true, pos:. 5},
Top: {run:true, end:70}
});
Setting run to true means that the transform is turned on, start and end are the starting and ending values, and the POS is the transformation location attribute of height and width.
More detailed application can see the example.
current 1/2 page
1 2 Next read the full text
