Dojo1.7 animation Effects

In this tutorial, we will explore the Javascript special effects provided by the dojo1.7 toolkit. These special effects will create cool effects for your pages and websites!
This article was translated by Oliver: dojo effects this article is an update to the tutorial with the same name as dojo1.6 and uses the latest method in version 1.7. During the translation process, refer to version 1.6. Official dojo 1.6 Tutorial: Teach you how to create HTML5 JavaScript animation special effects. Introduction: In the previous series of tutorials, we have learned how to use and operate DOM nodes to process 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 this sudden change may mislead users. With the standard special effects tools 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/_ base/FX and dojo/FX packages, We Can concatenate a series of special effects to create a cool dynamic user experience. Note: dojo1.7 contains two FX modules: dojo/_ base/FX and dojo/FX.

• Dojo/_ base/FX provides some basic special effect methods, including: animateproperty, anim, fadein, and fadeout.
• Dojo/FX provides more advanced effects, including chain, combine, wipein, wipeout, and slideto.

(Note: dojo1.7 requires that each module be explicitly imported, including the basic modules in the dojo base, which are loaded by default in previous versions, therefore, pay special attention to this) The most common effect of the fade-in and fade-out effect fading 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. 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 fade-in and fade-out 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>    require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {        var fadeOutButton = dom.byId("fadeOutButton"),            fadeInButton = dom.byId("fadeInButton"),            fadeTarget = dom.byId("fadeTarget");         on(fadeOutButton, "click", function(evt){            fx.fadeOut({ node: fadeTarget }).play();        });        on(fadeInButton, "click", function(evt){            fx.fadeIn({ node: fadeTarget }).play();        });    });</script>

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 examples
Erase special 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. The erased effect can be used to create a drop-down effect for a page, especially when there are some infrequently used content on the page. Of course, you may just think that erasure is better than fading out.

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>    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {        var wipeOutButton = dom.byId("wipeOutButton"),            wipeInButton = dom.byId("wipeInButton"),            wipeTarget = dom.byId("wipeTarget");         on(wipeOutButton, "click", function(evt){            fx.wipeOut({ node: wipeTarget }).play();        });        on(wipeInButton, "click", function(evt){            fx.wipeIn({ node: wipeTarget }).play();        });    });</script>

Unlike fadein/fadeout, the dojo/FX package must be referenced when an erasure function is used. 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
Before sliding, we can see fade-in and fade-out effects and erase effects. Neither of these effects can change the node position on the page. If you want to slide the node, you need to use 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 of a node in the parameter (left and top positions on the page, in pixels px) 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>    require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {        var slideAwayButton = dom.byId("slideAwayButton"),            slideBackButton = dom.byId("slideBackButton"),            slideTarget = dom.byId("slideTarget");         on(slideAwayButton, "click", function(evt){            fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();        });        on(slideBackButton, "click", function(evt){            fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();        });    });</script>

View examples

