We'll learn how to use Fx.morph (which essentially lets you gradient multiple style sheet properties at the same time), and then we'll examine some of the FX options applied to Fx.tween and fx.morph, and finally we'll see how to use the FX event, such as "OnComplete" and " OnStart ". With these options and events, we can gain better control over the animation of the deformation.
Fx.morph
Create a new Fx.morph
Initializing a new deformation is similar to creating a new gradient, except that you want to specify more than one style attribute.
Reference code:
Copy Code code as follows:
First, we assign the element to a variable
var morphelement = $ (' morph_element ');
Now, we create a new strain.
var morphobject = new Fx.morph (morphelement);
Now we can set the style properties, just like Fx.tween.
But we can set multiple style properties here.
Morphobject.set ({
' Width ': 100,
' Height ': 100,
' Background-color ': ' #eeeeee '
});
We can also start our deformations like a gradient.
But we have to place multiple attribute values at the same time.
Morphobject.start ({
' Width ': 300,
' Height ': 300,
' Background-color ': ' #d3715c '
});
These are all of the contents, including creating, setting, and starting a deformation.
To make this more reasonable, we should create our variables, separate our functions, and create events to control this thing:
Reference code:
Copy Code code as follows:
var morphset = function () {
Here we can set style properties like Fx.tween
But here we can set multiple style properties at the same time
This.set ({
' Width ': 100,
' Height ': 100,
' Background-color ': ' #eeeeee '
});
}
var morphstart = function () {
We can also start a deformation like a gradient.
But now we can set multiple style properties at the same time
This.start ({
' Width ': 300,
' Height ': 300,
' Background-color ': ' #d3715c '
});
}
var morphreset = function () {
Set to the Start value
This.set ({
' Width ': 0,
' Height ': 0,
' Background-color ': ' #ffffff '
});
}
Window.addevent (' Domready ', function () {
First, we assign the element to a variable
var morphelement = $ (' morph_element ');
Now, we create our deformations.
var morphobject = new Fx.morph (morphelement);
Here we add click events to the button
and binding morphobject and this function
So you 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 code as follows:
<div id= "Morph_element" ></div>
<button id= "Morph_set" >Set</button>
<button id= "Morph_start" >Start</button>
<button id= "Morph_reset" >reset</button>
Setstartreset
FX Options (options)
The following options can be accepted by both Fx.tween and Fx.morph. They are very easy to implement and can give you a lot of control over your effects. To use these options, use the following syntax:
Reference code:
Copy Code code as follows:
Create your gradients or deformations.
Then set your options between the braces {}
var morphobject = new Fx.morph (morphelement, {
First, the name of the option.
Then followed by a colon (:)
And then define your options.
Duration: ' Long ',
Transition: ' Sine:in '
});
FPS (frames per second, frames each second)
This option determines the number of frames per second of the animation. The default value is 50, and you can accept numbers and variables with values as numbers.
Reference code:
Copy Code code as follows:
Create your gradients or deformations.
Then set your options between the braces {}
var morphobject = new Fx.morph (morphelement, {
Fps:60
});
Or so
var framespersecond = 60;
var tweenobject = new Fx.tween (tweenelement, {
Fps:framespersecond
});
Unit (Units)
This option sets the number of units. For example, does your 100 mean 100 pixels (px), percent, or em?
Reference code:
Copy Code code as follows:
Create your gradients or deformations.
Then set your options between the braces {}
var morphobject = new Fx.morph (morphelement, {
Unit: '% '
});
Link (connection)
The link option provides a way for you to manage a function call with multiple startup effects. For example, if you have a mouse move up (mouseover) effect, do you want to start this effect every time the user moves up? Or if a person moves the mouse two times, should it ignore the second response or concatenate them, and then call the effect the second time after the first call completes? Link has three settings:
"Ignore" (default)--ignores any calls that initiate new effects before an effect is completed
Cancel--if there is another effect call, discard the current effect and handle the new effect call instead
"Chain"--the chain allows you to connect the effects like a "chain", stack the calls, and then call the effects to complete
Reference code:
Copy Code code as follows:
Create your gradients or deformations.
Then set your options between the braces {}
var morphobject = new Fx.morph (morphelement, {
Link: ' Chain '
});
Duration (duration)
Duration allows you to define the duration of the animation. Continuous events and speeds are not the same, so if you want an object to move 100 pixels in a 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 number, or three shortcuts:
"Short" =250ms
' Normal ' =500ms (default)
"Long" =1000ms
Reference code:
Copy Code code as follows:
Create your gradients or deformations.
Then set your options between the braces {}
var morphobject = new Fx.morph (morphelement, {
Duration: ' Long '
});
Or so
var morphobject = new Fx.morph (morphelement, {
duration:1000
});
Transition (Transition effect)
The last option: transition, allows you to determine the transition type. For example, it is not a smooth transition or it should start slowly and then accelerate until the end. Look at these transition effects that can be used in MooTools's core library:
Reference code:
Copy Code code as follows:
var tweenobject = new Fx.tween (tweenelement, {
Transition: ' Quad:in '
});
Note: The first transition bar triggers a red eye-catching effect at the beginning, triggering an orange eye-catching effect at the end. See how the FX event is used below.
The above 30 transition types can be divided into 10 groups:
Quad
Cubic
Quart
Quint
Expo
Circ
Sine
Back
Bounce
Elastic
Each group has three options:
Ease in
Ease out
Ease in Out
Events in FX
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 gives you another layer of control over your gradients and deformations:
onstart--when FX begins to trigger
oncancel--when FX is canceled
oncomplete--when FX is complete
onchaincomplete--when the FX chain is complete
When you create a gradient or deformation, you can set one of these events, just as you set one or more options, but instead of setting a value, you set a function:
Reference code:
Copy Code code as follows:
First, we assign a new fx.tween to a variable
And then define the elements that we want to gradient
Quadin = new Fx.tween (Quadin, {
Here are some options
Link: ' Cancel ',
Transition: ' Quad:in ',
Here are some of the events
Onstart:function (passes_tween_element) {
These events will pass the object of the gradient
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 after the last event or option, there is no
Oncomplete:function (passes_tween_element) {
At the end, we apply a highlight effect
Passes_tween_element.highlight (' #C54641 ');
}
});
Example
To generate the warp code above, we can reuse our functions in a way that we haven't seen in the tutorials in this series. All of the deformed elements above use two functions, one to fade out when the mouse enters, and the other to return when the mouse is left:
Reference code:
Copy Code code as follows:
This is the function we call when the mouse enters.
Width gradient to 700px
var enterfunction = function () {
This.start (' width ', ' 700px ');
}
This is the function we called when we left the mouse.
Width gradient back to 300px
var leavefunction = function () {
This.start (' width ', ' 300px ');
}
Window.addevent (' Domready ', function () {
Here we assign some elements to the variable
var Quadin = $ (' Quadin ');
var quadout = $ (' quadout ');
var quadinout = $ (' quadinout ');
Then we create three gradient elements
Corresponding to the above three variables respectively
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 to enter and mouse away events
Note the use of addevents.
is similar to the use of. Addevent.
But you can add multiple events in the following mode
$ (' Quadin '). Addevents ({
First, you want to explain what the event is and enclose the event in single quotes
Then followed by a colon (:)
And finally place your function
In this example, the function banding to this 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 those same functions here.
But every time we apply an event to a different element,
And bind a different gradient
' MouseEnter ': Enterfunction.bind (Quadinout),
' MouseLeave ': Leavefunction.bind (quadinout)
});
Learn more ...
You can use the tools in the FX library to gain more granular control over the effects. Be sure to read the FX section in the document, as well as tween,morph , and transitions.
Download a Zip package that contains the things you need to start
Include examples on this page, MooTools 1.2 core library, an external JavaScript file, an external CSS file, or a simple HTML file.
