a bit cleaner zoom anim logic
This commit is contained in:
parent
f32173573a
commit
6d5fe1f724
3
dist/leaflet.css
vendored
3
dist/leaflet.css
vendored
@ -146,8 +146,7 @@
|
||||
transition: transform 0.25s cubic-bezier(0,0,0.25,1);
|
||||
}
|
||||
.leaflet-zoom-anim .leaflet-tile,
|
||||
.leaflet-pan-anim .leaflet-tile,
|
||||
.leaflet-touching .leaflet-zoom-animated {
|
||||
.leaflet-pan-anim .leaflet-tile {
|
||||
-webkit-transition: none;
|
||||
-moz-transition: none;
|
||||
-o-transition: none;
|
||||
|
@ -111,6 +111,7 @@ L.GridLayer = L.Layer.extend({
|
||||
}
|
||||
|
||||
if (this._zoomAnimated) {
|
||||
events.zoomanimstart = this._startZoomAnim;
|
||||
events.zoomanim = this._animateZoom;
|
||||
events.zoomend = this._endZoomAnim;
|
||||
}
|
||||
@ -464,15 +465,13 @@ L.GridLayer = L.Layer.extend({
|
||||
bounds.max.divideBy(size).ceil().subtract([1, 1])) : null;
|
||||
},
|
||||
|
||||
_startZoomAnim: function () {
|
||||
this._prepareBgBuffer();
|
||||
this._prevTranslate = this._translate;
|
||||
this._prevScale = this._scale;
|
||||
},
|
||||
|
||||
_animateZoom: function (e) {
|
||||
if (!this._animating) {
|
||||
this._animating = true;
|
||||
this._prepareBgBuffer();
|
||||
|
||||
this._prevTranslate = this._translate;
|
||||
this._prevScale = this._scale;
|
||||
}
|
||||
|
||||
// avoid stacking transforms by calculating cumulating translate/scale sequence
|
||||
this._translate = this._prevTranslate.multiplyBy(e.scale).add(e.origin.multiplyBy(1 - e.scale)).add(e.delta);
|
||||
this._scale = this._prevScale * e.scale;
|
||||
@ -481,16 +480,9 @@ L.GridLayer = L.Layer.extend({
|
||||
},
|
||||
|
||||
_endZoomAnim: function () {
|
||||
var front = this._tileContainer,
|
||||
bg = this._bgBuffer;
|
||||
|
||||
var front = this._tileContainer;
|
||||
front.style.visibility = '';
|
||||
L.DomUtil.toFront(front); // bring to front
|
||||
|
||||
// force reflow
|
||||
L.Util.falseFn(bg.offsetWidth);
|
||||
|
||||
this._animating = false;
|
||||
},
|
||||
|
||||
_clearBgBuffer: function () {
|
||||
|
@ -55,20 +55,18 @@ L.Map.include(!zoomAnimated ? {} : {
|
||||
|
||||
this
|
||||
.fire('movestart')
|
||||
.fire('zoomstart');
|
||||
.fire('zoomstart')
|
||||
.fire('zoomanimstart');
|
||||
|
||||
this._startZoomAnim(center, zoom);
|
||||
this._animateZoom(center, zoom, origin, scale, new L.Point(0, 0));
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
_animateZoom: function (center, zoom, origin, scale, delta) {
|
||||
|
||||
_startZoomAnim: function (center, zoom) {
|
||||
this._animatingZoom = true;
|
||||
|
||||
// put transform transition on all layers with leaflet-zoom-animated class
|
||||
L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim');
|
||||
|
||||
// remember what center/zoom to set after animation
|
||||
this._animateToCenter = center;
|
||||
this._animateToZoom = zoom;
|
||||
@ -78,6 +76,10 @@ L.Map.include(!zoomAnimated ? {} : {
|
||||
L.Draggable._disabled = true;
|
||||
}
|
||||
|
||||
L.DomUtil.addClass(this._mapPane, 'leaflet-zoom-anim');
|
||||
},
|
||||
|
||||
_animateZoom: function (center, zoom, origin, scale, delta) {
|
||||
this.fire('zoomanim', {
|
||||
center: center,
|
||||
zoom: zoom,
|
||||
|
@ -63,11 +63,10 @@ L.Map.TouchZoom = L.Handler.extend({
|
||||
}
|
||||
|
||||
if (!this._moved) {
|
||||
L.DomUtil.addClass(map._mapPane, 'leaflet-touching');
|
||||
|
||||
map
|
||||
.fire('movestart')
|
||||
.fire('zoomstart');
|
||||
.fire('zoomstart')
|
||||
.fire('zoomanimstart');
|
||||
|
||||
this._moved = true;
|
||||
}
|
||||
@ -111,6 +110,7 @@ L.Map.TouchZoom = L.Handler.extend({
|
||||
finalScale = map.getZoomScale(finalZoom),
|
||||
delta = this._delta.add(this._centerOffset.subtract(this._delta).multiplyBy(1 - 1 / this._scale));
|
||||
|
||||
map._startZoomAnim(this._center, finalZoom);
|
||||
map._animateZoom(this._center, finalZoom, this._origin, finalScale, delta);
|
||||
},
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user