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)

Related courses:
One week learn Mootools 1.4 Chinese Tutorial: Sequence Theory
One week learn Mootools 1.4 Chinese tutorial :( 1) Dom Selector
One week learn Mootools 1.4 Chinese tutorial :( 2) Functions
One week learn Mootools 1.4 Chinese tutorial :( 3) Events
One week learn Mootools 1.4 Chinese tutorial :( 4) Type
One week learn Mootools 1.4 Chinese tutorial :( 5) Ajax
One week learn Mootools 1.4 Chinese tutorial :( 6) Animation
One week learn Mootools 1.4 Chinese tutorial :( 7) Summary ends

Other articles about Mootools 1.4:
Lightbox effect plug-in I wrote, based on MooTools 1.4
My perpetual calendar plug-in (including calendar, solar term, various holidays, etc.), based on MooTools 1.4
I wrote an effect plug-in similar to the menu in the upper left corner of the home page of this site, based on MooTools 1.4
Advanced usage of delay in Mootools
Bind is used in Mootools to bind objects to functions.
Using extend and implement in Mootools to extend functions or methods for your Functions
Write an extension by yourself and change the syntax of Mootools exactly the same as that of Jquery.
Mootools1.4 custom events
Using Mootools1.4, I wrote something that moves the background image as the mouse moves.