Mootools 1.2 tutorials Fx. Morph, Fx Options, and Fx events

Document directory

• Learn more ......

We will learn how to use Fx. morph (it essentially allows you to gradient multiple style table attributes at the same time), and then we will check the application to Fx. tween and Fx. next we will look at how to use Fx events, such as onComplete and onStart ". With these options and events, we can gain better control over deformation animation.
Fx. Morph
Create a new Fx. Morph
Initializing a new deformation is similar to creating a new gradient. Apart from specifying multiple style attributes.
Reference code: Copy codeThe Code is as follows: // first, assign a value to a variable.
Var morphElement = $ ('morph _ element ');
// Now, we create a new Deformation
Var morphObject = new Fx. Morph (morphElement );
// Now we can set style attributes, just like Fx. Tween
// However, we can set multiple style attributes here
MorphObject. set ({
'Width': 100,
'Height': 100,
'Background-color': '# eeeeeee'
});
// We can also start our deformation just like starting a gradient.
// However, multiple attribute values must be placed at the same time.
MorphObject. start ({
'Width': 300,
'Height': 300,
'Background-color': '# d3715c'
});

The above is all the content, including creating, setting, and starting a deformation.
To make this more reasonable, we should create our variables, separate our functions, and create some events to control this:
Reference code:Copy codeThe Code is as follows: var morphSet = function (){
// Here we can set style attributes like Fx. Tween
// However, you can set multiple style attributes at the same time.
This. set ({
'Width': 100,
'Height': 100,
'Background-color': '# eeeeeee'
});
}
Var morphStart = function (){
// We can also start a deformation like starting a gradient.
// But now we can set multiple style attributes at the same time
This. start ({
'Width': 300,
'Height': 300,
'Background-color': '# d3715c'
});
}
Var morphReset = function (){
// Set it to the Initial Value
This. set ({
'Width': 0,
'Height': 0,
'Background-color': '# ffff'
});
}
Window. addEvent ('domainready', function (){
// First, assign the value of our element to a variable.
Var morphElement = $ ('morph _ element ');
// Now, we create our Deformation
Var morphObject = new Fx. Morph (morphElement );
// Here we add a click event to the button
// Bind morphObject to this function
// You can use "this" in the above function"
$ ('Morph _ set'). addEvent ('click', morphSet. bind (morphObject ));
$ ('Morph _ start'). addEvent ('click', morphStart. bind (morphObject ));
$ ('Morph _ reset'). addEvent ('click', morphReset. bind (morphObject ));
});

Reference code:Copy codeThe Code is as follows: <div id = "morph_element"> </div>
<Button id = "morph_set"> Set </button>
<Button id = "morph_start"> Start </button>
<Button id = "morph_reset"> reset </button>

SetStartreset
Fx option (Options)
The options below can be accepted by Fx. Tween and Fx. Morph. They are very easy to implement, and can give you a lot of control to control your effect. To use these options, use the following syntax:
Reference code:Copy codeThe Code is as follows: // create your gradient or deformation
// Set your options between braces {}
Var morphObject = new Fx. Morph (morphElement ,{
// The option name first
// Followed by a colon (:)
// Define your options
Duration: 'long ',
Transition: 'sine: in'
});

Fps (number of frames per second, frames per second)
This option determines the number of frames per second of the animation. The default value is 50. Variables with numbers and values are acceptable.
Reference code:Copy codeThe Code is as follows: // create your gradient or deformation
// Set your options between braces {}
Var morphObject = new Fx. Morph (morphElement ,{
Fps: 60
});
// Or
Var framesPerSecond = 60;
Var tweenObject = new Fx. Tween (tweenElement ,{
Fps: framesPerSecond
});

Unit)
This option sets the unit of numbers. For example, does your 100 indicate 100 pixels (px), percentage, or em?
Reference code:Copy codeThe Code is as follows: // create your gradient or deformation
// Set your options between braces {}
Var morphObject = new Fx. Morph (morphElement ,{
Unit: '%'
});

Link)
The link option provides a way for you to manage multiple function calls with startup effects. For example, if you have a mouseover effect, do you want to enable this effect every time a user moves up? Or, if a person moves the mouse twice, should it ignore the second response or connect them together, and then wait until the first call is complete before the second call? Link has three more settings:
"Ignore" (default)-ignore any call to start a new effect before an effect is completed
"Cancel" -- if there is another effect call, the current effect will be discarded and the new effect call will be processed.
"Chain"-chain allows you to connect effects like "chain", stack these calls, and call these effects one by one until they are completed.
Reference code:Copy codeThe Code is as follows: // create your gradient or deformation
// Set your options between braces {}
Var morphObject = new Fx. Morph (morphElement ,{
Link: 'chain'
});

