（4）Dojo学习之动画学习_html-js-css

概述引言dojo_basefx实现动画效果1 使用animateProperty方法实现动画方法2 解释剩余三种方法实现动画方法dojofx实现动画效果1实现卷帘效果wipeIn和wipeOut2实现滑动效果slideTo3多个动画组合使用Dojo关于面向切面编程的实现AOP1前置通知2后置通知3环绕通

引言dojo_basefx实现动画效果1 使用animateProperty方法实现动画方法2 解释剩余3种方法实现动画方法dojofx实现动画效果1实现卷帘效果wipeIn和wipeOut2实现滑动效果slIDeto3多个动画组合使用Dojo关于面向切面编程的实现AOP1前置通知2后置通知3环绕通知

1.引言

在本篇博客中主要介绍两个模块的使用，1个是dojo/_base/fx,另外1个模块是dojo/fx，这两个模块的作用是实现DOM元素的动画效果，通过名字我们可以看出：

dojo/_base/fx提供1些基础的动画效果dojo/fx提供1些高级的动画效果

接下来我们就来用1些这两个模块实现的动画效果

2 dojo/_base/fx实现动画效果

在dojo/_base/fx模块中提供了5个方法来实现动画效果：animateProperty,anim,fadeIn,fadeOut，接下来我们主要介绍1个方法animateProperty,由于当这个方法会使用的时候，其他的方法也就会了。

2.1 使用（animateProperty）方法实现动画方法

我们首先介绍1下args的参数：

node：对那1个dom实现动画效果propertIEs：动画的具体属性设置，是1个style的键值对（最重要的1个属性）duration：动画履行多久easing：可选参数，是1个函数，用来描写动画应当如何变化，dojo给了1些自定义的函数，参考“onEnd：可选参数，当动画完成以后触发的函数delay：当方法触发以后，延迟几秒触发动画，默许是0秒

//用于动画的div<div ID="nodeID" style="background-color: red"></div>//代码 require(["dojo/_base/fx","dojo/domready!"],function(basefx){            basefx.animateProperty({                node:"nodeID",propertIEs:{                    wIDth: { start: '200',end: '400',units:"px" },height: { start:'200',units:"px" }                },duration:4000,delay:2000,easing: function (n) {                    return (n==0) ? 0 : Math.pow(2,10 * (n - 1));                },onEnd:function(node){                    alert("动画结束了")                }            }).play();

解释参数：

此函数的意义是将动画从长宽为200px变成400pxnode属性代表对哪个Dom实现动画效果duration属性代表动画的时间，也就是变化时间为5秒delay属性代表我们延迟两秒easing方法有1个返回值，代表动画变化的速率，此时期表动画越变越快，如果不写这个属性代表均匀变化onEnd方法代表当动画运行结束时，回调的方法，方法传入1个node参数，代表动画的对象

注意1点：propertIEs的样式对应的值也能够是1个函数，例如：

basefx.animateProperty({    node:"nodeID",propertIEs:{        wIDth:{            start:function(node){ return 100; },end:function(node){ return 200; }        }    }}).play();

在强调1下：propertIEs的值可以是1个函数，在这个函数中可以拿到我们的DOM元素（注意函数有1个参数为node）

2.2 解释剩余3种方法实现动画方法

我们直接看剩余3个方法

anim(node,propertIEs,duration,easing,onEnd,delay) 其实anim的方法和animateProperty方法是1样的，区分是animateProperty传入1个对象，anim方法是传入6个参数fadeIn可让dom元素从无到有的1个进程，他的args参数主要填：node,duration,easing,这3个参数的意义和animateProperty参数的意义相同fadeOut方法可让DOM元素从有到无的1个进程，他的args参数主要填：node,这3个参数的意义和animateProperty参数的意义相同3 dojo/fx实现动画效果

在dojo/fx模块中我们可以实现1些高级的动画效果，这个模块给我们提供了1些方法：

