Like the other MooTools functions we see, these methods are very simple to use, but they are powerful. Tween allows you to add the most "stunning" effects--you can have a smooth animation that will improve your user experience.
The shortcut method of tween
We usually start with "basics," but the MooTools 1.2 provides a very good shortcut for gradients (tween) that are so easy to use that I can't help but start here.
. Tween ();
A gradient (tween) is a smooth change between the values of a two-style attribute. For example, with a gradient (tween) you can smoothly change the width of the div from 100 pixels to 300 pixels.
Reference code:
Copy Code code as follows:
To create a new function
var tweenerfunction = function () {
Select the element you want to use a gradient
And then Add. Tween
Finally, declare the attributes and values you want to change to.
$ (' tweener '). Tween (' width ', ' 300px ');
}
Window.addevent (' Domready ', function () {
To 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 might look like this:
Reference code:
Copy Code code 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 (opacity). This is almost exactly the same as the example above:
Reference code:
Copy Code code as follows:
Create a new function
var tweenfadefifty = function () {
Create your selector here
And then Add. Fade
Finally declare a value between 0 and 1 (0 is not visible, 1 is fully 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 code as follows:
<div id= "Tweener" >
<button id= "Tween_fade_fifty" >fade to fifty Percept
. Highlight ();
Eye-catching (highlight) is a very clear (and extremely useful) gradient shortcut method that provides two features:
Use it to smooth the change to a different background color
Set a different background color directly and then change it to another background color
These are useful when creating user feedback. For example, you can let an element flash when something is selected, or you change the color, and then flash when it is saved or closed. There are a lot of options, and it's very easy to use. In this example, let's create two Div, and then add two types of eye-catching (highlight) methods separately:
Reference code:
Copy Code code as follows:
Create a function
var tweenhighlight = function (event) {
Here we use the Event.target, which is the parameter passed from this function.
This means "the target (source) of the triggering event"
Because this effect is applied to the element that triggers the event
So we don't need to create a selector again.
Note: Addevent will automatically pass the event object as an argument to this calling function
// ... Very convenient
Event.target.highlight (' #eaea16 ');
}
Create a function
You need to pass in a parameter
Because this function is called in an event
This function will automatically pass in the event object
Then you can refer to this element through. Target.
(The target element of the event)
var tweenhighlightchange = function (item) {
Instead of using one color, we added a comma to separate the second
This sets the first color and then changes 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 code as follows:
<div id= "Tweener" ></div>
<div id= "Tweenerchange" ></div>
Shortcut Method Example
Here are some examples of the online effects of the shortcut method. You can click on these buttons in different order, and then notice how they change:
Reference code:
Copy Code code 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, 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:
<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_fifty" >fade to 50% opacity</button>
<button id= "tween_fade_in" >fade in</button>
Reference code:
Copy Code code as follows:
#tweener {
height:100px
width:100px
Background-color: #3399CC
}
Move the mouse up to see the first type of eye-catching effect.
Width
Width
Fade out
Fade to 50% opacity
Fade in
More Gradients (Tween)
Create a new gradient
If you want more flexibility and more control over your changes, you may want to create a new deformable animation to replace those shortcuts. Note Use "new" to create an instance of a new fx.tween:
Reference code:
Copy Code code as follows:
Window.addevent (' Domready ', function () {
First, we assign the element to change to a variable
var newtweenelement = $ (' Newtween ');
Now we create an animated event and then pass this element as a parameter to the
var newtween = new Fx.tween (newtweenelement);
});
Reference code:
Copy Code code as follows:
<!--This is the element we want to apply a gradient effect to-->
<div id= "Newtween" ></div>
<!--This is the button that starts the gradient effect-->
<button id= "Nettween_set" >Set</div>
Setting styles with gradients
Once you create a new gradient from an element, you can easily set a style property through the. Set () method. This is the same as the. SetStyle () method.
Reference code:
Copy Code code 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 case we want to create a gradient in the Domready event and then reference it externally. We've mastered a way to pass parameters outside of Domready (by creating an anonymous function and passing a parameter), today we're going to learn a more moo way to pass the gradient objects (not that anonymous functions are no longer appropriate at any time).
. bind ();
By. Bind (), we can make the "this" inside a function equal to the parameter:
Reference code:
Copy Code code as follows:
First, we add a click event to the button above that we see.
And then, not just call this function
We call this function and add ". Bind ()"
And then we replace whatever we're going to pass to the function.
Now, inside this "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 Code code as follows:
This is our function.
var newtweenset = function () {
Because we use bind, now "this" points to "Newtween"
Therefore, the equivalent here is:
Newtween.set (' width ', ' 300px ')
This.set (' width ', ' 300px ');
}
Window.addevent (' Domready ', function () {
First, we assign our elements to a variable
var newtweenelement = $ (' Newtween ');
And then we're new to a fx.tween, and then we assign a value to a variable
var newtween = new Fx.tween (newtweenelement);
Now add our events and bind Newtween and Newtweenset
$ (' Nettween_set '). Addevent (' Click ', Newtweenset.bind (Newtween));
});
Start a gradient effect
Now that we've set up all of our gradient objects, our functions are outside the Domready event, and we've learned how to set a style sheet property by using the. Set () method, we'll look at the actual gradient. Starting a gradient is very simple, and. Fade (); very similar, there are a total of two ways to use. Start () Method:
To change a property value from the current value to a different value
First set a property value and then change to another value
Reference code:
Copy Code code as follows:
This will allow width to change from the currently existing value to 300px
Newtween.start (' width ', ' 300px ');
This will first set width to 100px and then change to 300px
Newtween.start (' width ', ' 100px ', ' 300px ');
Now, you can start this gradient within a function by using the. Start () method, if you use a function that uses the. bind (), and the method binds the "Newtween", you can use "this".
These are all the gradients so far (tween) ...
However, there is still much to say about the gradient effect. For example, if you want to "gradient" multiple style sheet properties at once, you can use the. Morph () method. You can also use the Transition Effect Library (transition) to change them to transition. But this tutorial is long enough, so let's leave it for later.
Learn more ...
Download a Zip package that contains the things you need to start
Contains a library of MooTools 1.2, an example above, an external JavaScript file, a simple HTML file, and a CSS file.
As before, your best resource is the MooTools 1.2 document.
- about .tween (); Method
- Also, browse .morph (); Method and transitions library
