Admin: 1 версия

2010-05-26T08:24:24Z

1 версия

в 18:52, 25 мая 2010

2010-05-25T18:52:56Z

Новая страница

== Animate width property==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>

dojo.addOnLoad(function( ) {
dojo.animateProperty({
node: "box",
properties: { width: { end: 500 } }
}).play( );
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Animation: Add new class to tag and==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<style>
.oldClass {
background-color : blue;
}
.newClass {
background-color : red;
}
</style>
<script>
dojo.require("dojox.fx.style");
function testIt() {
dojox.fx.addClass({cssClass:"newClass", node:"div1"}).play();
}
</script>
</head>
<body onload=testIt()>
<div id="div1" class="oldClass">Text</div>
</body>
</html></source>

== Animation easing function==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>

dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 10000,
rate : 1000,
easing : function(x) { return x*2; },
properties : {
height : {start : "200", end : "400"},
width : {start : "200", end : "400"}
}
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Animation: enlarge==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>

dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 10000,
rate : 1000,
properties : {
height : {start : "200", end : "400"},
width : {start : "200", end : "400"}
}
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Animation: fly==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
function fxTest() {
dojo.fx.chain([
dojo.fx.wipeOut({node:"myDiv"}),
dojo.fx.rubine([
dojo.fx.slideTo({node:"myDiv",left:"0",top:"400",unit:"px"}),
dojo.fx.wipeIn({node:"myDiv"})
])
]).play();
}
</script>
</head>
<body onLoad="fxTest();">
<div id="myDiv"
style="background-color:#f00;width:400px;height:400x;">
Hello </div>
</body>
</html></source>

== Animation: resize==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.fx._base");
function show() {
dojox.fx.sizeTo({
node:"my", duration: 2000, width: 300, height: 300,
method: "chain"
}).play();
}
</script>
</head>
<body onload="show()">
<div id="my"
style="background-color:#f00;">
</div>
</body>
</html></source>

== Animation: stratch==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 3000,
properties : {
width : {start : "200", end : "400"}
}
}).play( );
});
});
</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click to stratch</div>
</body>
</html></source>

== Animation with dojox.timing.Sequence==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.timing.Sequence");
function writeText(msg) {
dojo.byId("my").innerHTML += msg + "<br>";
}
function testIt() {
var s = new dojox.timing.Sequence({});
var funcs = [
{func : [writeText, this, "Pause: 2 seconds"],pauseAfter : 2000},
];

s.go(funcs, function() { writeText("Done"); });
}
</script>
</head>
<body onLoad="testIt();">
<div id="my"> </div>
</body>
</html></source>

== Chained animation==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
var a1 = dojo.fx.slideTo({
node:box,
top : "150",
left : "300"
});
var a2 = dojo.fx.slideTo({
node:box,
top : "20",
left : "350"
});
var slides = dojo.fx.chain([a1,a2]);
var a1 = dojo.fadeIn({
node:box
});
var a2 = dojo.fadeOut({
node:box
});
var fades = dojo.fx.chain([a1,a2]);
dojo.fx.rubine([slides, fades]).play( );
});
});
</script>
</head>
<body class="tundra">
<div id="box" style="background : red;height:400px">click</div>
</body>
</html></source>

== Change position animation==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>

dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.fx.slideTo({
node:box,
top : "200",
left : "200"
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Cross fade==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.fx._base");
function testIt() {
dojox.fx.crossFade({ nodes : ["node1", "node2"], duration:1000}).play();
}
</script>
</head>
<body onload="testIt()">
<div id="node1">One</div>
<div id="node2" style="opacity:0;>Two</div>
</body>
</html></source>

== dojo animation alert==



<source lang="javascript">
<html>
<head>
<title>Dojo example</title>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.addOnLoad(function(){
dojo.query("#showMe").onclick(function(e){
var node = e.target;
var a = dojo.anim(node, {
backgroundColor: "#ff0",
color: "#00f"
}, 1000);
dojo.connect(a, "onEnd", function(){
dojo.anim(node, { color: "#0ff" }, null, null, function(){
node.innerHTML = "Alert!";
dojo.anim(node, { color: "red" });
});
});
});
});
</script>
<body>
<div id="showMe">
click me
</div>
</body>
</html></source>

== Fade effect for Menu under ComboButton==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.parser");
dojo.require("dijit.Menu");
dojo.require("dijit.form.Button");
</script>
</head>
<body class="tundra">
<div dojoType="dijit.form.ruboButton">
<span>Letters</span>
<div dojoType="dijit.Menu" toggle="fade" style="display:none;">
<div dojoType="dijit.MenuItem">A</div>
<div dojoType="dijit.MenuItem">B</div>
<div dojoType="dijit.MenuItem">C</div>
<div dojoType="dijit.MenuItem">D</div>
</div>
</div>
</body>
</html></source>

== Fadein animation==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/"
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
function doFading() {
dojo.fadeOut(
{node : "myDiv",
duration : 2000,
onEnd : function() {
dojo.fadeIn({node : "myDiv",
duration : 2000}).play();}}).play();
}
</script>
</head>
<body onLoad=doFading()>
<div id="myDiv">Text Text Text</div>
</body>
</html></source>

== Fade me out==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
var anim = dojo.fadeOut({node:box});
anim.play( );
});
});
</script>
</head>
<body class="tundra">
<div id="box" style="background : blue">click to Fade Me Out</div>
</body>
</html></source>

