cartodb/Leaflet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

a bit cleaner zoom anim logic

Browse Source
This commit is contained in:
Vladimir Agafonkin 2014-01-13 20:54:13 +02:00
parent f32173573a
commit 6d5fe1f724
4 changed files with 20 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/leaflet.css vendored
View File

@ -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;

18
src/layer/tile/GridLayer.js
View File

@ -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;
}, },
_animateZoom: function (e) { _startZoomAnim: function () {
if (!this._animating) {
this._animating = true;
this._prepareBgBuffer(); this._prepareBgBuffer();
this._prevTranslate = this._translate; this._prevTranslate = this._translate;
this._prevScale = this._scale; this._prevScale = this._scale;
} },
_animateZoom: function (e) {
// 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 () {

14
src/map/anim/Map.ZoomAnimation.js
View File

@ -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,

6
src/map/handler/Map.TouchZoom.js
View File

@ -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);
}, },