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 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

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
Advertisements