dojo动画

反弹的div示例

var currentPosition = 0;

var leftToRight = true ;

function moveNode(){
var getBall=dojo.byId("ball");
//移动
(leftToRight?currentPosition++ : currentPosition--);
dojo.marginBox(ball,{l:currentPosition});
//当接近边界时切换leftToRight
var containerBox = dojo.marginBox("frame");
var ballBox = dojo.marginBox("ball");
if(leftToRight){
if (currentPosition+ballBox.w-1 > containerBox.l + containerBox.w){
leftToRight = false;
}
}else{
if (currentPosition < containerBox.l)
leftToRight = true;
}
}
    dojo.addOnLoad(function(){
window.setInterval(moveNode,20);

});

使用dojo.animateProperty来实现动画

var ball = dojo.marginBox("ball");
var containerBox = dojo.marginBox("frame");
var animation = dojo.animateProperty({
node:dojo.byId("ball"),
properties:{
left:{
start:containerBox.l,
end:containerBox.l + containerBox.w - ball.w
},
backgroundColor:{
start:"blue",
end:"red"
}
}
});
var feedbackNode = dojo.byId("target2");
feedbackNode.innerHTML="";
function append(text){
feedbackNode.innerHTML = feedbackNode.innerHTML + "" +text ;
}
dojo.connect(animation,"onBegin",dojo.partial(append,"onBegin"));
dojo.connect(animation,"onAnimate",dojo.partial(append,"onAnimate"));
dojo.connect(animation,"onEnd",dojo.partial(append,"onEnd"));
dojo.connect(animation,"onPlay",dojo.partial(append,"onPlay"));

animation.play();

dojo.partial(append,"onPlay")它所做的是创建一个新的函数，这个函数封装了append函数并且指定了第一个参数 "onPlay"。需要注意的是， dojo.partial允许你指定多个参数，因此你可以定义任意数量的参数作为函数固定前置的参数。

使用dojo.anim实现动画(原理如下)

dojo.anim = function(node,properties,duration,easing,onEnd,delay){
return dojo.animateProperty{
node:          node,
duration:      duration || dojo._Animation.prototype.duration,
properties:    properties,
easing:        easing,
onEnd:         onEnd
}.play(delay||0);  
    }

dojo.anim(dojo.byId("ball"),{backgroundColor:{end:"yellow"}});

示例：

function restructure(){
   dojo.query("form > p").addClass("formTitle");
var questionDiv = dojo.query("div.questions")[0];
dojo.query("p",questionDiv).forEach(function(node,questionNumber){
var pQuestion = !(questionNumber%2);
var band = (questionNumber%4) < 2 ?"lightBg":"darkBg";
var className = "question" + band;
var question = createElement("div",className);
dojo.place(question,questionDiv,"last");
dojo.query("span",node).forEach(function(choiceNode){
var choice = createElement("p","choice");
dojo.place(choiceNode,choice,"last");
dojo.place(choice,question,"last");

if (pQuestion&&choiceNode.firstChild.value == "yes"){
dojo.connect(question,"click",dojo.partial(checkSQuestion,question,choiceNode.firstChild));
}
});
dojo.addClass(node,"questionText");
dojo.place(node,question,"last");
});
}

function checkSQuestion(pQuestion,choiceNode){
var sQuestion = pQuestion.nextSibling;
var start = 0 ,end = 130;
if(!choiceNode.checked){
start=end;end = 0;
}
dojo.anim(sQuestion,{
height:{start:start,end:end}
});
}

dojo.fadeIn

dojo.fadeOut

dojo.fx模块提供的函数：
1. dojo.fx.easing --A collection of easing functions that can be used with dojo.animateProperty and

its extensions to modify an animation.
2. dojo.fx.wipeIn --Wipe in a node(结点的高度由0--->最大)
3. dojo.fx.wipeOut --Wipe out a node(结点的高度由最大-->0)
4. dojo.fx.slideTo --把一个结点从当前位置滑动到一个指定X，Y的绝对位置。
5. dojo.fx.Toggler --一个辅助类，可以把两个动画叠加到一个结点，一个用于显示动画，一个用于隐藏动画，比如淡入一个结点用于显示然后淡出隐藏。
6. dojo.fx.chain --一个辅助类，可以把两个动画实例合并为一个动画实例，两个动画按顺序运行。
7. dojo.fx.combine --一个辅助类，可以把两个动画实例合并为一个动画实例，两个动画同时并行运行。

示例：

dojo.require("dojo.fx");

dojo.fx.wipeIn({
  node : pQuestion.nextSibling
}).play();

var f = dojo.fx[choiceNode.checked ? "wipeIn" : "wipeOut"];
f({node:pQuestion.nextSibling}).play();

dojo.fx.slideTo({
  node : pQuestion.nextSibling,
left:100,
top:100
}).play();