We'll learn how to use it (it essentially allows you to gradient multiple stylesheet properties at the same time), then we'll check out some of the Fx options applied to the and, and finally we'll see how to use Fx events, such as "onComplete" and "onStart". Through these options and events, we can gain better control over the deformation animation.
Create a new
Initializing a new deformation is similar to creating a new gradient, except that you want to specify multiple style properties.
Reference code:
// First, assign our element to a variable
var morphElement = $('morph_element');
// Now, we create a new shape
var morphObject = new (morphElement);
// Now we can set the style properties, just like
// However, we can set multiple style attributes here
({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
// We can also start our shape like starting a gradient
// But we have to place multiple attribute values at the same time
({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
All of the above is all about it, including creating, setting up 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:
var morphSet = function(){
// Here we can set style properties as
// But here we can set multiple style attributes at the same time
({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
var morphStart = function(){
// We can also start a shape like starting a gradient
// But now we can set multiple style attributes at the same time
({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
var morphReset = function(){
// Set to the initial value
({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
('domready', function() {
// First, assign our element to a variable
var morphElement = $('morph_element');
// Now, we create our deformation
var morphObject = new (morphElement);
// Here we add click events to the button
// and bind morphObject and this function
// So that "this" can be used in the above function
$('morph_set').addEvent('click', (morphObject));
$('morph_start').addEvent('click', (morphObject));
$('morph_reset').addEvent('click', (morphObject));
});
Reference code:
<div ></div>
<button >Set</button>
<button >Start</button>
<button >reset</button>
SetStartreset
Fx options (Options)
The following options are acceptable. They are all very easy to implement and can give you a lot of control to control your effects. To use these options, use the following syntax:
Reference code:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
// First of all, the name of the option
// Then followed by a colon (:)
// Then define your options
duration: 'long',
transition: 'sine:in'
});
fps (frames per second, frames per second)
This option determines the number of frames per second of the animation. The default value is 50, and it can accept variables with numbers and values as numbers.
Reference code:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
fps: 60
});
// Or
var framesPerSecond = 60;
var tweenObject = new (tweenElement, {
fps: framesPerSecond
});
unit (unit)
This option sets the unit of the number. For example, does your 100 mean 100 pixels (px), percentage or em?
Reference code:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
unit: '%'
});
link (connection)
The link option provides a way for you to manage multiple function calls for startup effects. For example, if you have a mouseover effect, do you want this effect to be activated every time the user moves? Or, if a person moves the mouse up twice, should it ignore the second response or should they be connected, and then call the effect the second time after the first call is completed? Link has three more settings:
"ignore" (default) - Ignore any calls to initiate a new effect before an effect is completed
"cancel" - If there is another effect call, the current effect is abandoned and the new effect call is processed instead.
"chain" - Chain allows you to connect effects like "chain", stack these calls, and then call these effects one by one until it is completed
Reference code:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
link: 'chain'
});
duration (duration)
duration allows you to define the duration of this animation. Continuous events and speed are different, so if you want an object to move 100 pixels in one second, it will be slower than an object that moves 1000 pixels per second. You can enter a number (in milliseconds), a variable with a value of digits, or three shortcuts:
“short”=250ms
"normal"=500ms (default)
“long”=1000ms
Reference code:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
duration: 'long'
});
// Or
var morphObject = new (morphElement, {
duration: 1000
});
transition (transition effect)
The last option: transition, which allows you to decide on the transition type. For example, is it not a smooth transition or it should start slowly and then accelerate until it ends. Take a look at these transition effects that can be used in MooTools' core library:
Reference code:
var tweenObject = new (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 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's Event
The Fx event allows you to execute some code at different points during the execution of the animation effect. This can be useful when creating user feedback, which also gives you another layer of control to control your gradients and deformations:
onStart - Triggered when Fx starts
onCancel - Triggered when Fx is cancelled
onComplete - Triggered when Fx completes
onChainComplete - Triggered when the Fx chain is completed
When you create a gradient or deformation, you can set one of these events, just like you set one or more options, but instead of setting a value, you set a function:
Reference code:
// First we assign a new value to a variable
// Then define the element we want to gradient
quadIn = new (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
// So when the animation starts
// Here we call a "highlight" effect
passes_tween_element.highlight('#C54641');
},
// Note how this comma always appears between each event and option
// But there is no following the last event or option
onComplete: function(passes_tween_element){
// At the end, we apply another highlight effect
passes_tween_element.highlight('#C54641');
}
});
Example
To generate the above deformation code, we can reuse our functions in a way that we have not seen in this series of tutorials. All the deformation elements above use two functions, one fades out when the mouse enters, and the other returns when the mouse leaves:
Reference code:
// This is the function we call when the mouse enters
// The width gradient is 700px
var enterFunction = function() {
('width', '700px');
}
// This is the function we call when the mouse leaves
// The width gradient is back to 300px
var leaveFunction = function() {
('width', '300px');
}
('domready', function() {
// Here we assign some elements to variables
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
// Then we create three gradient elements
// Correspond to the above three variables
quadIn = new (quadIn, {
link: 'cancel',
transition: ,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new (quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new (quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
// Now we add the mouse entry and mouse departure events
// Note the use of .addEvents
// It is similar to .addEvent
// However, you can add multiple events through the following pattern
$('quadin').addEvents({
// First, you need to explain what event it is and enclose the event in single quotes
// Then followed by a colon (:)
// Finally place your function
// In this example, the function banding to this gradient object
'mouseenter': (quadIn),
'mouseleave': (quadIn)
});
$('quadout').addEvents({
// Note how we reuse this function here
'mouseenter': (quadOut),
'mouseleave': (quadOut)
});
$('quadinout').addEvents({
// We use the same functions here.
// But every time we apply an event to a different element
// And bind different gradients
'mouseenter': (quadInOut),
'mouseleave': (quadInOut)
});
Create a new
Initializing a new deformation is similar to creating a new gradient, except that you want to specify multiple style properties.
Reference code:
Copy the codeThe code is as follows:
// First, assign our element to a variable
var morphElement = $('morph_element');
// Now, we create a new shape
var morphObject = new (morphElement);
// Now we can set the style properties, just like
// However, we can set multiple style attributes here
({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
// We can also start our shape like starting a gradient
// But we have to place multiple attribute values at the same time
({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
All of the above is all about it, including creating, setting up 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 the codeThe code is as follows:
var morphSet = function(){
// Here we can set style properties as
// But here we can set multiple style attributes at the same time
({
'width': 100,
'height': 100,
'background-color': '#eeeeee'
});
}
var morphStart = function(){
// We can also start a shape like starting a gradient
// But now we can set multiple style attributes at the same time
({
'width': 300,
'height': 300,
'background-color': '#d3715c'
});
}
var morphReset = function(){
// Set to the initial value
({
'width': 0,
'height': 0,
'background-color': '#ffffff'
});
}
('domready', function() {
// First, assign our element to a variable
var morphElement = $('morph_element');
// Now, we create our deformation
var morphObject = new (morphElement);
// Here we add click events to the button
// and bind morphObject and this function
// So that "this" can be used in the above function
$('morph_set').addEvent('click', (morphObject));
$('morph_start').addEvent('click', (morphObject));
$('morph_reset').addEvent('click', (morphObject));
});
Reference code:
Copy the codeThe code is as follows:
<div ></div>
<button >Set</button>
<button >Start</button>
<button >reset</button>
SetStartreset
Fx options (Options)
The following options are acceptable. They are all very easy to implement and can give you a lot of control to control your effects. To use these options, use the following syntax:
Reference code:
Copy the codeThe code is as follows:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
// First of all, the name of the option
// Then followed by a colon (:)
// Then define your options
duration: 'long',
transition: 'sine:in'
});
fps (frames per second, frames per second)
This option determines the number of frames per second of the animation. The default value is 50, and it can accept variables with numbers and values as numbers.
Reference code:
Copy the codeThe code is as follows:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
fps: 60
});
// Or
var framesPerSecond = 60;
var tweenObject = new (tweenElement, {
fps: framesPerSecond
});
unit (unit)
This option sets the unit of the number. For example, does your 100 mean 100 pixels (px), percentage or em?
Reference code:
Copy the codeThe code is as follows:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
unit: '%'
});
link (connection)
The link option provides a way for you to manage multiple function calls for startup effects. For example, if you have a mouseover effect, do you want this effect to be activated every time the user moves? Or, if a person moves the mouse up twice, should it ignore the second response or should they be connected, and then call the effect the second time after the first call is completed? Link has three more settings:
"ignore" (default) - Ignore any calls to initiate a new effect before an effect is completed
"cancel" - If there is another effect call, the current effect is abandoned and the new effect call is processed instead.
"chain" - Chain allows you to connect effects like "chain", stack these calls, and then call these effects one by one until it is completed
Reference code:
Copy the codeThe code is as follows:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
link: 'chain'
});
duration (duration)
duration allows you to define the duration of this animation. Continuous events and speed are different, so if you want an object to move 100 pixels in one second, it will be slower than an object that moves 1000 pixels per second. You can enter a number (in milliseconds), a variable with a value of digits, or three shortcuts:
“short”=250ms
"normal"=500ms (default)
“long”=1000ms
Reference code:
Copy the codeThe code is as follows:
// Create your gradient or shape
// Then set your options between braces { }
var morphObject = new (morphElement, {
duration: 'long'
});
// Or
var morphObject = new (morphElement, {
duration: 1000
});
transition (transition effect)
The last option: transition, which allows you to decide on the transition type. For example, is it not a smooth transition or it should start slowly and then accelerate until it ends. Take a look at these transition effects that can be used in MooTools' core library:
Reference code:
Copy the codeThe code is as follows:
var tweenObject = new (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 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's Event
The Fx event allows you to execute some code at different points during the execution of the animation effect. This can be useful when creating user feedback, which also gives you another layer of control to control your gradients and deformations:
onStart - Triggered when Fx starts
onCancel - Triggered when Fx is cancelled
onComplete - Triggered when Fx completes
onChainComplete - Triggered when the Fx chain is completed
When you create a gradient or deformation, you can set one of these events, just like you set one or more options, but instead of setting a value, you set a function:
Reference code:
Copy the codeThe code is as follows:
// First we assign a new value to a variable
// Then define the element we want to gradient
quadIn = new (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
// So when the animation starts
// Here we call a "highlight" effect
passes_tween_element.highlight('#C54641');
},
// Note how this comma always appears between each event and option
// But there is no following the last event or option
onComplete: function(passes_tween_element){
// At the end, we apply another highlight effect
passes_tween_element.highlight('#C54641');
}
});
Example
To generate the above deformation code, we can reuse our functions in a way that we have not seen in this series of tutorials. All the deformation elements above use two functions, one fades out when the mouse enters, and the other returns when the mouse leaves:
Reference code:
Copy the codeThe code is as follows:
// This is the function we call when the mouse enters
// The width gradient is 700px
var enterFunction = function() {
('width', '700px');
}
// This is the function we call when the mouse leaves
// The width gradient is back to 300px
var leaveFunction = function() {
('width', '300px');
}
('domready', function() {
// Here we assign some elements to variables
var quadIn = $('quadin');
var quadOut = $('quadout');
var quadInOut = $('quadinout');
// Then we create three gradient elements
// Correspond to the above three variables
quadIn = new (quadIn, {
link: 'cancel',
transition: ,
onStart: function(passes_tween_element){
passes_tween_element.highlight('#C54641');
},
onComplete: function(passes_tween_element){
passes_tween_element.highlight('#E67F0E');
}
});
quadOut = new (quadOut, {
link: 'cancel',
transition: 'quad:out'
});
quadInOut = new (quadInOut, {
link: 'cancel',
transition: 'quad:in:out'
});
// Now we add the mouse entry and mouse departure events
// Note the use of .addEvents
// It is similar to .addEvent
// However, you can add multiple events through the following pattern
$('quadin').addEvents({
// First, you need to explain what event it is and enclose the event in single quotes
// Then followed by a colon (:)
// Finally place your function
// In this example, the function banding to this gradient object
'mouseenter': (quadIn),
'mouseleave': (quadIn)
});
$('quadout').addEvents({
// Note how we reuse this function here
'mouseenter': (quadOut),
'mouseleave': (quadOut)
});
$('quadinout').addEvents({
// We use the same functions here.
// But every time we apply an event to a different element
// And bind different gradients
'mouseenter': (quadInOut),
'mouseleave': (quadInOut)
});
Learn more...
You can gain more detailed control over the effects through the tools in the Fx library. Please read the documentFx this section,besidestween、morphandtransitions。
Download a zip package with what you need to start
Includes the instance on this page, the MooTools 1.2 core library, an external JavaScript file, an external CSS file, or a simple html file.