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