Duration (duration)
Duration allows you to define the animation duration. Continuous events and speed are different. Therefore, if you want an object to move 100 pixels in one second, it will be slower than moving 1000 pixels per second. You can enter a number (in milliseconds), a variable whose value is a number, or three shortcuts:
"Short" = 250 ms
"Normal" = 500 ms (default)
"Long" = 1000 ms
Reference code:Copy codeThe Code is as follows: // create your gradient or deformation
// Set your options between braces {}
Var morphObject = new Fx. Morph (morphElement ,{
Duration: 'Long'
});
// Or
Var morphObject = new Fx. Morph (morphElement ,{
Duration: 1000
});

Transition)
The last option is transition, which allows you to determine the transition type. For example, is it a smooth transition or it should start slowly and then accelerate until the end. Let's take a look at the transition effects that can be used in the core libraries of MooTools:
Reference code:Copy codeThe Code is as follows: var tweenObject = new Fx. Tween (tweenElement ,{
Transition: 'quad: in'
});

Note: the first transition bar triggers a red eye-catching effect at the beginning and an orange eye-catching effect at the end. Let's see how to use the Fx event.
The above 30 transition types can be divided into ten groups:
Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
Each group has three options:
Stored In
Timed Out
Timed In Out
Fx events
The Fx event allows you to execute code at different points during animation effect execution. This can be useful when creating user feedback, which also gives you another level of control to control your gradient and deformation:
OnStart -- triggered when Fx starts
OnCancel -- triggered when Fx is canceled
OnComplete -- triggered when Fx is complete
OnChainComplete -- triggered when the Fx chain is complete
When you create a gradient or deformation, you can set an event, just like setting one or more options, but not setting a value, but setting a function:
Reference code:Copy codeThe Code is as follows: // first, we assign a new Fx. Tween value to a variable.
// Then define the gradient element.
QuadIn = new Fx. Tween (quadIn ,{
// Here are some options
Link: 'cancel ',
Transition: 'quad: in ',
// Here are some events
OnStart: function (passes_tween_element ){
// These events will pass the gradient object
// When the animation starts
// Here we call a "highlight" Effect
Passes_tween_element.highlight ('# C54641 ');
},
// Note how this comma always appears between every event and Option
// But not after the last event or option
OnComplete: function (passes_tween_element ){
// At the end, we will apply another highlight effect.
Passes_tween_element.highlight ('# C54641 ');
}
});

Example
To generate the above deformation code, we can reuse our functions in a way we have not seen in this series of tutorials. All the above deformation elements use two functions. One function fades out when the mouse enters the gradient, and the other function returns the gradient when the mouse leaves:
Reference code:Copy codeThe Code is as follows: // This is the function we call when the mouse is clicked.
// Gradient width to 700px
Var enterFunction = function (){
This. start ('width', '700px ');
}
// This is the function we call when the mouse leaves.
// Gradient width back to 300px
Var leaveFunction = function (){
This. start ('width', '300px ');
}
Window. addEvent ('domainready', function (){
// Here we assign some elements to the variables
Var quadIn = $ ('quadin ');
Var quadOut = $ ('quadout ');
Var quadInOut = $ ('quadinout ');
// Create three gradient elements.
// Correspond to the preceding three variables respectively
QuadIn = new Fx. Tween (quadIn ,{
Link: 'cancel ',
Transition: Fx. Transitions. Quad. easeIn,
OnStart: function (passes_tween_element ){
Passes_tween_element.highlight ('# C54641 ');
},
OnComplete: function (passes_tween_element ){
Passes_tween_element.highlight ('# E67F0E ');
}
});
QuadOut = new Fx. Tween (quadOut ,{
Link: 'cancel ',
Transition: 'quad: out'
});
QuadInOut = new Fx. Tween (quadInOut ,{
Link: 'cancel ',
Transition: 'quad: in: out'
});
// Now we add the mouse entry and mouse exit events
// Note the use of. addEvents
// The usage of. addEvent is similar to that of. addEvent.
// However, you can add multiple events in the following mode:
$ ('Quadin'). addEvents ({
// First, you need to describe the event and enclose it in single quotes.
// Followed by a colon (:)
// Finally place your function
// In this example, the function banding to this gradient object
'Mouseenter': enterFunction. bind (quadIn ),
'Mouseleave ': leaveFunction. bind (quadIn)
});
$ ('Quadout'). addEvents ({
// Note how we reuse this function
'Mouseenter': enterFunction. bind (quadOut ),
'Mouseleave ': leaveFunction. bind (quadOut)
});
$ ('Quadinout'). addEvents ({
// We also use the same functions here
// However, each time we apply an event to a different element
// And bind different gradient
'Mouseenter': enterFunction. bind (quadInOut ),
'Mouseleave ': leaveFunction. bind (quadInOut)
});

Learn more ......

You can use the tools in the Fx library to gain more detailed control over the effect. Please be sure to read the Fx section in this document, as well as tween, morph, and transitions.

Download a zip package containing what you need

This includes the instance on this page, the core library of MooTools 1.2, an external JavaScript file, an external CSS file, or a simple html file.