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