Mootools 1.2 Tutorial Fx.Morph, Fx Options and Fx Events_Mootools

We'll learn how to use Fx.Morph (which essentially lets you gradient multiple stylesheet properties at the same time), then we'll go over some of the Fx options that apply to Fx.Tween and Fx.Morph, and finally we'll see how Use Fx events such as "onComplete" and "onStart". Through these options and events, we can gain better control over the shape animation.
Fx.Morph
Create a new Fx.Morph
Initializing a new morph is similar to creating a new gradient, except that you specify multiple style attributes.
Reference code:

Copy code The code is as follows:

// First, let’s The element is assigned to a variable
var morphElement = $('morph_element');
// Now, we create a new morph
var morphObject = new Fx.Morph(morphElement);
/ / Now we can set style attributes, just like Fx.Tween
// But we can set multiple style attributes here
morphObject.set({
'width': 100,
'height ': 100,
'background-color': '#eeeeee'
});
// We can also start our deformation like a gradient
// But here we need Place multiple attribute values ​​at the same time
morphObject.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
}) ;

That’s all, including creating, setting up and starting a transformation.
To make this more reasonable, we should create our variables, separate our functions, and create some events to control this:
Reference code:

Copy code The code is as follows:

var morphSet = function(){
// Here we can set the style like Fx.Tween Attributes
// But here we can set multiple style attributes at the same time
this.set({
'width': 100,
'height': 100,
'background-color ': '#eeeeee'
});
}
var morphStart = function(){
// We can also start a morph like a gradient
// But now we Multiple style attributes can be set at the same time
this.start({
'width': 300,
'height': 300,
'background-color': '#d3715c'
} );
}
var morphReset = function(){
// Set to the initial value
this.set({
'width': 0,
'height' : 0,
'background-color': '#ffffff'
});
}
window.addEvent('domready', function() {
// First, let’s The element is assigned to a variable
var morphElement = $('morph_element');
// Now, we create our morph
var morphObject = new Fx.Morph(morphElement);
// Here we add a click event to the button
// and bind morphObject to this function
// so that we 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 code The code is as follows:

Set
Start
reset

SetStartreset
Fx Options )
The options below are both accepted by Fx.Tween and Fx.Morph. They are both very easy to implement and give you a lot of control over your effects. To use these options, use the following syntax:
Reference code:

Copy code The code is as follows:

// Create your gradient or morph
// Then set your options between curly braces { }
var morphObject = new Fx.Morph(morphElement, {
// First is the name of the option
// followed by a colon (:)
// and then defines your option
duration: 'long',
transition: 'sine:in'
} );

fps (frames per second)
This option determines the number of frames per second for this animation. The default value is 50 and accepts numbers and variables with numeric values.
Reference code:

Copy code The code is as follows:

// Create your gradient or morph
// Then set your options between curly braces { }
var morphObject = new Fx.Morph(morphElement, {
fps: 60
});
// Or like this
var framesPerSecond = 60;
var tweenObject = new Fx.Tween(tweenElement, {
fps: framesPerSecond
});

unit (unit)
This option sets the unit of the number. For example, by 100 do you mean 100 pixels (px), percentage, or em?
Reference code:

Copy code The code is as follows:

// Create your gradient Or morph
// Then set your options between curly braces { }
var morphObject = new Fx.Morph(morphElement, {
unit: '%'
});

link The
link option provides a way for you to manage multiple function calls that launch an effect. For example, if you have a mouseover effect, do you want this effect to be activated every time the user moves it? Or, if a person moves the mouse over twice, should it ignore the second response or should it concatenate them and wait for the first call to complete before calling the effect a second time? link has three settings:
"ignore" (default) - Ignore any call to start a new effect before an effect is completed
"cancel" - If there is another effect called, abandon the current effect , turn to handle new effect calls
"chain" - chain allows you to connect effects like a "chain", stack these calls, and then call these effects one by one until completed
Reference Code:

Copy code The code is as follows:

// Create your gradient or transformation
// Then set your options between curly braces { }
var morphObject = new Fx.Morph(morphElement, {
link: 'chain'
});

duration (duration)
duration allows you to define the duration of this animation. Continuous events and speed are not the same, so if you want an object to move 100 pixels in a second, it will be slower than an object moving 1000 pixels per second. You can enter a number (in milliseconds), a variable whose value is a number, or three shortcuts:
"short"=250ms
"normal"=500ms (default)
"long"= 1000ms
Reference code:

Copy code The code is as follows:

// Create your Gradient or Morph
// Then set your options between curly braces { }
var morphObject = new Fx.Morph(morphElement, {
duration: 'long'
});
// Or like this
var morphObject = new Fx.Morph(morphElement, {
duration: 1000
});

transition (transition effect)
The last one Options: transition, allows you to determine the transition type. For example, should it be a smooth transition or should it start slowly and then speed up until the end. Take a look at these transition effects available in the core library of MooTools:
Reference code:

Copy code The code is as follows:

var tweenObject = new Fx.Tween(tweenElement, {
transition: 'quad:in'
});

Note: the first one The transition bar triggers a red eye-catching effect at the beginning and an orange eye-catching effect at the end. See how to use Fx events below.
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:
Ease In
Ease Out
Ease In Out
Fx event
Fx event allows you to execute the animation effect During the process, some code is executed at different points. This can be useful when creating user feedback, and also gives you another layer of control over your gradients and transformations:
onStart - Fires when the Fx starts
onCancel - Fires when the Fx is canceled Trigger
onComplete - Triggered when Fx is completed
onChainComplete - Triggered when Fx chain is completed
When you create a gradient or deformation, you can set one of these events, just like you set a or multiple options are the same, but instead of setting a value, a function is set:
Reference code:

Copy code The code is as follows:

// First we assign a new Fx.Tween to a variable
// Then define the element we want to gradient
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 all pass gradient objects
// So when the animation starts
// Here we call a "highlight" effect
passes_tween_element.highlight('#C54641');
},
// Notice how this comma always appears between each event and option
// but not after the last event or option
onComplete: function(passes_tween_element){
// At the end, Let’s apply another highlight effect
passes_tween_element.highlight('#C54641');
}
});

