Mootools 1.2 Tutorial How to use Fx.Tween_Mootools

Like other MooTools functions we have seen, these methods are very simple to use, but very powerful. Tween allows you to add those extremely "dazzling" effects - deformation animations can occur smoothly, thereby improving your user experience.
Tween shortcuts
We usually start with "basic knowledge", but MooTools 1.2 only provides such excellent shortcuts for gradients (tween). They are all so simple to use that I can't help but Start here.
.tween();
A tween is a smooth change between two style property values. For example, with a gradient (tween) you can smoothly change the width of a div from 100 pixels to 300 pixels.
Reference code:

Copy code The code is as follows:

// Create a new function
var tweenerFunction = function() {
// Select the element you want to use gradient
// Then add .tween
// Finally declare the attribute and value you want to change to
$( 'tweener').tween('width', '300px');
}
window.addEvent('domready', function() {
// Add an event to a button here
//Initialize this gradient when clicked
// and call our gradient function
$('tween_button').addEvent('click', tweenerFunction);
});

Corresponding to the above code, our HTML code should probably look like this:
Reference code:

Copy code The code is as follows:

300 width

.fade();
This method allows you to smoothly adjust the opacity of an element. This is almost exactly the same as the example above:
Reference code:

Copy code The 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 The value between (0 means invisible, 1 means completely visible)
$('tweener').fade('.5');
}
window.addEvent('domready', function() {
// Add an event to the button here
// Initialize this gradient when clicked
// And call our gradient function
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
});

Reference code:

Copy code The code is as follows:

Fade to fifty percept opacity

.highlight();
Highlight is a very specific (and extremely useful) gradient shortcut that provides two functions:
Use it to smoothly change to a different background color
Set a different background color directly and then smoothly change to another background color
These are very useful when creating user feedback. For example, you could make an element flash when it's selected, or you could change the color and then flash again when it's saved or closed. There are so many options and it's so easy to use. In this example, let us create two divs and then add two types of highlight methods:
Reference code:

Copy code The code is as follows:

// Create a function
var tweenHighlight = function(event) {
// Here we use event.target, which is the parameter passed from this function
// This means "the target (source) of the triggered event"
// Since this effect is applied to the element that triggered the event
// so we don't need to create a selector
// Note: addEvent will The event object will be automatically passed as a parameter to this calling function
//... Very convenient
event.target.highlight('#eaea16');
}
// Create a function
// You need to pass in a parameter
// Since this function is called in an event (event)
// This function will automatically pass in the event object
// Then you You can reference this element through .target
// (target element of event)
var tweenHighlightChange = function(item) {
// Here we do not use a color, but add a comma. Separate the second
// This will set the first color, then change to the second color
item.target.highlight('#eaea16', '#333333');
}
window.addEvent('domready', function() {
$('tweener').addEvent('mouseover', tweenHighlight);
$('tweenerChange').addEvent('mouseover', tweenHighlightChange) ;
});

Reference code:

Copy code The code is as follows:

Quick Method Examples
Here are some online examples of shortcut methods for the effect. You can click these buttons in different orders and notice how they change:
Reference code:

Copy code The code is as follows :

var tweenerFunction = function() {
$('tweener').tween('width', '300px');
}
var tweenerGoBack = function( ) {
$('tweener').tween('width', '100px');
}
// .fade can also accept 'out' and 'in' as parameters, which is 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.target.highlight('#eaea16');
}
window.addEvent('domready', function() {
$('tween_button') .addEvent('click', tweenerFunction);
$('tween_reset').addEvent('click', tweenerGoBack);
$('tween_fade_out').addEvent('click', tweenFadeOut);
$('tween_fade_fifty').addEvent('click', tweenFadeFifty);
$('tween_fade_in').addEvent('click', tweenFadeIn);
$('tweener').addEvent('mouseover ',tweenHighlight);
});

Reference code:

Copy code Code As follows:

300 width> ;
100 width
Fade Out
Fade to 50% opacity
Fade In

Reference code:

Copy code The 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 gradients (Tween)
Create a new gradient
If you For more flexibility and control over your transformation effects, you may want to create a new shape animation to replace those shortcuts. Note the use of "new" to create a new instance of Fx.Tween:
Reference code:

Copy code The code is as follows :

window.addEvent('domready', function() {
// First we 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 code The code is as follows:

Set

Styling via gradient
Once you have created a new gradient from an element, you can easily set one via the .set() method Style attributes. This is the same as the .setStyle() method.
Reference code:

Copy code The code is as follows:

var newTweenSet = function() {
// Pay attention to the use of "this"
// Learn how to use "this"
this.set('width', '300px');
}

Like we 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 and then reference it externally. We have already mastered a way to pass parameters outside of domready (by creating an anonymous function and passing an argument), today we are going to learn a Moo-like and better way to pass gradient objects (this is not about anonymous functions no longer appropriate at any time).
.bind();
Through .bind();, we can make "this" in a function equal to the parameter:
Reference code:

Copy code The code is as follows:

// First we add a click event to the button we saw above
// Then, no Just call this function
// We call this function and add ".bind()"
// Then we replace whatever we want to pass to the function
// Now, in this "newTweenSet" Inside the function, "this" will point to "newTween"
$('netTween_set').addEvent('click', newTweenSet.bind(newTween));

So now we look at Looking at the function above, "this" is now equivalent to "newTween" (our tween object).
Now let’s put these things together and take a look:
Reference code:

Copy code The code is as follows:

// Here is our function
var newTweenSet = function() {
// Since we used bind, now "this" points to "newTween"
/ / Therefore, the equivalent here is:
// newTween.set('width', '300px')
this.set('width', '300px');
}
window. addEvent('domready', function() {
// First assign our element to a variable
var newTweenElement = $('newTween');
// Then we create a new FX.Tween, Then assign it to a variable
var newTween = new Fx.Tween(newTweenElement);
// Now add our event and bind newTween and newTweenSet
$('netTween_set').addEvent('click ', newTweenSet.bind(newTween));
});

Start a gradient effect
Now that we have set up all our gradient objects, our function is in domready In addition to events, we also learned how to set a style sheet property through the .set(); method. Let's take a look at the actual gradient. Starting a gradient is very simple, very similar to .fade();. There are two ways to use the .start(); method:
Let an attribute value change from the current value to another value
Set one first Attribute value, and then change to another value
Reference code:

Copy code The code is as follows:

// This will change the width (width) from the current existing value to 300px
newTween.start('width', '300px');
// This will set the width (width) first to 100px, then change to 300px
newTween.start('width', '100px', '300px');

Now, you can start this gradient by using the .start(); method inside a function. If you use the .bind(); method to bind "newTween" on the function, you can use "this".
That’s all the gradients (tween) so far…
However, there is still a lot to be said about the gradient effect. For example, if you want to "gradient" multiple stylesheet properties at once, you can use the .morph(); method. You can also use the transition library to change them for transitions. But this tutorial is already long enough, so we’ll save that for later.

Learn more…

Download a zip package containing what you need to get started

Contains a MooTools 1.2 library, the example above, an external JavaScript file, a simple HTML file and a CSS file.

As before, your best resource is the MooTools 1.2 documentation.

• Information about the .tween(); method
• Also, take a look at the .morph(); methods and the transitions library