Mootools 1.2 tutorial to perform multiple deformation animations at the same time

This is useful when you add shape change animations with the same options to multiple elements. Just like the last example we saw in Lecture 20.
Basic usage
The method used looks similar. The difference between the two is the .start({}) method and the .set({}) method.
To ensure things are concise, let's first create an array of elements to pass them to.
Reference code: [Copy code] [Save code]
var fxElementsArray = $$('.myElementClass');
Now we can pass our array to the object.
Reference code:

Copy the codeThe code is as follows:

 
var fxElementsObject = new (fxElementsArray, { 
// Fx option
link: 'chain', 
duration: 1000, 
transition: 'sine:in:out', 
// Fx event
onStart: function(){ 
('#C3E608'); 
} 
}); 

Likewise, the Fx class is extended, allowing you to use all options and events of Fx.
.start({}) and .set({}) methods
To start an effect, or use the setting style, you can do it like using and, but instead of applying the settings directly to the object, you refer to the corresponding element through an index - the first element is 0, the second is 1, and so on.
Reference code:

Copy the codeThe code is as follows:

 
// You can use .set({...}) to set the style
fxElementsObject .set({ 
'0': { 
'height': 10, 
'width': 10, 
'background-color': '#333' 
}, 
'1': { 
'width': 10, 
'border': '1px dashed #333' 
} 
}); 
// Or use .start({...}) to create gradient animation
fxElementsObject .start({ 
'0': { 
'height': [50, 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px dashed #333' 
} 
}); 

Just like, you can set any start and end values for the gradient animation of an element, and you can set only one parameter (just like we only set one value for the width above), then the element will change from the current value to the value specified by the new parameter.
That's all about it. You can take a look at the examples below to see how they are used.
Sample code
Here we use two elements. There are several different types to choose from in gradient animation, and the Pause button allows you to pause the animation.
First, let's create our elements, our possible notification buttons (including reset buttons, pause buttons, and resume buttons), and some indicators to let us see the process.
Reference code:

Copy the codeThe code is as follows:

 
<div  class="ind">onStart</div> 
<div  class="ind">onCancel</div> 
<div  class="ind">onComplete</div> 
<div  class="ind">onChainComplete</div> 
<span id='buttons'> 
<button >Start A</button> 
<button >Start B</button> 
<button >Reset</button> 
<button >Pause</button> 
<button >Resume</button> 
</span> 
<div class="myElementClass">Element 0</div> 
<div class="myElementClass">Element 1</div> 

Our CSS code is also very simple
Reference code:

Copy the codeThe code is as follows:

 
.ind { 
width: 200px; 
padding: 10px; 
background-color: #87AEE1; 
font-weight: bold; 
border-bottom: 1px solid white; 
} 
.myElementClass { 
height: 50px; 
width: 100px; 
background-color: #FFFFCC; 
border: 1px solid #FFFFCC; 
padding: 20px; 
} 
#buttons { 
margin: 20px 0; 
display: block; 
} 

Below is the MooTools code.
Reference code:

Copy the codeThe code is as follows:

 
var startFXElement = function(){ 
({ 
'0': { 
'height': [50, 200], 
'width': 50, 
'background-color': '#87AEE1' 
}, 
'1': { 
'width': [100, 200], 
'border': '5px dashed #333' 
} 
}); 
} 
var startFXElementB = function(){ 
({ 
'0': { 
'width': 500, 
'background-color': '#333' 
}, 
'1': { 
'width': 500, 
'border': '10px solid #DC1E6D' 
} 
}); 
} 
var setFXElement = function(){ 
({ 
'0': { 
'height': 50, 
'background-color': '#FFFFCC', 
'width': 100 
}, 
'1': { 
'height': 50, 
'width': 100, 
'border': 'none' 
} 
}); 
} 
('domready', function() { 
var fxElementsArray = $$('.myElementClass'); 
var startInd = $('start_ind'); 
var cancelInd = $('cancel_ind'); 
var completeInd = $('complete_ind'); 
var chainCompleteInd = $('chain_complete_ind'); 
var fxElementsObject = new (fxElementsArray, { 
//Fx Options 
link: 'chain', 
duration: 1000, 
transition: 'sine:in:out', 
//Fx Events 
onStart: function(){ 
('#C3E608'); 
}, 
onCancel: function(){ 
('#C3E608'); 
}, 
onComplete: function(){ 
('#C3E608'); 
}, 
onChainComplete: function(){ 
('#C3E608'); 
} 
}); 
$('fxstart').addEvent('click', (fxElementsObject)); 
$('fxstartB').addEvent('click', (fxElementsObject)); 
$('fxset').addEvent('click', (fxElementsObject)); 
$('fxpause').addEvent('click', function(){ 
(); 
}); 
$('fxresume').addEvent('click', function(){ 
(); 
}); 
}); 

More learning

As you can see, it's very simple. To learn more deeply, you can read it carefullydocument、documentandFx Documentation。

Also, make sure to read usTutorial on Fx options and events。

Download the code for the last example

It also contains everything you need to start practicing.