Usage of Fx. Tween in the Mootools 1.2 tutorial

Like other MooTools functions we see, these methods are simple to use, but they are powerful. Tween allows you to add Amazing effects-smooth deformation animations to improve your user experience.
Tween shortcut
We usually start with "basic knowledge", but MooTools 1.2 only provides such an excellent shortcut for the gradient (tween, they are so simple to use that I can't help but start from here.
. Tween ();
A gradient is a smooth change between two style attribute values. For example, you can use a gradient to smoothly change the width of a div from 100 pixels to 300 pixels.
Reference code:Copy codeThe Code is as follows:
// Create a new function
Var tweenerFunction = function (){
// Select the gradient Element
// Add. tween
// Finally declare the attributes and values you want to change
$ ('Tweener '). tween ('width', '300px ');
}
Window. addEvent ('domainready', function (){
// Add an event to a button
// Initialize this gradient when you click it.
// And call our Gradient Function
$ ('Tween _ click'). addEvent ('click', tweenerFunction );
});

In response to the above Code, our HTML code looks like this:
Reference code:
Copy codeThe Code is as follows:
<Div id = "tweener"> </div>
<Button id = "tween_button"> 300 width </button>

. Fade ();
This method allows you to smoothly adjust the opacity of an element ). This is almost the same as the above example:
Reference code:Copy codeThe Code is as follows:
// Create a new function
Var tweenFadeFifty = function (){
// Create your selector here
// Then add. fade
// Finally declare a value between 0 and 1 (0 indicates invisible, 1 indicates completely visible)
$ ('Tweener '). fade ('. 5 ');
}
Window. addEvent ('domainready', function (){
// Add an event to the button
// Initialize this gradient upon clicking
// And call our Gradient Function
$ ('Tween _ fade_0000ty '). addEvent ('click', tweenFadeFifty );
});

Reference code:
Copy codeThe Code is as follows:
<Div id = "tweener">
<Button id = "tween_fade_0000ty"> Fade to feature ty percept opacity </button>

. Highlight ();
Highlighted is a gradient shortcut with a very clear (and extremely useful) goal. It provides two functions:
Use it to smoothly change to a different background color
Directly set a different background color, and then smoothly change to another background color.
These are useful when creating user feedback. For example, you can make an element flash when it is selected, or you can change the color, and then flash it when it is saved or closed. There are many options and they are easy to use. In this example, let's create two divs and then add two types of eye-catching (highlight) methods:
Reference code:
Copy codeThe Code is as follows:
// Create a function
Var tweenHighlight = function (event ){
// Now we use event.tar get, which is a parameter passed in from this function.
// This indicates the target (source) of the event to be triggered )"
// Because this effect is applied to the element that triggers the event
// Therefore, we do not need to create a selector.
// Note: addEvent will automatically pass the event object as a parameter to this call Function
//... Very convenient
Event.tar get. highlight ('# eaea16 ');
}
// Create a function
// You need to input a parameter
// Because this function is called in an event
// This function will automatically pass in the event object
// Then you can reference this element through .tar get.
// (Event Target element)
Var tweenHighlightChange = function (item ){
// Here we do not use a color, but add a comma to separate the second one.
// This will set the first color and then change to the second color
Item.tar get. highlight ('# eaea16',' #333333 ');
}
Window. addEvent ('domainready', function (){
$ ('Tweener '). addEvent ('mouseover', tweenHighlight );
$ ('Tweenerchang'). addEvent ('mouseover', tweenHighlightChange );
});

Reference code:
Copy codeThe Code is as follows:
<Div id = "tweener"> </div>
<Div id = "tweenerChange"> </div>

Shortcut examples
Here is an online example of some effective shortcuts. You can click these buttons in different order and pay attention to their changes:
Reference code:
Copy codeThe Code is as follows:
Var tweenerFunction = function (){
$ ('Tweener '). tween ('width', '300px ');
}
Var tweenerGoBack = function (){
$ ('Tweener '). tween ('width', '100px ');
}
//. Fade can also take 'out' and 'in' as parameters, equivalent to 0 and 1
Var tweenFadeOut = function (){
$ ('Tweener '). fade ('out ');
}
Var tweenFadeFifty = function (){
$ ('Tweener '). fade ('. 5 ');
}
Var tweenFadeIn = function (){
$ ('Tweener '). fade ('in ');
}
Var tweenHighlight = function (event ){
Event.tar get. highlight ('# eaea16 ');
}
Window. addEvent ('domainready', function (){
$ ('Tween _ click'). addEvent ('click', tweenerFunction );
$ ('Tween _ reset'). addEvent ('click', tweenerGoBack );
$ ('Tween _ fade_out '). addEvent ('click', tweenFadeOut );
$ ('Tween _ fade_0000ty '). addEvent ('click', tweenFadeFifty );
$ ('Tween _ fade_in '). addEvent ('click', tweenFadeIn );
$ ('Tweener '). addEvent ('mouseover', tweenHighlight );
});

