Official dojo 1.6 Tutorial: Hands-on instructions on creating HTML5 JavaScript animation effects

In this tutorial, we will explore the Javascript special effects provided by the dojo toolkit, which will create cool effects for your pages and websites!

Difficulty: Beginner
Required dojo version: 1.6

By Bryan Forbes

Tiimfei@gmail.com (feijia)

In the previous series of tutorials, we have learned how to use and operate DOM nodes to handle DOM events. However, when we perform operations on DOM nodes, some conversions will appear abrupt: for example, deleting a node will suddenly disappear on the page from the user's perspective, sometimes such sudden changes on the page mislead users. With the special effect tool provided by dojo, we can build a more consistent user experience and make our applications look more refined and perfect. If we use more functions in the dojo. FX package, we can concatenate a series of special effects to create a cool dynamic user experience.

Fade)

The most common special effect is the fade-in and fade-out of DOM nodes ). This effect is often used on web pages, so dojo includes it in the basic package of dojo. (TRANSLATOR: you do not need to use dojo. require to reference any package.) We can use this effect to make the appearance and disappearance of nodes on the page appear continuous and smooth. The following is an example code that uses dojo to create a gradient effect:

<button id="fadeOutButton">Fade block out</button><button id="fadeInButton">Fade block in</button> <div id="fadeTarget" class="red-block">    A red block</div><script>    dojo.ready(function(){        var fadeOutButton = dojo.byId("fadeOutButton"),            fadeInButton = dojo.byId("fadeInButton"),            fadeTarget = dojo.byId("fadeTarget");         dojo.connect(fadeOutButton, "onclick", function(evt){            dojo.fadeOut({ node: fadeTarget }).play();        });        dojo.connect(fadeInButton, "onclick", function(evt){            dojo.fadeIn({ node: fadeTarget }).play();        });    });</script>

Only one line of code is required to create a progressive method: dojo. fadeout and dojo. fadein. All animation effect functions in Dojo only accept one parameter object. This parameter object contains a series of attributes to set the desired animation effect. One of the most important attributes is node. The node attribute value is the ID (string) of a DOM node or DOM node ). Another parameter, duration, specifies the duration for playing the effect, in milliseconds. If duration is not specified, the default playback time is 350 milliseconds. Of course, different animation effects have different parameters, but these two parameters are sufficient for fade-in and fade-out effects.

The Return Value of the animation effect function of dojo is a dojo. animation object. There are several methods for this object: Play, pause, stop, status, and gotopercent. We can see from the name that these methods are used to control the playback of the animation effect. When an animation object is created, it is not played immediately. You need to call the play method to start playing.

View Example:

Http://dojotoolkit.org/documentation/tutorials/1.6/effects/demo/fade.html

Erase effect (wiping)

Another common effect is the erasure effect: it actually refers to changing the height of a node and gradually displaying or disappearing its content. The effect is similar to that of the wipers that have been flushed on the windshield.

See the following sample code.

<button id="wipeOutButton">Wipe block out</button><button id="wipeInButton">Wipe block in</button> <div id="wipeTarget" class="red-block wipe">    A red block</div><script>    // Load the dojo.fx module    dojo.require("dojo.fx");     // Don't forget, when using modules, wrap your code in a dojo.ready    dojo.ready(function(){        var wipeOutButton = dojo.byId("wipeOutButton"),            wipeInButton = dojo.byId("wipeInButton"),            wipeTarget = dojo.byId("wipeTarget");         dojo.connect(wipeOutButton, "onclick", function(evt){            dojo.fx.wipeOut({ node: wipeTarget }).play();        });        dojo.connect(wipeInButton, "onclick", function(evt){            dojo.fx.wipeIn({ node: wipeTarget }).play();        });    });</script>

Unlike fadein fadeout, You need to reference the dojo. FX package before using the erasure function. In this example, we add a CSS class wipe to the target node "wipetarget". This class sets the height of the node: auto, this is because the effect of the wipein function is to change from the existing height of the node to its natural height (that is, height: auto)

View examples

Slide

We have seen the fade-in, fade-out, and erase effects. Neither of these effects can change the node's position on the page. To slide the node, use dojo. FX. slideto.

The sliding effect can create a dynamic sense, and sometimes it is used to indicate a certain loading progress. The dojo. FX. slideto function allows you to specify the target position (left and top positions on the page) of the node in the parameter and slide the node to the target position.

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide">    A red block</div><script>    dojo.require("dojo.fx");     dojo.ready(function(){        var slideAwayButton = dojo.byId("slideAwayButton"),            slideBackButton = dojo.byId("slideBackButton"),            slideTarget = dojo.byId("slideTarget");         dojo.connect(slideAwayButton, "onclick", function(evt){            dojo.fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();        });        dojo.connect(slideBackButton, "onclick", function(evt){            dojo.fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();        });    });</script>

View Example:
Click Open Link

Animation events

As mentioned above, all animation effect functions in Dojo will return a dojo. animation object. This object not only provides a method to control the playing pause of an animation, but also provides a series of events for us to listen to, so that we can play the animation before it is played, make Different Response Actions after playing. The two most important and common events are beforebegin and onend.
Let's take a look at the sample code for using an animation event:

