”;
MooTools provides different Fx.Options which will help to Fx.Tween and Fx.Morph. These options will give you a control over the effects.
Let us discuss a few options that MooTools provide. Before we proceed, take a look at the following syntax for setting up options.
Syntax
var morphObject = new Fx.Morph(morphElement, {
//first state the name of the option
//place a :
//then define your option
});
fps(frames per second)
This option determines the number of frames per second in the animation while morphing. We can apply these fps to Morph or Tween functionalities. By default, the value of fps is 50. This means any functionality will take 50 frames per second while morphing.
Example
Let us take an example wherein, we will morph a div element using 5 fps. Take a look at the following code.
<!DOCTYPE html>
<html>
<head>
<style>
#morph_element {
width: 100px;
height: 100px;
background-color: #1A5276;
border: 3px solid #dd97a1;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
var morphStart = function(){
this.start({
''width'': 200,
''height'': 200,
''background-color'': ''#d3715c''
});
}
window.addEvent(''domready'', function() {
var morphElement = $(''morph_element'');
var morphObject = new Fx.Morph(morphElement, {
fps: 5
});
$(''start'').addEvent(''click'', morphStart.bind(morphObject));
});
</script>
</head>
<body>
<div id = "morph_element"> </div><br/>
<input type = "button" id = "start"value = "START"/>
</body>
</html>
You will receive the following output −
Output
Click on the START button to find the morphing animation. This helps us observe the number of frames used for animation. Use different values for fps to get the difference in animation. It is recommended to use the fps value less than 10. This will help you get the difference easily.
unit
This option is used to set the unit type for numbers. Generally, we have three different types of units — px, %, and ems. Take a look at the following syntax.
Syntax
var morphObject = new Fx.Morph(morphElement, {
unit: ''%''
});
The above syntax is to allocate percentage to units. This means all the values in numbers are treated as percentages.
link
This option provides a way to manage multiple calls to start an animation. If you apply multiple event calls at a time, these calls will be taken in as link calls. Once the first call finishes, then the second call executes automatically. It contains the following three options −
-
ignore − This is the default option. It ignores any number of calls until it completes the effect.
-
cancel − This cancels the current effect, when there is another being made. It follows the newest call precedence.
-
Chain − This lets you chain the effects together and maintain the stack of calls. It executes all the calls until it goes through all the chained calls in the stack.
Take a look at the following syntax for using the link option.
Syntax
var morphObject = new Fx.Morph(morphElement, {
link: ''chain''
});
Duration
This option is used to define the duration of the animation. For example, if you want an object to move 100px in the duration of 1 second, then it will go slower than an object moving 1000px in 1 second. You can input a number which is measured in milliseconds. Or you can use any of these three options in place of numbers.
- Short = 250ms
- Normal = 500ms (default)
- Long = 1000ms
Take a look at the following syntax for using duration.
Syntax
var morphObject = new Fx.Morph(morphElement, {
duration: ''long''
});
Or,
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});
transition
This option is used to determine the transition type. For example, if it should be a smooth transition or should it start out slowly then speed up towards the end. Take a look at the following syntax to apply transition.
Syntax
var tweenObject = new Fx.Tween(tweenElement, {
transition: ''quad:in''
});
The following table describes the different types of transitions.
| S.No. | Transition type & Description |
|---|---|
| 1 |
Displays a linear transition with in, out, in-out events |
| 2 |
Displays a quadratic transition with in, out, in-out events |
| 3 |
Displays a cubicular transition with in, out, in-out events |
| 4 |
Displays a quartetic transition with in, out, in-out events |
| 5 |
Displays a quintic transition with in, out, in-out events |
| 6 |
Used to generate Quad, Cubic, Quart and Quint with in, out, in-out events |
| 7 |
Displays an exponential transition with in, out, in-out events |
| 8 |
Displays a circular transition with in, out, in-out events |
| 9 |
Displays a sineousidal transition with in, out, in-out events |
| 10 |
Makes the transition go back, then all forth with in, out, in-out events |
| 11 |
Makes the transition bouncy with in, out, in-out events |
| 12 |
Elastic curve transition with in, out, in-out events |
”;