One week learn Mootools 1.4 Chinese tutorial :( 6) Animation

Let's take a look at the animation parameter settings:

Parameters:
Fps-(number: The default value is 50) number of frames per second.
Unit-(string: false by default) unit, which can be 'px', 'em ', or' % '.
Link-(string: ignore by default) can be 'ignore', 'cancel', or 'chain '.
'Ignore'-when the request is being executed, the new request will be ignored.
'Cancel'-when the request is being executed, the request in progress will be canceled immediately and a new request will be executed.
'Chain'-when the request is being executed, the new request link will be followed by the current request and all requests will be executed in sequence.
Duration-(number: The default value is 500). In addition to numbers, it can also be the following values:
'Short '-250 ms
'Normal'-500 ms
'Long'-1000 ms
Transition-(function: Default Value: 'sine: in: out') animation transition effect. You can test the effect of the lower side of the seek. the equation to use for the effect see Fx. transitions. also accepts a string in the following form:
Transition [: in] [: out]-for example, 'linear ', 'quad: in', 'back: in', 'bounce: out', 'elastic: out ', 'sine: in: out'

Event:
Onstart-(function) is triggered when the animation starts.
Oncancel-(function) is triggered when the animation is canceled.
Oncomplete-(function) is triggered when the animation ends.
OnchainComplete-(function) if the 'chain' option is used, it is triggered when all animation chains end

Method:
Start: // used to trigger an animation
Set: // set the Animation Parameters
Cancel: // used to terminate an animation in the running state
Resume: // returns a previously paused animation.

Example:
Var opt = {
Fps: 60,
Link: 'chain', // ignore, cancel, chain
Duration: 'long', // 'short ': 250 ms; 'normal': 500 ms; 'long': 1000 ms
Transition: 'bounce: out', // 'linear ', 'quad: in', 'back: in', 'bounce: out', 'elastic: out ', 'sine: in: out'-[: in] [: out]
OnStart: function () {console. log ('start! ');},
OnComplete: function () {console. log ('after the end! ');}
}
$ ('B'). set ('morph', opt). morph ({'width': 500, 'height': 300 });

Let's demonstrate an example of a complementary Animation:

Var myFx = new Fx. Tween ('content', {// create an animation object for the Tween, and set parameters
Fps: 60,
Duration: 'Long'
});
MyFx. set ('tween', {unit: '%'}); // Add Parameters
$ ('Content'). addEvents ({// bind an animation to the node
'Mouseenter': f1, // run f1
'Mouseleave ': f2, // run the f2 command after the mouse is clicked.
'Click': f3 // click to execute f3
});
Function f1 () {// set css for the node when the mouse clicks
MyFx. set ('background-color', '# f00 ');
}
Function f2 () {// trigger the animation with start after the mouse leaves, so that the height of the node changes. The change amplitude is the percentage.
MyFx. start ('height', [1, 20,200]);
}
Function f3 () {// after clicking the mouse, the animation is triggered to change the node height.
MyFx. start ('height', [1, 20,200]);
}

In addition, the Tween animation provides two methods: fade and highlight. The following example demonstrates their usage:

Example 1:
$ ('Myelement'). fade ('out'); // fade out Node
$ ('Mymeta'). fade (0.7); // change the node transparency.

Example 2:
$ ('Myelement'). highlight ('# ddf ');
$ ('Myelement'). highlight ('# ddf', '# ccc ');

These two examples are very useful for us to implement some simple results. There is no need to set a lot of parameters.

With the animation of the front side, let's learn another deformation Animation:

Var myFx = new Fx. Morph ('content', {// you can set parameters when creating a deformation animation object. Content is a node.
Fps: 60,
Duration: 'Long'
});
MyFx. set ('content', {duration: 'long', transition: 'bounce: out'}); // continue to set the animation parameters.
$ ('Content'). addEvents ({// bind an event to the node
'Mouseenter': f1, // run f1
'Mouseleave ': f2, // run f2 after the mouse leaves.
'Click': f3 // click the mouse and execute f3
});
Function f1 () {// set the initial css for the node after the mouse clicks
MyFx. set ({
'Height': 200,
'Width': 200,
'Background-color': '# f00 ',
'Opacity ': 0.8
});
MyFx. morph ({height: 100, width: 100 });
}
Function f2 () {// trigger the animation after the mouse leaves, changing the height and width of the node
MyFx. start ({
'Height': [10,100],
'Width': [900,300]
});
}
Function f3 () {// trigger the animation after clicking the mouse to change the height, width, background color, and transparency of the node.
MyFx. start ({
'Height': [200,900],
'Width': [2, 200,600],
'Background-color': '# 00f ',
'Opacity ': 0.2
});
}

Now, I have presented the two animation effects of mootools to you. More parameters require more exercises to make them perfect. let's cheer for kids shoes. if you have any questions, go to the QQ Group to discuss them (16648471)