wipeIn和wipeOut实现了卷帘效果slIDeto实现了DOM元素的移动combine和chain可以同时让多个DOM元素进行动画效果3.1实现卷帘效果wipeIn和wipeOut

这两个方法都需要传入1个args对象，基本和animateProperty类似，代码以下

wipeOut方法，需要注意的是，args没有propertIEs属性（千万不要写）

//动画的dom元素 <div ID="nodeID" style="wIDth: 500px;height: 500px; background-color: red"></div> //动画代码require(["dojo/fx","dojo/domready!"],function(fx){            fx.wipeOut({                node:"nodeID",easing: function (n) {                    return (n==0) ? 0 : Math.pow(2,onEnd:function(node){                    alert("动画结束了")                }            }).play();        })

wipeIn方法，需要注意的是，args没有propertIEs属性（千万不要写）

//注意两点：//      1.div1开始display：none,同时不需要设置height属性（框架总是指定为auto）//      2.div里面必须有内容（必须有内容，不然不行）    <div ID="nodeID" style="wIDth: 500px;background-color: red;display: none;">        <b>This is a container of random content to wipe in!</b>    </div>

//Js代码require(["dojo/fx",function(fx){                fx.wipeIn({                    node:"nodeID"                }).play();        })

3.2实现滑动效果slIDeto

滑动效果很简单，就是从某1个位置移动到另外1个位置，代码以下

 <div ID="nodeID" style="wIDth: 500px;height: 500px; background-color: red"></div>

require(["dojo/fx",function(fx){                fx.slIDeto({                    node: "nodeID",top: "40",left: "50",units: "px"                }).play();        })

3.3多个动画组合使用

dojo/fx 模块给我们提供了两个方法，1个是chain，1个叫做combine，其中他们的区分是（假定有两个动画效果）：

chain函数是多个动画顺序履行（先履行1动画，在履行2动画）combine是多个动画同时履行（1和2动画同时履行）

实例代码：

   <div ID="nodeID" style="wIDth: 200px;height:200px; background-color: red"></div>    <div ID="nodeID2" style="wIDth: 500px;background-color: red;display: none;">        <b>This is a container of random content to wipe in!</b>    </div>

require(["dojo/fx",function(fx){            fx.combine([                fx.wipeOut({                    duration: 1200,node: "nodeID"                }),fx.wipeIn({                    duration: 1200,node: "nodeID2"                })            ]).play();        })

4.Dojo关于面向切面编程的实现（AOP）

如果大家学过后台语言（比如Java），大家1定会知道1个非常着名的概念：AOP，AOP的目的也是为了模块化编程，一样Dojo也给我们实现了简单的AOP，这个模块叫做dojo/aspect，接下来我们看1下这个模块如何和我们的动画效果结合。
在aspect模块中主要实现了3个方法：after,around,before,我们将这3个方法分别叫做：后置通知，环绕通知，前置通知（具体甚么意思，大家可以去看 AOP专业的书），在这里我们主要简单说1下这3个方法的作用。

4.1前置通知

require(["dojo/fx","dojo/aspect",function(fx,aspect){            var anim=fx.wipeOut({                node:"nodeID",duration:4000            });            aspect.before(anim,"play",function(){                alert("履行动画之前")            })            anim.play();        })

解释：我们利用切面，绑定了在anim对象在只想play函数之前，首先履行我们的切面函数。4.2后置通知

require(["dojo/fx",onEnd:function(node){                    alert("动画结束了")                }            });            aspect.after(anim,"onEnd",function(){                alert("履行动画以后")            })            anim.play();        })

解释：我们在履行onEnd函数以后履行切面函数

4.3环绕通知

        require(["dojo/fx",duration:4000            });            aspect.around(anim,function(originalFoo){                return function(){                    alert("履行动画之前")                    var results = originalFoo.apply(this,arguments);                    alert("履行动画以后")                }            })            anim.play();