JavaScript Tutorial/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 Fadeout animation
- 17 Fade out 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="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">
</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()>
</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">
</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">
</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();">
</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()">
</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">
</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 + "
"; } 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="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">
</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">
</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()">
</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>
click me
</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">
Letters
</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()>
</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">
</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">
</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">
</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()>
</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">
</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">
</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 + "
"; } 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="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 + "
"; } 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="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 + "
"; } 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="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">
</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">
</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">
</body> </html></source>