Animation event animation events we mentioned earlier that 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 commonly used 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> require ([" dojo/FX ", "dojo/on", "dojo/dom-style", "dojo/DOM", "dojo/domready! "], Function (FX, on, style, DOM) {var slideawaybutton = Dom. byid ("slideawaybutton"), slidebackbutton = Dom. byid ("slidebackbutton"), spolicetarget = Dom. byid ("slidetarget"); On (slideawaybutton, "click", function (EVT) {// note that beforebegin is directly transmitted to the slideto function as a parameter of the animation object, // instead of using connect to connect. This ensures that our logic is executed before other beforebegin logic. VaR anim = FX. slideto ({node: slidetarget, left: "200", top: "200", beforebegin: function () {console. warn ("slide target is:", slidetarget); style. set (slidetarget, {left: "0px", top: "100px "});}}); // Of course, we can also pass this processing logic to the slideto function in the same way as beforebegin. // However, since a simple connect connection can solve the problem ...... // (Note: This method is more in line with the characteristics of the event, that is, the user logic is executed only after the event is triggered) on (anim, "end", function () {style. set (slidetarget, {backgroundcolor: "blue"}) ;}, true); // do not forget to start this animation effect! Anim. play () ;}); On (slidebackbutton, "click", function (EVT) {var anim = FX. sshorteto ({node: sshortetarget, left: "0", top: "100", beforebegin: function () {style. set (slidetarget, {left: "200px", top: "200px"}) ;}); On (anim, "end", function () {style. set (slidetarget, {backgroundcolor: "red"}) ;}, true); anim. play () ;}); </SCRIPT>

In this sample code, we noticed that beforebegin and onend should be added ", this is consistent with the usage of addeventlistener) the callback methods for these two events are not the same. Beforebegin is directly passed to the slideto function as a parameter. This is because beforebegin processing functions for some animation effects are connected when an object is created. If we connect our beforebegin processing functions through beforebegin, then our processing function will be called after the animation's beforebegin processing function. Therefore, the method passed in as a parameter ensures that our processing functions can be executed first. View examples
Series animation chaining what if we want to play multiple animation effects continuously? We can use the end event we just mentioned to start another effect at the end of a special effect, but this is obviously not convenient. Fortunately, the dojo/FX module provides a set of very convenient functions for this type of common requirements, so that multiple special effects can be played continuously or simultaneously. Each of these methods returns a new dojo. animation object, which contains a group of events and methods that can describe the entire animation sequence. Let's first take a look at how FX. Chain allows an animation effect to be played one by one (in series:

<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> require ([" dojo/_ base/FX ", "dojo/FX", "dojo/on", "dojo/DOM", "dojo/domready! "], Function (basefx, FX, on, Dom) {var slideawaybutton = Dom. byid ("slideawaybutton"), slidebackbutton = Dom. byid ("slidebackbutton"), spolicetarget = Dom. byid ("slidetarget"); // sets some click event processing functions to play our series animation on (slideawaybutton, "click", function (EVT) {FX. chain ([basefx. fadein ({node: slidetarget}), FX. sshorteto ({node: sshortetarget, left: "200", top: "200"}), basefx. fadeout ({node: slidetarget})]). play () ;}); On (slidebackbutton, "click", function (EVT) {FX. chain ([basefx. fadein ({node: slidetarget}), FX. sshorteto ({node: sshortetarget, left: "0", top: "100"}), basefx. fadeout ({node: slidetarget})]). play () ;}); </SCRIPT>

As you can see, when calling FX. chain, we directly input a special effect array and call the play method to start the entire special effect chain for the dojo. animation object returned by this method. Now we don't need to start the special effects one by one. FX. Chain has solved the problem for us. View examples
Composite animation combiningdojo/FX provides another convenient way to combine multiple animation effects at the same time. The returned dojo. animation object triggers the onend event after the animation effect with the longest time consumption ends. 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> require ([" dojo/_ base/FX ", "dojo/FX", "dojo/on", "dojo/DOM", "dojo/domready! "], Function (basefx, FX, on, Dom) {var slideawaybutton = Dom. byid ("slideawaybutton"), slidebackbutton = Dom. byid ("slidebackbutton"), spolicetarget = Dom. byid ("slidetarget"); // sets some click event processing functions to play our combined animation on (slideawaybutton, "click", function (EVT) {FX. combine ([basefx. fadein ({node: slidetarget}), FX. slideto ({node: slidetarget, left: "200", top: "200"})]). play () ;}); On (slidebackbutton, "click", function (EVT) {FX. combine ([FX. sshorteto ({node: sshortetarget, left: "0", top: "100"}), basefx. fadeout ({node: slidetarget})]). play () ;}); </SCRIPT>

In this example, the fade-in and slide effects are not played in sequence, but occur simultaneously. 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 combined to create very sophisticated and complex effects. View examples
With the special effects of dojo, you can quickly add interesting animated effects to the page. The dojo/_ base/FX module contains the fade-in and fade-out methods fadein and fadeout. With the dojo/FX module, you can also use powerful effects such as erasure and sliding. In addition, with the chain and combine methods, you can easily and quickly build more complex and advanced animation effects.
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.