Example
In order to generate the above transformation code, we It's possible to reuse our functions in a way we haven't seen in this series of tutorials. All the deformation elements above use two functions, one gradually fades out when the mouse enters, and the other gradually fades out when the mouse leaves:
Reference code:

Copy code The code is as follows:

// This is the function we call when the mouse enters
// The width gradient is 700px
var enterFunction = function() {
this.start('width', '700px');
}
// This is the function we call when the mouse leaves
// The width gradually fades back to 300px
var leaveFunction = function() {
this.start('width', '300px');
}
window.addEvent('domready', function() {
// Here we assign some elements to variables
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
// Then we create three gradient elements
// corresponding to the three variables above
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 mouse enter and mouse leave events
// Note the use of .addEvents
// It is similar to the use of .addEvent
// But you can add multiple events through the following mode
$('quadin').addEvents({
// First, you have to specify what event it is and enclose the event in single quotes
// Then follow it with a colon (:)
// Finally place your function
// In this example, the function is banded to the gradient object
'mouseenter': enterFunction.bind(quadIn),
'mouseleave': leaveFunction.bind(quadIn)
});
$('quadout').addEvents({
// Notice how we reuse this function here
'mouseenter': enterFunction.bind(quadOut),
' mouseleave': leaveFunction.bind(quadOut)
});
$('quadinout').addEvents({
// We also use the same functions here
// But every time We all apply an event to different elements
// and bind different gradients
'mouseenter': enterFunction.bind(quadInOut),
'mouseleave': leaveFunction.bind(quadInOut)
});

Learn more…

You can gain more detailed control over the effects through the tools in the Fx library. Please be sure to read the Fx section in the documentation, as well as tween, morph and transitions.

Download a zip package containing what you need to get started

Include the example on this page, the MooTools 1.2 core library, an external JavaScript file, an external CSS file or a simple html file.