<Button id = "slideawaybutton"> slide block away </button> <button id = "slidebackbutton"> slide block back </button> <Div id = "slidetarget" class =" red-block slide "> a red block </div> <SCRIPT> dojo. require ("dojo. FX "); dojo. ready (function () {var slideawaybutton = dojo. byid ("slideawaybutton"), slidebackbutton = dojo. byid ("slidebackbutton"), spolicetarget = dojo. byid ("slidetarget"); dojo. connect (slideawaybutton, "onclick", function (EVT) {var anim = dojo. FX. slideto ({node: slidetarget, left: "200", top: "200", beforebegin: function () {dojo. style (slidetarget, {left: "0px", top: "100px"}) ;}}); // set the background color to Blue dojo after the animation is played. connect (anim, "onend", function () {dojo. style (slidetarget, {backgroundcolor: "blue"}) ;}); anim. play () ;}); dojo. connect (slidebackbutton, "onclick", function (EVT) {var anim = dojo. FX. slideto ({node: slidetarget, left: "0", top: "100", beforebegin: function () {dojo. style (slidetarget, {left: "200px", top: "200px"}) ;}}); // After the animation is played, change the background color to Red dojo. connect (anim, "onend", function () {dojo. style (slidetarget, {backgroundcolor: "red"}) ;}); anim. play () ;}); </SCRIPT>

In this sample code, we noticed that the callback methods for adding beforebegin and onend events are not the same. Beforebegin is directly passed to the slideto function as a parameter. Onend is connected using dojo. Connect. This is because beforebegin processing functions for some animation effects are connected when an object is created. If we use dojo. connect to register our beforebegin processing function, then our processing function will be called after the animation's own beforebegin processing function. Therefore, the method passed in as a parameter ensures that our processing functions can be executed first.

View examples

Chaining)

The strength of dojo animation effects is that you can use chained calls to concatenate many different effects for execution. in fact, by listening to the onend event, we can execute another animation after the previous animation is executed, but this is not very convenient. With dojo. FX. chain, we can easily set a series of animations for continuous execution. Let's look at another example.

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide chain">    A red block</div><script>    dojo.require("dojo.fx");     dojo.ready(function(){        var slideAwayButton = dojo.byId("slideAwayButton"),            slideBackButton = dojo.byId("slideBackButton"),            slideTarget = dojo.byId("slideTarget");         dojo.connect(slideAwayButton, "onclick", function(evt){            dojo.fx.chain([                dojo.fadeIn({ node: slideTarget }),                dojo.fx.slideTo({ node: slideTarget, left: "200", top: "200" }),                dojo.fadeOut({ node: slideTarget })            ]).play();        });        dojo.connect(slideBackButton, "onclick", function(evt){            dojo.fx.chain([                dojo.fadeIn({ node: slideTarget }),                dojo.fx.slideTo({ node: slideTarget, left: "0", top: "100" }),                dojo.fadeOut({ node: slideTarget })            ]).play();        });    });</script>

From this code, we can see that we use dojo. FX. chain Method, input an array composed of multiple animation effects, and return the dojo in the chain method. execute play on the animation object, and the series of animations will be executed one by one.

View examples

Merge execution

The chain method executes a series of animation effects one by one, while the dojo. FX. Combine method allows a group of animations to be executed simultaneously. In the previous example, fade in first, then slide, and finally fade out. Using combine, we can execute these three effects at the same time. The combine method returns a new dojo. animation object that represents the new merged animation. The onend event of the animation object will be triggered after all the merged animations are executed.

<button id="slideAwayButton">Slide block away</button><button id="slideBackButton">Slide block back</button> <div id="slideTarget" class="red-block slide chain">    A red block</div><script>    dojo.require("dojo.fx");     dojo.ready(function(){        var slideAwayButton = dojo.byId("slideAwayButton"),            slideBackButton = dojo.byId("slideBackButton"),            slideTarget = dojo.byId("slideTarget");         dojo.connect(slideAwayButton, "onclick", function(evt){            dojo.fx.combine([                dojo.fadeIn({ node: slideTarget }),                dojo.fx.slideTo({ node: slideTarget, left: "200", top: "200" })            ]).play();        });        dojo.connect(slideBackButton, "onclick", function(evt){            dojo.fx.combine([                dojo.fx.slideTo({ node: slideTarget, left: "0", top: "100" }),                dojo.fadeOut({ node: slideTarget })            ]).play();        });    });</script>

In this example, we use combine to execute both the fade-in effect and the slide effect.

By using chain and combine, we can combine several simple effects to produce good animation effects. At the same time, the return values of chain and combine are still an animation object, that is, they can be further connected and merged, so they can create very sophisticated and complex effects.

Summary

With the special effects of dojo, you can quickly add interesting animated effects to the page. The basic dojo package contains the fade-in and fade-out method dojo. fadein dojo. fadeout. You can also use the erasure and slide effects through require dojo. FX. Combining the chain and combine methods, you can build an advanced animation effect.

Of course, if you want to further control the animation effect, such as adjusting the height of a DOM node like Wipeout, but not reducing it to 0 (completely erased ), or adjust the gradient of the background color through an animation? Dojo provides a more general and powerful dojo. animateproperty object. We will introduce it in detail in future tutorials.

Reference (translator)

This tutorial is relatively simple, and the examples provided are also indicative. Below I have found some examples of complex and dazzling special effects made using dojo. FX. For your reference:

Complex text animation effects implemented by dojo:

Http://gruppler.dojotoolkit.org/

Image splitting "Avatar" special effect:

Http://demos.davidjs.com/avatar/