diff options
| author |  mensonge | 2008-11-13 09:49:11 +0000 |
|---|---|---|
| committer | mensonge | 2008-11-13 09:49:11 +0000 |
| commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
| tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojox/fx/tests/test_easing.html | |
| parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
| download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip | |
New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit
git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
Diffstat (limited to 'includes/js/dojox/fx/tests/test_easing.html')
| -rw-r--r-- | includes/js/dojox/fx/tests/test_easing.html | 142 |
1 files changed, 142 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/tests/test_easing.html b/includes/js/dojox/fx/tests/test_easing.html new file mode 100644 index 0000000..fa7bf41 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_easing.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.easing functions:</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + .bounce { + position:absolute; + top:300px; + left:400px; + width:25px; + height:25px; + border:1px solid #b7b7b7; + background:#ededed; + } + + .block { + width:200px; + height:100px; + background:#666; + border:1px solid #ccc; + display:block; + color:#fff; + text-align:center; + } + + </style> + <script type="text/javascript"> + dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work) + dojo.require("dojox.fx.easing"); + + + var allAnim = null; + dojo.addOnLoad(function(){ + + var easeInAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeIn', + duration:2000, + easing: dojox.fx.easing.easeIn + }), + dojo.fadeIn({ + node: 'easeIn', + duration:2000, + easing: dojox.fx.easing.easeIn + }) + ]); + + + var easeOutAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeOut', + duration:2000, + easing: dojox.fx.easing.easeOut + }), + dojo.fadeIn({ + node: 'easeOut', + duration:2000, + easing: dojox.fx.easing.easeOut + }) + ]); + + var easeInOutAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeInOut', + duration:2000 + }), + dojo.fadeIn({ + node: 'easeInOut', + duration:2000 + }) + ]); + + var linearEaseAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'linearEase', + duration:2000, + easing: dojox.fx.easing.linear + }), + dojo.fadeIn({ + node: 'linearEase', + duration:2000, + easing: dojox.fx.easing.linear + }) + ]); + + dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play"); + dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play"); + dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play"); + dojo.connect(dojo.byId('linearEase'),"onclick",linearEaseAnim,"play"); + dojo.connect(window,"onclick",function(e){ + dojo.fx.slideTo({ + node:"bounce", + top:e.pageY, left:e.pageX, + easing: dojox.fx.easing.easeOutBack + }).play(); + }); + + // argh! FIXME: combine and chain are destructive to the animations. :( + // allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]); + allAnim = { play: function(){ + console.log("can't do this via fx.combine - destructive"); + easeInAnim.play(); + easeOutAnim.play(); + easeInOutAnim.play(); + linearEaseAnim.play(); + } + }; + + }); // dojo.addOnLoad + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.easing function tests:</h1> + + (click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>) + + <div id="easeIn" class="block">dojox.fx.easing.easeIn</div> + <br><br> + <div id="easeOut" class="block">dojox.fx.easing.easeOut</div> + <br><br> + <div id="linearEase" class="block">dojox.fx.easing.linear</div> + <br><br> + <div id="easeInOut" class="block">dojo default easing</div> + + <p> + dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart + of these functions see <a href="example_easingChart2D.html">example_easingChart2D.html</a> + </p> + + <div id="bounce" class="bounce">bounce</div> + +</body> +</html> |