Reference code:
Copy codeThe Code is as follows:
<Div id = "tweener"> </div> <br/>
<Button id = "tween_button"> 300 width </button>
<Button id = "tween_reset"> 100 width </button>
<Button id = "tween_fade_out"> Fade Out </button>
<Button id = "tween_fade_0000ty"> Fade to 50% opacity </button>
<Button id = "tween_fade_in"> Fade In </button>

Reference code:
Copy codeThe Code is as follows:
# Tweener {
Height: 100px
Width: 100px
Background-color: # 3399CC
}

Move the mouse up to see the first type of eye-catching effect.
300 width
100 width
Fade Out
Fade to 50% opacity
Fade In
More gradient (Tween)
Create a new gradient
If you want to be more flexible and variable, and more control over your changes, you may want to create a new form change image to replace those shortcuts. Note: Use "new" to create a new Fx. Tween instance:
Reference code:
Copy codeThe Code is as follows:
Window. addEvent ('domainready', function (){
// First, assign the element to be changed to a variable.
Var newTweenElement = $ ('newtween ');
// Now we create an animation event and pass this element as a parameter
Var newTween = new Fx. Tween (newTweenElement );
});

Reference code:
Copy codeThe Code is as follows:
<! -- This is the element that we want to apply the gradient effect -->
<Div id = "newTween"> </div>
<! -- This is the button for starting the gradient effect -->
<Button id = "netTween_set"> Set </div>

Set styles with Gradient
Once you create a new gradient from an element, you can easily set a style attribute through the. set () method. This is the same as the. setStyle () method.
Reference code:
Copy codeThe Code is as follows:
Var newTweenSet = function (){
// Note the use of "this"
// Learn how to use "this"
This. set ('width', '300px ');
}

As we have learned before, we want to separate our functions from the domready event, but in this example, we want to create a gradient in the domready event, then reference it externally. We have mastered a method for passing parameters out of domready (by creating an anonymous function and passing a parameter ), today, we need to learn a Moo-based and better way to pass gradient objects (this does not mean that anonymous functions are no longer suitable at any time ).
. Bind ();
Through. bind ();, we can make the "this" in a function equivalent to the parameter:
Reference code:
Copy codeThe Code is as follows:
// First, add a click event to the button we see above.
// Then, not just call this function
// We call this function and add ". bind ()"
// Then we replace any of
// Now, inside the "newTweenSet" function, "this" will point to "newTween"
$ ('Nettween _ set'). addEvent ('click', newTweenSet. bind (newTween ));

So now let's look at the above function. "this" is now equivalent to "newTween" (Our tween object ).
Now let's take a look at these things together:
Reference code:
Copy codeThe Code is as follows:
// Here is our function
Var newTweenSet = function (){
// Because we use bind, now "this" points to "newTween"
// Therefore, here is equivalent:
// NewTween. set ('width', '300px ')
This. set ('width', '300px ');
}
Window. addEvent ('domainready', function (){
// First assign the value of our element to a variable.
Var newTweenElement = $ ('newtween ');
// Then we create a new FX. Tween and assign the value to a variable.
Var newTween = new Fx. Tween (newTweenElement );
// Add our events and bind newTween and newTweenSet
$ ('Nettween _ set'). addEvent ('click', newTweenSet. bind (newTween ));
});

Start a gradient effect
Now, we have set all our gradient objects. Our functions are outside the domready event, and we also learned how to pass. set (); method to set a style table attribute. Let's take a look at the actual gradient. It is very easy to start a gradient, similar to. fade ();. There are two ways to use. start (); method:
Changes a property value from the current value to another value.
First set a property value and then change to another value.
Reference code:
Copy codeThe Code is as follows:
// This changes the width from the existing value to PX.
NewTween. start ('width', '300px ');
// This will first set the width to 100px, and then change to 300px
NewTween. start ('width', '100px ', '300px ');

Now, you can use it inside a function. start (); Method to start this gradient, if you use the function through. bind (); the method is bound with "newTween", you can use "this ".
These are all the gradient (tween) so far ......
However, there are still many questions about the gradient effect. For example, if you want to "gradient" multiple style table attributes at a time, you can use. morph (); method. You can also use the transition effect Library (transition) to change them for transition. However, this tutorial is long enough, so we will leave it for later.
Learn more ......

Download a zip package containing what you need

Contains a library of MooTools 1.2. The preceding example shows an external JavaScript file, a simple HTML file, and a CSS file.

As before, your best resource is the document of MooTools 1.2.

• Information about. tween (); Method
• Also, view the. morph (); Method and transitions library.