MooTools Tutorial
MooTools Useful Resources
Selected Reading
- MooTools - Fx.Events
- MooTools - Fx.Options
- MooTools - Fx.Morph
- MooTools - Fx.Tween
- MooTools - Fx.Slide
- MooTools - Fx.Element
- MooTools - Classes
- MooTools - Tabbed Content
- MooTools - Tooltips
- MooTools - Accordion
- MooTools - Sortables
- MooTools - Sliders
- MooTools - Periodicals
- MooTools - Regular Expression
- MooTools - Drag and Drop
- MooTools - Input Filtering
- MooTools - Style Properties
- MooTools - DOM Manipulations
- MooTools - Event Handling
- MooTools - Functions
- MooTools - Using Arrays
- MooTools - Selectors
- MooTools - Program Structure
- MooTools - Installation
- MooTools - Introduction
- MooTools - Home
MooTools Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
MooTools - Fx.Options
MooTools - Fx.Options
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 functionapties. By default, the value of fps is 50. This means any functionapty will take 50 frames per second while morphing.
Example
Let us take an example wherein, we will morph a span 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 sopd #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( cpck , morphStart.bind(morphObject));
});
</script>
</head>
<body>
<span id = "morph_element"> </span><br/>
<input type = "button" id = "start"value = "START"/>
</body>
</html>
You will receive the following output −
Output
Cpck 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.
pnk
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 pnk 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 pnk option.
Syntax
var morphObject = new Fx.Morph(morphElement, {
pnk: 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 milpseconds. 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 pnear 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 |