JavaScript DHTML/Dojo toolkit/Animation
Содержание
- 1 Animate width property
- 2 Animation: Add new class to tag and
- 3 Animation easing function
- 4 Animation: enlarge
- 5 Animation: fly
- 6 Animation: resize
- 7 Animation: stratch
- 8 Animation with dojox.timing.Sequence
- 9 Chained animation
- 10 Change position animation
- 11 Cross fade
- 12 dojo animation alert
- 13 Fade effect for Menu under ComboButton
- 14 Fadein animation
- 15 Fade me out
- 16 Fade out animation
- 17 Fadeout animation demo
- 18 Highlight animation
- 19 Math ease function
- 20 Path animation
- 21 Pause before
- 22 Pause one second
- 23 Repeat 5 times
- 24 Set animation rate
- 25 Wipeout animation
- 26 Wipeout animation easing function
Animate width property
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Animation: Add new class to tag and
<source lang="html4strict">
<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()>
Text
</body>
</html>
</source>
Animation easing function
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Animation: enlarge
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Animation: fly
<source lang="html4strict">
<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();">
Hello
</body>
</html>
</source>
Animation: resize
<source lang="html4strict">
<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()">
</body>
</html>
</source>
Animation: stratch
<source lang="html4strict">
<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">
click to stratch
</body> </html>
</source>
Animation with dojox.timing.Sequence
<source lang="html4strict">
<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 + "
";
}
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();">
</body>
</html>
</source>
Chained animation
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Change position animation
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Cross fade
<source lang="html4strict">
<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()">
One
Two
</body>
</html>
</source>
dojo animation alert
<source lang="html4strict">
<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>
click me
</body> </html>
</source>
Fade effect for Menu under ComboButton
<source lang="html4strict">
<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">
Letters
</body>
</html>
</source>
Fadein animation
<source lang="html4strict">
<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()>
Text Text Text
</body>
</html>
</source>
Fade me out
<source lang="html4strict">
<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">
click to Fade Me Out
</body> </html>
</source>
Fade out animation
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Fadeout animation demo
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Highlight animation
<source lang="html4strict">
<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()>
Your Text
</body>
</html>
</source>
Math ease function
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Path animation
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Pause before
<source lang="html4strict">
<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 + "
";
}
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();">
</body>
</html>
</source>
Pause one second
<source lang="html4strict">
<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 + "
";
}
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();">
</body>
</html>
</source>
Repeat 5 times
<source lang="html4strict">
<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 + "
";
}
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();">
</body>
</html>
</source>
Set animation rate
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Wipeout animation
<source lang="html4strict">
<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">
click
</body> </html>
</source>
Wipeout animation easing function
<source lang="html4strict">
<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">
click
</body> </html>
</source>
