反弹的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();