Do major tidy ups on the SVG zoom animation, pretty certain that this…

… is tidy now. Conflicts: src/map/anim/Map.ZoomAnimation.js
danzel · Jun 18, 2012 · d30d057 · d30d057
1 parent 1fc674b
commit d30d057
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/dist/leaflet.css b/dist/leaflet.css
@@ -276,6 +276,12 @@ a.leaflet-active {
 	transition: none;
 	}
 
+.leaflet-zoom-anim .leaflet-overlay-pane svg {
+	-webkit-transition: -webkit-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	-moz-transition: -moz-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	-o-transition: -o-transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	transition: transform 0.25s cubic-bezier(0.25,0.1,0.25,0.75);
+	}
 /*.leaflet-zoom-anim .leaflet-objects-pane {
 	visibility: hidden;
 	}

diff --git a/src/layer/vector/Path.SVG.js b/src/layer/vector/Path.SVG.js
@@ -120,11 +120,27 @@ L.Map.include({
 			this._pathRoot = L.Path.prototype._createElement('svg');
 			this._panes.overlayPane.appendChild(this._pathRoot);
 
+			this.on('zoomstart', this._animateSvgZoom);
 			this.on('moveend', this._updateSvgViewport);
 			this._updateSvgViewport();
 		}
 	},
 
+	_animateSvgZoom: function (opt) {
+		var center = opt.center,
+			zoom = opt.zoom,
+			centerOffset = this._getNewTopLeftPoint(center).subtract(this._getTopLeftPoint());
+
+		var scale = Math.pow(2, zoom - this._zoom),
+			offset = centerOffset.divideBy(1 - 1 / scale);
+
+		var centerPoint = this.containerPointToLayerPoint(this.getSize().divideBy(2)),
+			origin = centerPoint.add(offset);
+
+		origin = origin.subtract(this.getSize());
+		this._pathRoot.style[L.DomUtil.TRANSFORM] = L.DomUtil.getScaleString(scale, origin) + ' ' + this._pathRoot.style[L.DomUtil.TRANSFORM];
+	},
+
 	_updateSvgViewport: function () {
 		this._updatePathViewport();
 
@@ -141,8 +157,6 @@ L.Map.include({
 		if (L.Browser.mobileWebkit) {
 			pane.removeChild(root);
 		}
-		//Make sure this isn't animated
-		root.style[L.Transition.PROPERTY] = 'none';
 
 		L.DomUtil.setPosition(root, min);
 		root.setAttribute('width', width);

diff --git a/src/map/Map.js b/src/map/Map.js
@@ -454,7 +454,7 @@ L.Map = L.Class.extend({
 			this.fire('movestart');
 
 			if (zoomChanged) {
-				this.fire('zoomstart');
+				this.fire('zoomstart', center, zoom);
 			}
 		}
 

diff --git a/src/map/anim/Map.ZoomAnimation.js b/src/map/anim/Map.ZoomAnimation.js
@@ -24,7 +24,7 @@ L.Map.include(!L.DomUtil.TRANSITION ? {} : {
 
 		this
 			.fire('movestart')
-			.fire('zoomstart');
+			.fire('zoomstart', { center: center, zoom: zoom });
 
 		//Hack: Disable this for android due to it not supporting double translate (mentioned in _runAnimation below)
 		//if Foreground layer doesn't have many tiles but bg layer does, keep the existing bg layer