MooTools1.4 source code analysis-Fx. Tween

Mootools1.4-Fx. Tween class source code analysis, if you understand the error, please correct:/* --- name: Fx. Tweendescription: FormerlyFx. Style, effecttotransitionanyCSSpropertyforanelement. license: MIT-style...

Mootools1.4-Fx. Tween class source code analysis, if you understand the error, please correct:
 
/*
---
 
Name: Fx. Tween
 
Description: Formerly Fx. Style, effect to transition any CSS property for an element.
 
License: MIT-style license.
 
Requires: Fx. CSS
 
Provides: [Fx. Tween, Element. fade, Element. highlight]
 
Source code analysis: bitter Bitter Gourd (http://hmking.blog.51cto.com)
 
...
*/
 
// # Region-Fx. Tween-
 
/**
* @ Fx. Tween: executes a special effect on a single style attribute of an element.
**/
Fx. Tween = new Class ({
 
// Inherit from Fx. CSS
Extends: Fx. CSS,
 
/**
* @ Method: initialize
* @ Param element-(mixed) element id or reference
* @ Param options-(object, optional) All available options of the class, as well as the following options:
* Property-(string, default value: null) the target CSS attributes of the conversion, such as 'width', 'color', 'font-size', and 'border.
* If this option is omitted here, you must specify a CSS attribute on the first parameter of the method when executing the start or set method.
* @ Description: constructor that converts a CSS attribute value of an element from one value to another.
* @ Notes:
* Any CSS attribute that can be set using Element: setStyle can be used for Fx. Tween.
* If it is not a computable CSS attribute, such as border-style or background-image, you can simply set its value.
* If the property option is used, you do not need to specify the CSS attribute when calling the start and set methods.
**/
Initialize: function (element, options ){
// The element property stores the element object to which the special effect applies.
This. element = this. subject = document. id (element );
// Call the method with the same name as the parent class
This. parent (options );
},
 
/**
* @ Method: set
* @ Param property-(string) css attribute (This field can be omitted if the property option is set in the constructor)
* @ Param now-(mixed) css Attribute Value
* @ Description: Set the specified CSS attribute value of the element to the specified value immediately.
* @ Returns: (object) specifies the Fx. Tween instance.
* @ Notes:
* If the property option is used or the CSS property parameter is specified in the start method, you do not need to specify the CSS property parameter when calling the set method.
**/
Set: function (property, now ){
// If only one parameter is provided
If (arguments. length = 1 ){
// Use this parameter as the target value
Now = property;
// Take the CSS attribute. First, take the CSS attribute name stored by the property attribute of the Fx instance.
Property = this. property | this. options. property;
}
// Final rendering Effect
This. render (this. element, property, now, this. options. unit );
Return this;
},
 
/**
* @ Method: start
* @ Param property-(string) the css attribute to be transformed (This field can be omitted if the property option is set in the constructor)
* @ Param from-(mixed) The start value of the CSS attribute. If only one parameter is provided for the entire method, the value is used as the end value of the CSS attribute.
* @ Param to-(mixed, optional) end value of the CSS attribute
* @ Description: overwrites the CSS attribute value of an element to the specified value.
* @ Notes:
* If only one parameter is provided for the entire method, this value is used as the end value of the CSS attribute. The starting value is calculated from the current state of the element.
* When changing the CSS attribute of the color class, you can use either the RGB format or the hexadecimal format.
* If the property option is set in the constructor, you do not need to specify the CSS attribute parameter when calling the start method.
**/
Start: function (property, from, ){
// Check the running status of the current special effect to determine whether to run the new special effect.
If (! This. check (property, from, to) {return this ;}
// Dimensionality Reduction of parameters
Var args = Array. flatten (arguments );
// Obtain the CSS attribute. First, check whether the property option is set.
This. property = this. options. property | args. shift ();
// Call the prepare method of the parent class Fx. CSS to explain the parameters and obtain the from and to values.
Var parsed = this. prepare (this. element, this. property, args );
// Call the method with the same name as the Fx base class to start executing the special effect
Return this. parent (parsed. from, parsed. );
}
 
});
 
// # Endregion
 
// # Region-Element. Properties. tween-
 
/**
* @ Element property: tween
* @ Description: Used to set or obtain the Fx. Tween instance on the element to implement the single-piece mode.
* @ Notes:
* 01. When initializing the Element's tween instance with Element: set, the property to tween shoshould NOT be passed.
* When the Element: set method is used to set the tween of an Element, the css attribute of the tween is required. <不需要> Input
* 02. The property must be specified when using Element: get to retrieve the actual Fx. Tween instance, and in callto Element: tween
* When the Element: get method is used to obtain the Fx. Tween instance of an Element, the property in the option must be specified.
* 03. When options are passed to the setter, the instance will be reset.
* When you use the setter method to set optional parameters, the Fx. Tween instance object will be reset.
* 04. As with the other Element shortcuts, the difference between a setter and a getter is that the getter returns the instance, while the setter returns the element (for chaining and initialization ).
* The get method is called to obtain the instance of Fx. tween returned by Tween, and the call set method returns the main adjustment element.
* 05. When the get method is used, if no tween exists on the element, a new instance is created and set to the element based on the available options.
**/
Element. Properties. tween = {
 
// Setter sets the Fx. Tween object parameters
Set: function (options ){
// Obtain the Fx. Tween instance, cancel the special effect in execution, and then set the optional parameter
This. get ('tween'). cancel (). setOptions (options );
Return this;
},
 
Get: function (){
// Read from the temporary object first, and check whether the data is cached in the Fx. Tween instance.
Var tween = this. retrieve ('tween ');
If (! Tween ){
// Save the Fx. Tween instance
Tween = new Fx. Tween (this, {link: 'cancel '});
This. store ('tween', tween );
}
Return tween;
}
 
};
 
// # Endregion
 
// # Region-Element Methods-
 
// Quick method for special effect TRANSFORMATION OF ELEMENTS
Element. implement ({
 
/**
* @ Element method: tween
* @ Returns: (element) returns the primary element.
* @ Notes: refer to the Fx. Tween. start method.
**/
Tween: function (property, from, ){
This. get ('tween'). start (property, from, );
Return this;
},
 
/**
* @ Element method: fade
* @ Param how-(mixed, optional: Default Value: 'toggle ') indicates the opacity value or string. It can be the following value:
* 'In'-opacity is 100%
* 'Out'-opacity is 0%
* Set 'show'-opacity to 100% immediately
* Set 'hide '-opacity to 0% immediately
* 'Toggle '-if the element is currently visible, the element is fade out. On the contrary, the element is Fade in.
* (Number)-0 ~ The floating point number between 1. It will fade out to this value.
* @ Returns: (element) returns the primary element.
* @ Description: a shortcut for changing the tween special effect of the opacity style attribute.
**/
Fade: function (how ){
// Get the Fx. Tween instance of the main adjustment element
Var fade = this. get ('tween '),
Method, to, toggle;
If (how = null) {how = 'toggle ';}
// Several fade-in and fade-out modes
Switch (how ){
Case 'in': // fade in
Method = 'start ';
To = 1;
Break;
 
Case 'out': // fade out
Method = 'start ';
To = 0;
Break;
 
Case 'show ': // display
Method = 'set ';
To = 1;
Break;
 
Case 'hide ': // hide
Method = 'set ';
To = 0;
Break;
 
Case 'toggle ': // Switch
// Obtain the tag variable. The second parameter is used by default.
Var flag = this. retrieve ('fade: flag', this. getStyle ('opacity ') = 1 );
Method = 'start ';
// Controls whether to fade in or out based on the marked status
To = flag? 0: 1;
// Retained the mark
This. store ('fade: flag ',! Flag );
Toggle = true;
Break;
 
Default:
Method = 'start ';
To = how;
}
// If toggle is not enabled, delete the temporary tag to avoid toggle response errors.
If (! Toggle) {this. eliminate ('fade: flag ');}
// Execute the corresponding method of the special effect instance based on the specified fade-in and fade-out mode
Fade [method] ('opacity ', );
// Set whether to hide or display the main element based on whether the end value of the opacity style attribute is zero
If (method = 'set' |! = 0 ){
This. setStyle ('visibility ', to = 0? 'Hidd': 'visible ');
} Else fade. chain (function (){
This. element. setStyle ('visibility ', 'den den ');
});
Return this;
},
 
/**
* @ Element method: highlight
* @ Param start-(string, optional: The default value is '# ff8').
* @ Param end-(string, optional: The default value is the initial background-color value of the element) the background color of the element after the highlight effect ends.
* @ Returns: (element) returns the primary element.
* @ Description: a shortcut for changing the background-color style attributes by using the tween special effect. (This is the special background highlight effect. You can quickly set the background color to the specified color, and then return the initial background color)
* @ Notes: if the background color is not specified for the element or 'Transparent' is specified, the end value is white by default.
**/
Highlight: function (start, end ){
// End is the background color used after the animation ends, usually the original color.
If (! End ){
// Temporary object Value
End = this. retrieve ('highlight: original', this. getStyle ('background-color '));
// If it is transparent, handle it in white.
End = (end = 'transparent ')? '# Fff': end;
}
// Obtain the Fx. Tween instance of the main adjustment element
Var tween = this. get ('tween ');
// Start execution
Tween. start ('background-color', start | '# ffff88', end). chain (function (){
// Restores the original color after the animation ends.
This. setStyle ('background-color', this. retrieve ('highlight: original '));
// Chained execution
Tween. callChain ();
}. Bind (this ));
Return this;
}
 
});
 
// # Endregion
 
Author: Bitter Melon"