extlib/leaflet/src/dom/transition/Transition.Timer.js

   1 /*
   2  * L.Transition fallback implementation that powers Leaflet animation
   3  * in browsers that don't support CSS3 Transitions
   4  */
   5
   6 L.Transition = L.Transition.NATIVE ? L.Transition : L.Transition.extend({
   7         statics: {
   8                 getTime: Date.now || function() { return +new Date(); },
   9
  10                 TIMER: true,
  11
  12                 EASINGS: {
  13                         'ease': [0.25, 0.1, 0.25, 1.0],
  14                         'linear': [0.0, 0.0, 1.0, 1.0],
  15                         'ease-in': [0.42, 0, 1.0, 1.0],
  16                         'ease-out': [0, 0, 0.58, 1.0],
  17                         'ease-in-out': [0.42, 0, 0.58, 1.0]
  18                 },
  19
  20                 CUSTOM_PROPS_GETTERS: {
  21                         position: L.DomUtil.getPosition
  22                 },
  23
  24                 //used to get units from strings like "10.5px" (->px)
  25                 UNIT_RE: /^[\d\.]+(\D*)$/
  26         },
  27
  28         options: {
  29                 fps: 50
  30         },
  31
  32         initialize: function(el, options) {
  33                 this._el = el;
  34                 L.Util.extend(this.options, options);
  35
  36                 var easings = L.Transition.EASINGS[this.options.easing] || L.Transition.EASINGS['ease'];
  37
  38                 this._p1 = new L.Point(0, 0);
  39                 this._p2 = new L.Point(easings[0], easings[1]);
  40                 this._p3 = new L.Point(easings[2], easings[3]);
  41                 this._p4 = new L.Point(1, 1);
  42
  43                 this._step = L.Util.bind(this._step, this);
  44                 this._interval = Math.round(1000 / this.options.fps);
  45         },
  46
  47         run: function(props) {
  48                 this._props = {};
  49
  50                 var getters = L.Transition.CUSTOM_PROPS_GETTERS,
  51                         re = L.Transition.UNIT_RE;
  52
  53                 this.fire('start');
  54
  55                 for (var prop in props) {
  56                         if (props.hasOwnProperty(prop)) {
  57                                 var p = {};
  58                                 if (prop in getters) {
  59                                         p.from = getters[prop](this._el);
  60                                 } else {
  61                                         var matches = this._el.style[prop].match(re);
  62                                         p.from = parseFloat(matches[0]);
  63                                         p.unit = matches[1];
  64                                 }
  65                                 p.to = props[prop];
  66                                 this._props[prop] = p;
  67                         }
  68                 }
  69
  70                 clearInterval(this._timer);
  71                 this._timer = setInterval(this._step, this._interval);
  72                 this._startTime = L.Transition.getTime();
  73         },
  74
  75         _step: function() {
  76                 var time = L.Transition.getTime(),
  77                         elapsed = time - this._startTime,
  78                         duration = this.options.duration * 1000;
  79
  80                 if (elapsed < duration) {
  81                         this._runFrame(this._cubicBezier(elapsed / duration));
  82                 } else {
  83                         this._runFrame(1);
  84                         this._complete();
  85                 }
  86         },
  87
  88         _runFrame: function(percentComplete) {
  89                 var setters = L.Transition.CUSTOM_PROPS_SETTERS,
  90                         prop, p, value;
  91
  92                 for (prop in this._props) {
  93                         if (this._props.hasOwnProperty(prop)) {
  94                                 p = this._props[prop];
  95                                 if (prop in setters) {
  96                                         value = p.to.subtract(p.from).multiplyBy(percentComplete).add(p.from);
  97                                         setters[prop](this._el, value);
  98                                 } else {
  99                                         this._el.style[prop] =
 100                                                         ((p.to - p.from) * percentComplete + p.from) + p.unit;
 101                                 }
 102                         }
 103                 }
 104                 this.fire('step');
 105         },
 106
 107         _complete: function() {
 108                 clearInterval(this._timer);
 109                 this.fire('end');
 110         },
 111
 112         _cubicBezier: function(t) {
 113                 var a = Math.pow(1 - t, 3),
 114                         b = 3 * Math.pow(1 - t, 2) * t,
 115                         c = 3 * (1 - t) * Math.pow(t, 2),
 116                         d = Math.pow(t, 3),
 117                         p1 = this._p1.multiplyBy(a),
 118                         p2 = this._p2.multiplyBy(b),
 119                         p3 = this._p3.multiplyBy(c),
 120                         p4 = this._p4.multiplyBy(d);
 121
 122                 return p1.add(p2).add(p3).add(p4).y;
 123         }
 124 });