 |
 |
 |
 |
 |
 |
Free PHP Scripts
DbCon
vegUISiteKit - The Effect Framework
written by vegu on 16 Mar, 2007 10:37:30
The effect framework library of the VSK is the foundation library that adds certain methods to the VSK_Node object that enable the development of cool effects that you can use on your html nodes.Effects themselves are processed by a timer that runs at a fairly short interval. I decided to have a global timer that would handle all effects on all nodes instead of creating a new timer object for every effect, this should solve problems with timer limitations on certain systems.
You can specify the interval of that timer by setting the VSK_FX_INTERVAL global variable somewhere in your code. By default it is set to 25 ms which means the effects are processed about 40 times a second. Depending on the amount of effects you are including at the same time it might be wise to up the number to 50 (20 times per second) which still allows for fairly smooth animation.
Example:
code: jsVSK_FX_INTERVAL = 40;
The methods added by the effect library to the VSK_Node object are:
fx_start():
Starts the global effect timer, it is called automatically whenever a new effect is initialized on any node.
fx_stop():
Stops the global effect timer, it is called automatically whenever there are no effects initialized on any node.
fx_init():
Initialize an effect on the node.
fx_halt():
Halts an effect - identified by effect id - that is currently active on the node.
Most of these functions work automatically and you should hardly ever need to call them by hand.
Initializing an effect
The effect framework itself does not provide any effects, it just serves as a framework that the various effect libraries can then utilize to get the job done.
Whenever you include an effect library (for example the fade effect) the VSK_Node object will be extended by certain functions. In the case of the fade library it gets two new methods: fx_fade_in and fx_fade_out.
You can then simply call the appropriate method with it's various arguments - which obviously vary depending on the effect :)
Example:
code: js/* control the node the node */
var n = v(myNode);
/* initialize the fade out effect on the node */
n.fx_fade_out(1000);
In this example the argument submitted to the fx_fade_out method is simply the time of the effect, meaning our node will take about a second to fade out.
You will be able to find a more in depth tutorial on the usage of the various effect libraries on this side.
Creating your own effects
To create your own effect simply add a method to the VSK_Node using prototype. The method itself will create an event object that holds a function to process the event and can also hold various properties of the event. The event object itself is not predefined and will be initialized as a generic javascript object.
The example below is taken straight from the fade effect library and is the fx_fade_in effect.
Example:
code: jsVSK_Node.prototype.fx_fade_in = function(n, limit) {
/* make sure that the VSK_Node object is controlling a HTML node
* before proceeding
*/
if(!this.b)
return;
/* create a reference to this object so we can use it l
* later in the effect object
*/
var N = this.b;
/* assign a default value to the limit if it isnt set */
if(!limit)
var limit = 100;
/* Creat the effect object */
var E = {
/* the main property of the effect object points to
* the function that will be executed everytime
* the effect is processed.
*/
main : function() {
/* calculate the number that should be
* added to the node's transparency value
* every time this function is called by taking
* the global effect timer's interval into account
*
* This produces a smooth animation
*/
var interval = 100 / (n / VSK_FX_INTERVAL);
/* check if the limit is hit (which is 100 by default)
* if it was not hit, add the calculated value to
* the node's transparency
*
* else halt the effect since the node is now fully
* transparent (or the limit is reached)
*/
if(v(N).t() < limit)
v(N).fade(v(N).t()+interval);
else
v(N).fx_halt('fade_in');
}
};
/* Initialize the effect on the node, the first
* argument is the unique id of the effect 'fade_in',
* the second argument is the effect object that we
* created and the last argument is an array holding
* id's of colliding effects (explained further down)
*/
this.fx_init('fade_in',E,['fade_out']);
/* return the effect object, this is important so
* we can set the onhalt property later on if we
* want / need to do
*/
return E;
};
Because we return the created effect object it means that we can add properties to it. Such as the onhalt event that gets fired when the effect is done and about to be removed from the node.
Example:
code: jsn.fx_fade_in(1000).onhalt = function() { alert('Faded completly in!'); };
Sequences
The effect framework also provides a sequence object that you can use to create effect sequences that can be looped infinitely
To use an effect sequence you first must create a new sequence objec. The argument passed to the constructor function is the node that the effects in the sequence will affect.
Example:
code: jsvar n = v(myNode);
var sequence = new VSK_FX_Sequence(n);
Then you define the body property of the sequence object to point to the sequence function. This function will be called over and over as soon as the sequence's loop() method is called.
Example:
code: js
/* the n argument of the function points to the node that
* the effects in the sequence will affect
*/
sequence.body = function(n) {
n.fx_fade_out(1000).onhalt = function() {
/* note on the last effect in the chain we do not set the onhalt
* property, but set the sequence property instead this causes
* the sequence to start over after the effect is done
*/
n.fx_fade_in(1000).sequence = sequence;
};
};
sequence.loop();
Related Posts
- No related posts
Your Comment
Comments
No comments yet.
