Mootools 1.4 source code analysis-Fx

/*
---

Name: FX

Description: contains the basic animation logic to be extended by all other FX classes.

License: Mit-style license.

Requires: [chain, events, options]

Provides: FX

...
*/

(Function (){

/**
* @ FX: this class is generally not used independently. It is used to provide basic function classes for the FX series. All other FX series classes inherit this class.
**/
VaR FX = This. FX = new class ({

Implements: [chain, events, options],

// # Region-constructor-

/**
* @ Events:
* @ Event start-(function) triggered when the special effect starts to be executed
* @ Event cancel-(function) triggered when the special effect is manually stopped
* @ Event complete-(function) triggered after the special effect is executed
* @ Event chaincomplete-(function) when the link option is 'chain', this event is triggered after the special effect chain is executed.
* @ Event stop-(function) triggered when the stop method is executed before the special effect is executed.
**/

/**
* @ Optoins:
* @ Option FPS-(number: 60 by default) number of second frames of the animation effect
* @ Option unit-(string: The default value is false) the unit of measurement (for example, 'px ', 'em', or '% ').
* @ Option duration-(number: 500 by default) allows you to define the animation duration. The duration and speed are different, so if you want an object to move 100 pixels in one second,
* It will be slower than an object that moves 1000 pixels per second. You can enter a number (in milliseconds) or use the following predefined string:
* 'Short '-250 ms
* 'Normal'-500 ms
* 'Long'-1000 ms
* @ Option frames-(number) specifies the total number of frames executed by the animation effect. The default value is null for automatic match.
* @ Option frameskip-(Boolean: true by default) Specifies whether to skip the frames to be executed during this time period when the execution time of a frame is greater than the interval between frames.
* @ Option link-(string: Ignore by default) can be: 'ignore', 'cancel', or 'chain'
* 'Ignore'-when the special effect is being executed, the method that starts to call the special effect again will be ignored (this is synonymous with the option 'wait)
* 'Cancel'-when the special effect is being executed, the method that starts to call the special effect again will immediately cancel the currently executed special effect and start executing the new special effect.
* 'Chain'-when the special effect is being executed, the method that starts to call the special effect again will execute the new special effect link after the current special effect is executed.
* @ Option transition-(function: the default value is FX. transitions. Sine. easeinout). For details, see FX. transitions. You can also use strings in the following format:
* Transition [: in] [: Out]-Example: 'linear ', 'quad: in', 'back: in', 'bounce: out', 'elastic: out', 'sine: In: out'
**/
Options :{
/*
Onstart: nil,
Oncancel: nil,
Oncomplete: nil,
*/
FPS: 60,
Unit: false,
Duration: 500,
Frames: NULL,
Frameskip: True,
Link: 'ignore'
},

Initialize: function (options ){
This. Subject = This. Subject | this;
This. setoptions (options );
},

// # Endregion

/**
* @ Method: gettransition
* @ Returns: (function)-special effect transform equation
* @ Description: obtain the special effect equation to be executed for an animation effect.
**/
Gettransition: function (){
Return function (p ){
Return-(math. Cos (math. Pi * P)-1)/2;
};
},

/**
* @ Method: Step
* @ Param now-(mixed) special effect value
* @ Returns: (function)-special effect transform equation
* @ Description: The operations performed by animation effects in each step.
**/
Step: function (now ){
If (this. Options. frameskip ){
// First obtain the current time minus the time when the last frame is executed. The interval between the two frames is obtained. The number of frames that can be executed at the normal frame interval is calculated.
VaR diff = (this. Time! = NULL )? (Now-this. Time): 0,
Frames = diff/This. frameinterval;
// Stores the time when the current frame is executed
This. Time = now;
// Accumulate the number of frames executed
This. Frame + = frames;
} Else {
This. Frame ++;
}

// Determine whether the current frame is the last frame of the animation effect.
If (this. Frame <this. Frames ){
// Calculate the ratio factor to be changed when the animation effect is run on the current frame through the special effect equation
VaR Delta = This. Transition (this. Frame/This. Frames );
This. Set (this. Compute (this. From, this. To, Delta ));
} Else {
// Animation effect execution completed
This. Frame = This. frames;
This. Set (this. Compute (this. From, this. To, 1 ));
This. Stop ();
}
},

/**
* @ Method: Set
* @ Param value-(mixed) special effect value
* @ Description: used to set the special effect value. This method is called for each 'step' during the special effect transformation process. It can also be called manually and reserved as a derived class.
**/
Set: function (now ){
Return now;
},

/**
* @ Method: compute
* @ Param from-(mixed) the starting value of the special effect.
* @ Param to-(mixed) The end value of the special effect.
* @ Param Delta-(mixed) proportional factor required for special effect changes
* @ Description: calculates the target value based on the initial value, end value, and proportional factor.
**/
Compute: function (from, to, Delta ){
Return FX. Compute (from, to, Delta );
},

/**
* @ Method: Check
* @ Parameters-consistent with the parameters of the Start Method
* @ Returns: (Boolean)-if the start method can be continued, true is returned; otherwise, false is returned.
* @ Description: determines whether the start method can be executed again when the special effect is being executed.
**/
Check: function (){
// Returns true if the special effect is not running.
If (! This. isrunning () {return true ;}
Switch (this. Options. Link ){
Case 'cancel': // do not wait for the running special effect. Cancel and start again.
This. Cancel ();
Return true;

Case 'chain': // wait until the current special effect is completed before running the new special effect.
This. Chain (this. Caller. Pass (arguments, this ));
Return false;
}
Return false;
},

/**
* @ Method: Start
* @ Param from-(mixed) the starting value of the special effect. If only one parameter is provided, this value is used as the end value.
* @ Param to-(mixed, optional) end value of the special effect
* @ Returns: (object)-current FX instance
* @ Description: Start the special effect Transformation (and trigger the 'start' event)
**/
Start: function (from, ){
// Check whether the start method can continue execution
If (! This. Check (from, to) {return this ;}

/**
# Bitter melon
#2011-09-25
# Replace this. options with the local Variable _ options
**/
VaR _ Options = This. options;

This. From = from;
This. To =;
This. Frame = (_ options. frameskip )? 0:-1;
This. Time = NULL;
// Obtain the transform equation for special effect execution
This. Transition = This. gettransition ();
VaR frames = _ options. frames,
FPS = _ options. FPS,
Duration = _ options. duration;
// Optional parameter duration can be numeric or string type
This. Duration = FX. durations [duration] | duration. toint ();
// Interval between frames for obtaining animation effects, in milliseconds
This. frameinterval = 1000/FPs;
// Calculate the total number of frames executed by animation Effects
This. Frames = frames | math. Round (this. Duration/This. frameinterval );
// Trigger the 'start' event
This. fireevent ('start', this. Subject );
Pushinstance. Call (this, FPS );
Return this;
},

/**
* @ Method: Stop
* @ Returns: (object)-current FX instance
* @ Description: stops the execution of a special effect.
**/
Stop: function (){
If (this. isrunning ()){
This. Time = NULL;
Pullinstance. Call (this, this. Options. FPS );
If (this. Frames = This. Frame ){
This. fireevent ('complete', this. Subject );
If (! This. callchain ()){
This. fireevent ('chaincomplete', this. Subject );
}
} Else {
This. fireevent ('stop', this. Subject );
}
}
Return this;
},

/**
* @ Method: Cancel
* @ Returns: (object)-current FX instance
* @ Description: cancels the execution of a special effect (and triggers the 'cancel' event)
**/
Cancel: function (){
If (this. isrunning ()){
This. Time = NULL;
Pullinstance. Call (this, this. Options. FPS );
This. Frame = This. frames;
This. fireevent ('cancel', this. Subject). clearchain ();
}
Return this;
},

/**
* @ Method: Pause
* @ Returns: (object)-current FX instance
* @ Description: Pause the effect of the current execution.
**/
Pause: function (){
If (this. isrunning ()){
This. Time = NULL;
Pullinstance. Call (this, this. Options. FPS );
}
Return this;
},

/**
* @ Method: Pause
* @ Return: (object)-current FX instance
* @ Description: resume the special effect during execution pause.
* @ Remark: This method is effective only when the special effect is paused. Otherwise, this method will be ignored.
**/
Resume: function (){
If (this. Frame <this. Frames )&&! This. isrunning ()){
Pushinstance. Call (this, this. Options. FPS );
}
Return this;
},

/**
* @ Method: isrunning
* @ Return: (Boolean) special effect running status
* @ Description: checks whether the special effect is running.
**/
Isrunning: function (){
VaR list = instances [This. Options. FPS];
Return list & list. Contains (this );
}

});

FX. compute = function (from, to, Delta ){
Return (to-from) * Delta + from;
};

// Preset special effect interval in milliseconds. When the optional parameter duration is a string, the FX. durations object is called to obtain the special effect interval in milliseconds.
FX. durations = {'short ': 250, 'normal': 500, 'long': 1000 };

// Global timers
// The instances object literally caches all FX instance objects. The keys in all its key-value pairs correspond to an FPS value, the value is an array containing animation effect instances with the same FPS.
// Id value returned by the setinterval () method in the timers object Cache
VaR instances = {},
Timers = {};

/**
* @ Method: loop
* @ Description: traverses the animation effect instance array and executes the animation effect.
**/
VaR loop = function (){
VaR now = date. Now ();
For (VAR I = This. length; I --;){
VaR instance = This [I];
If (Instance) {instance. Step (now );}
}
};

/**
* @ Method: pushinstance
* @ Description: traverses the animation effect instance array and executes the animation effect.
**/
VaR pushinstance = function (FPS ){
// Obtain the cached animation effect array corresponding to the parameter FPS. If not, create a new key-value storage array for the instances object.
VaR list = instances [FPS] | (instances [FPS] = []);
// Cache FX Instance Object
List. Push (this );
If (! Timers [FPS]) {
// Set the timer
Timers [FPS] = loop. periodical (math. Round (1000/FPs), list );
}
};

/**
* @ Method: pullinstance
* @ Param from-(number) number of second frames of the animation effect instance to be stopped
* @ Description: stops running an animation effect instance.
**/
VaR pullinstance = function (FPS ){
// Obtain the cached animation effect array corresponding to the parameter FPS
VaR list = instances [FPS];
If (list ){
// Delete the FX instance object running the pullinstance function from the array.
List. Erase (this );
If (! List. Length & timers [FPS]) {
// If the array is empty, delete the array in the instances object.
Delete instances [FPS];
// Clear the timer
Timers [FPS] = clearinterval (timers [FPS]);
}
}
};

})();

Mootools 1.4 source code analysis-Fx