== Fadeout animation==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
var t = new dojo.fx.Toggler({
node : box,
showDuration : 2000,
hideDuration : 2000
});
var visible = true;
dojo.connect(box, "onclick", function(evt) {
if (visible)
t.hide( );
else
t.show( );
visible = !visible;
});
});
</script>
</head>
<body class="tundra">
<div id="box" style="background : red;height:400px">click</div>
</body>
</html></source>

== Fade out animation demo==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
var a1 = dojo.fx.slideTo({
node:box,
top : "150",
left : "300"
});
var a2 = dojo.fadeOut({
node:box
});
dojo.fx.rubine([a1,a2]).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red;height:400px">click</div>
</body>
</html></source>

== Highlight animation==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.fx._base");
function testIt() {
dojox.fx.highlight({ node : "my", color : "#f00" }).play();
}
</script>
</head>
<body onload=testIt()>
<div id="my">Your Text</div>
</body>
</html></source>

== Math ease function==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>

dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 10000,
easing : function(x) {return Math.pow(Math.sin(4*x),2);},
properties : {
height : {start : "200", end : "400"},
width : {start : "200", end : "400"}
}
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Path animation==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
var easing = function(x) { return x; };
var a1 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 1000,
top : "150",
left : "300"
});
var a2 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 400,
top : "20",
left : "350"
});
var a3 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 800,
top : "350",
left : "400"
});
var a4 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 800,
top : "50",
left : "10"
});
var a5 = dojo.fx.slideTo({
node:box,
easing : easing,
duration : 800,
top : "500",
left : "100"
});
dojo.fx.chain([a1,a2,a3,a4,a5]).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red;height:400px">click</div>
</body>
</html></source>

== Pause before==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.timing.Sequence");
function writeText(msg) {
dojo.byId("my").innerHTML += msg + "<br>";
}
function testIt() {
var s = new dojox.timing.Sequence({});
var funcs = [
{func : [writeText, this, "Pause: 1 second"], pauseBefore : 1000}
];

s.go(funcs, function() { writeText("Done"); });
}
</script>
</head>
<body onLoad="testIt();">
<div id="my"> </div>
</body>
</html></source>

== Pause one second==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.timing.Sequence");
function writeText(msg) {
dojo.byId("my").innerHTML += msg + "<br>";
}
function testIt() {
var s = new dojox.timing.Sequence({});
var funcs = [
{func : [writeText, this, "Pause: 1 second"]},
];

s.go(funcs, function() { writeText("Done"); });
}
</script>
</head>
<body onLoad="testIt();">
<div id="my"> </div>
</body>
</html></source>

== Repeat 5 times==



<source lang="javascript">
<html>
<head>
<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojox.timing.Sequence");
function writeText(msg) {
dojo.byId("my").innerHTML += msg + "<br>";
}
function testIt() {
var s = new dojox.timing.Sequence({});
var funcs = [
{func : [writeText, this, "Repeat: 5 times"],repeat : 5, pauseAfter : 1000},
];

s.go(funcs, function() { writeText("Done"); });
}
</script>
</head>
<body onLoad="testIt();">
<div id="my"> </div>
</body>
</html></source>

== Set animation rate==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>

dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.animateProperty({
node : box,
duration : 10000,
rate : 1000,
properties : {
height : {start : "200", end : "400"},
width : {start : "200", end : "400"}
}
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Wipeout animation==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.fx.wipeOut({
node:box
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red">click</div>
</body>
</html></source>

== Wipeout animation easing function==



<source lang="javascript">
<html>
<head>
<link rel="StyleSheet" type="text/css"
href="js/dojo/dijit/themes/tundra/tundra.css">

<script type="text/javascript">
var djConfig = {
baseScriptUri : "js/dojo/",
parseOnLoad : true
};
</script>
<script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
<script>
dojo.require("dojo.fx");
dojo.addOnLoad(function( ) {
var box = dojo.byId("box");
dojo.connect(box, "onclick", function(evt) {
dojo.fx.wipeOut({
node:box,
easing : function(x) { return Math.pow(Math.sin(4*x),2); },
duration : 5000
}).play( );
});
});

</script>
</head>
<body class="tundra">
<div id="box" style="background : red;height:400px">click</div>
</body>
</html></source>

← Предыдущая	Версия 08:24, 26 мая 2010
(нет различий)

JavaScript Tutorial/Dojo toolkit/Animation - История изменений

Admin: 1 версия

в 18:52, 25 мая 2010