openlayers/lib/OpenLayers/Tween.js

   1 /* Copyright (c) 2006-2008 MetaCarta, Inc., published under the Clear BSD
   2  * license.  See http://svn.openlayers.org/trunk/openlayers/license.txt for the
   3  * full text of the license. */
   4
   5 /**
   6  * @requires OpenLayers/Console.js
   7  */
   8
   9 /**
  10  * Namespace: OpenLayers.Tween
  11  */
  12 OpenLayers.Tween = OpenLayers.Class({
  13
  14     /**
  15      * Constant: INTERVAL
  16      * {int} Interval in milliseconds between 2 steps
  17      */
  18     INTERVAL: 10,
  19
  20     /**
  21      * APIProperty: easing
  22      * {<OpenLayers.Easing>(Function)} Easing equation used for the animation
  23      *     Defaultly set to OpenLayers.Easing.Expo.easeOut
  24      */
  25     easing: null,
  26
  27     /**
  28      * APIProperty: begin
  29      * {Object} Values to start the animation with
  30      */
  31     begin: null,
  32
  33     /**
  34      * APIProperty: finish
  35      * {Object} Values to finish the animation with
  36      */
  37     finish: null,
  38
  39     /**
  40      * APIProperty: duration
  41      * {int} duration of the tween (number of steps)
  42      */
  43     duration: null,
  44
  45     /**
  46      * APIProperty: callbacks
  47      * {Object} An object with start, eachStep and done properties whose values
  48      *     are functions to be call during the animation. They are passed the
  49      *     current computed value as argument.
  50      */
  51     callbacks: null,
  52
  53     /**
  54      * Property: time
  55      * {int} Step counter
  56      */
  57     time: null,
  58
  59     /**
  60      * Property: interval
  61      * {int} Interval id returned by window.setInterval
  62      */
  63     interval: null,
  64
  65     /**
  66      * Property: playing
  67      * {Boolean} Tells if the easing is currently playing
  68      */
  69     playing: false,
  70
  71     /**
  72      * Constructor: OpenLayers.Tween
  73      * Creates a Tween.
  74      *
  75      * Parameters:
  76      * easing - {<OpenLayers.Easing>(Function)} easing function method to use
  77      */
  78     initialize: function(easing) {
  79         this.easing = (easing) ? easing : OpenLayers.Easing.Expo.easeOut;
  80     },
  81
  82     /**
  83      * APIMethod: start
  84      * Plays the Tween, and calls the callback method on each step
  85      *
  86      * Parameters:
  87      * begin - {Object} values to start the animation with
  88      * finish - {Object} values to finish the animation with
  89      * duration - {int} duration of the tween (number of steps)
  90      * options - {Object} hash of options (for example callbacks (start, eachStep, done))
  91      */
  92     start: function(begin, finish, duration, options) {
  93         this.playing = true;
  94         this.begin = begin;
  95         this.finish = finish;
  96         this.duration = duration;
  97         this.callbacks = options.callbacks;
  98         this.time = 0;
  99         if (this.interval) {
 100             window.clearInterval(this.interval);
 101             this.interval = null;
 102         }
 103         if (this.callbacks && this.callbacks.start) {
 104             this.callbacks.start.call(this, this.begin);
 105         }
 106         this.interval = window.setInterval(
 107             OpenLayers.Function.bind(this.play, this), this.INTERVAL);
 108     },
 109
 110     /**
 111      * APIMethod: stop
 112      * Stops the Tween, and calls the done callback
 113      *     Doesn't do anything if animation is already finished
 114      */
 115     stop: function() {
 116         if (!this.playing) {
 117             return;
 118         }
 119
 120         if (this.callbacks && this.callbacks.done) {
 121             this.callbacks.done.call(this, this.finish);
 122         }
 123         window.clearInterval(this.interval);
 124         this.interval = null;
 125         this.playing = false;
 126     },
 127
 128     /**
 129      * Method: play
 130      * Calls the appropriate easing method
 131      */
 132     play: function() {
 133         var value = {};
 134         for (var i in this.begin) {
 135             var b = this.begin[i];
 136             var f = this.finish[i];
 137             if (b == null || f == null || isNaN(b) || isNaN(f)) {
 138                 OpenLayers.Console.error('invalid value for Tween');
 139             }
 140
 141             var c = f - b;
 142             value[i] = this.easing.apply(this, [this.time, b, c, this.duration]);
 143         }
 144         this.time++;
 145
 146         if (this.callbacks && this.callbacks.eachStep) {
 147             this.callbacks.eachStep.call(this, value);
 148         }
 149
 150         if (this.time > this.duration) {
 151             if (this.callbacks && this.callbacks.done) {
 152                 this.callbacks.done.call(this, this.finish);
 153                 this.playing = false;
 154             }
 155             window.clearInterval(this.interval);
 156             this.interval = null;
 157         }
 158     },
 159
 160     /**
 161      * Create empty functions for all easing methods.
 162      */
 163     CLASS_NAME: "OpenLayers.Tween"
 164 });
 165
 166 /**
 167  * Namespace: OpenLayers.Easing
 168  *
 169  * Credits:
 170  *      Easing Equations by Robert Penner, <http://www.robertpenner.com/easing/>
 171  */
 172 OpenLayers.Easing = {
 173     /**
 174      * Create empty functions for all easing methods.
 175      */
 176     CLASS_NAME: "OpenLayers.Easing"
 177 };
 178
 179 /**
 180  * Namespace: OpenLayers.Easing.Linear
 181  */
 182 OpenLayers.Easing.Linear = {
 183
 184     /**
 185      * Function: easeIn
 186      *
 187      * Parameters:
 188      * t - {Float} time
 189      * b - {Float} beginning position
 190      * c - {Float} total change
 191      * d - {Float} duration of the transition
 192      */
 193     easeIn: function(t, b, c, d) {
 194         return c*t/d + b;
 195     },
 196
 197     /**
 198      * Function: easeOut
 199      *
 200      * Parameters:
 201      * t - {Float} time
 202      * b - {Float} beginning position
 203      * c - {Float} total change
 204      * d - {Float} duration of the transition
 205      */
 206     easeOut: function(t, b, c, d) {
 207         return c*t/d + b;
 208     },
 209
 210     /**
 211      * Function: easeInOut
 212      *
 213      * Parameters:
 214      * t - {Float} time
 215      * b - {Float} beginning position
 216      * c - {Float} total change
 217      * d - {Float} duration of the transition
 218      */
 219     easeInOut: function(t, b, c, d) {
 220         return c*t/d + b;
 221     },
 222
 223     CLASS_NAME: "OpenLayers.Easing.Linear"
 224 };
 225
 226 /**
 227  * Namespace: OpenLayers.Easing.Expo
 228  */
 229 OpenLayers.Easing.Expo = {
 230
 231     /**
 232      * Function: easeIn
 233      *
 234      * Parameters:
 235      * t - {Float} time
 236      * b - {Float} beginning position
 237      * c - {Float} total change
 238      * d - {Float} duration of the transition
 239      */
 240     easeIn: function(t, b, c, d) {
 241         return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
 242     },
 243
 244     /**
 245      * Function: easeOut
 246      *
 247      * Parameters:
 248      * t - {Float} time
 249      * b - {Float} beginning position
 250      * c - {Float} total change
 251      * d - {Float} duration of the transition
 252      */
 253     easeOut: function(t, b, c, d) {
 254         return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
 255     },
 256
 257     /**
 258      * Function: easeInOut
 259      *
 260      * Parameters:
 261      * t - {Float} time
 262      * b - {Float} beginning position
 263      * c - {Float} total change
 264      * d - {Float} duration of the transition
 265      */
 266     easeInOut: function(t, b, c, d) {
 267         if (t==0) return b;
 268         if (t==d) return b+c;
 269         if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
 270         return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
 271     },
 272
 273     CLASS_NAME: "OpenLayers.Easing.Expo"
 274 };
 275
 276 /**
 277  * Namespace: OpenLayers.Easing.Quad
 278  */
 279 OpenLayers.Easing.Quad = {
 280
 281     /**
 282      * Function: easeIn
 283      *
 284      * Parameters:
 285      * t - {Float} time
 286      * b - {Float} beginning position
 287      * c - {Float} total change
 288      * d - {Float} duration of the transition
 289      */
 290     easeIn: function(t, b, c, d) {
 291         return c*(t/=d)*t + b;
 292     },
 293
 294     /**
 295      * Function: easeOut
 296      *
 297      * Parameters:
 298      * t - {Float} time
 299      * b - {Float} beginning position
 300      * c - {Float} total change
 301      * d - {Float} duration of the transition
 302      */
 303     easeOut: function(t, b, c, d) {
 304         return -c *(t/=d)*(t-2) + b;
 305     },
 306
 307     /**
 308      * Function: easeInOut
 309      *
 310      * Parameters:
 311      * t - {Float} time
 312      * b - {Float} beginning position
 313      * c - {Float} total change
 314      * d - {Float} duration of the transition
 315      */
 316     easeInOut: function(t, b, c, d) {
 317         if ((t/=d/2) < 1) return c/2*t*t + b;
 318         return -c/2 * ((--t)*(t-2) - 1) + b;
 319     },
 320
 321     CLASS_NAME: "OpenLayers.Easing.Quad"
 322 };