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.
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.
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
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 | Linear Displays a linear transition with in, out, in-out events |
| 2 | Quad Displays a quadratic transition with in, out, in-out events |
| 3 | Cubic Displays a cubicular transition with in, out, in-out events |
| 4 | Quart Displays a quartetic transition with in, out, in-out events |
| 5 | Quint Displays a quintic transition with in, out, in-out events |
| 6 | Pow Used to generate Quad, Cubic, Quart and Quint with in, out, in-out events |
| 7 | Expo Displays an exponential transition with in, out, in-out events |
| 8 | Circ Displays a circular transition with in, out, in-out events |
| 9 | Sine Displays a sineousidal transition with in, out, in-out events |
| 10 | Back Makes the transition go back, then all forth with in, out, in-out events |
| 11 | Bounce Makes the transition bouncy with in, out, in-out events |
| 12 | Elastic Elastic curve transition with in, out, in-out events |
No comments:
Post a Comment