--- /dev/null
+<!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>
projects / eow / blobdiff