git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojox/fx/tests/test_easing.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2         "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>dojox.fx.easing functions:</title>
   6
   7         <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script>
   8         <style type="text/css">
   9                 @import "../../../dojo/resources/dojo.css";
  10                 @import "../../../dijit/themes/dijit.css";
  11                 @import "../../../dijit/themes/tundra/tundra.css";
  12                 @import "../../../dijit/tests/css/dijitTests.css";
  13
  14                 .bounce {
  15                         position:absolute;
  16                         top:300px;
  17                         left:400px;
  18                         width:25px;
  19                         height:25px;
  20                         border:1px solid #b7b7b7;
  21                         background:#ededed;
  22                 }
  23
  24                 .block {
  25                         width:200px;
  26                         height:100px;
  27                         background:#666;
  28                         border:1px solid #ccc;
  29                         display:block;
  30                         color:#fff;
  31                         text-align:center;
  32                 }
  33
  34         </style>
  35         <script type="text/javascript">
  36                 dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work)
  37                 dojo.require("dojox.fx.easing");
  38
  39
  40                 var allAnim = null;
  41                 dojo.addOnLoad(function(){
  42
  43                 var easeInAnim = dojo.fx.chain([
  44                         dojo.fadeOut({
  45                                 node: 'easeIn',
  46                                 duration:2000,
  47                                 easing: dojox.fx.easing.easeIn
  48                         }),
  49                         dojo.fadeIn({
  50                                 node: 'easeIn',
  51                                 duration:2000,
  52                                 easing: dojox.fx.easing.easeIn
  53                         })
  54                 ]);
  55
  56
  57                 var easeOutAnim = dojo.fx.chain([
  58                         dojo.fadeOut({
  59                                 node: 'easeOut',
  60                                 duration:2000,
  61                                 easing: dojox.fx.easing.easeOut
  62                         }),
  63                         dojo.fadeIn({
  64                                 node: 'easeOut',
  65                                 duration:2000,
  66                                 easing: dojox.fx.easing.easeOut
  67                         })
  68                 ]);
  69
  70                 var easeInOutAnim = dojo.fx.chain([
  71                         dojo.fadeOut({
  72                                 node: 'easeInOut',
  73                                 duration:2000
  74                         }),
  75                         dojo.fadeIn({
  76                                 node: 'easeInOut',
  77                                 duration:2000
  78                         })
  79                 ]);
  80
  81                 var linearEaseAnim = dojo.fx.chain([
  82                         dojo.fadeOut({
  83                                 node: 'linearEase',
  84                                 duration:2000,
  85                                 easing: dojox.fx.easing.linear
  86                         }),
  87                         dojo.fadeIn({
  88                                 node: 'linearEase',
  89                                 duration:2000,
  90                                 easing: dojox.fx.easing.linear
  91                         })
  92                 ]);
  93
  94                 dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play");
  95                 dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play");
  96                 dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play");
  97                 dojo.connect(dojo.byId('linearEase'),"onclick",linearEaseAnim,"play");
  98                 dojo.connect(window,"onclick",function(e){
  99                         dojo.fx.slideTo({
 100                                 node:"bounce",
 101                                 top:e.pageY, left:e.pageX,
 102                                 easing: dojox.fx.easing.easeOutBack
 103                         }).play();
 104                 });
 105
 106                 // argh! FIXME: combine and chain are destructive to the animations. :(
 107                 // allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]);
 108                 allAnim = { play: function(){
 109                         console.log("can't do this via fx.combine - destructive");
 110                         easeInAnim.play();
 111                         easeOutAnim.play();
 112                         easeInOutAnim.play();
 113                         linearEaseAnim.play();
 114                         }
 115                 };
 116
 117                 }); // dojo.addOnLoad
 118         </script>
 119 </head>
 120 <body class="tundra">
 121
 122         <h1 class="testTitle">dojox.fx.easing function tests:</h1>
 123
 124         (click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>)
 125
 126         <div id="easeIn" class="block">dojox.fx.easing.easeIn</div>
 127         <br><br>
 128         <div id="easeOut" class="block">dojox.fx.easing.easeOut</div>
 129         <br><br>
 130         <div id="linearEase" class="block">dojox.fx.easing.linear</div>
 131         <br><br>
 132         <div id="easeInOut" class="block">dojo default easing</div>
 133
 134         <p>
 135         dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart
 136         of these functions see <a href="example_easingChart2D.html">example_easingChart2D.html</a>
 137         </p>
 138
 139         <div id="bounce" class="bounce">bounce</div>
 140
 141 </body>
 142 </html>