Leaflet · mourner · Oct 21, 2014 · Jan 15, 2014 · Jan 15, 2014 · Jan 15, 2014
diff --git a/build/deps.js b/build/deps.js
@@ -234,14 +234,11 @@ var deps = {
 		desc: 'Core panning animation support.'
 	},
 
-	AnimationTimer: {
-		src: ['dom/PosAnimation.Timer.js'],
-		deps: ['AnimationPan'],
-		desc: 'Timer-based pan animation fallback for browsers that don\'t support CSS3 transitions.'
-	},
-
 	AnimationZoom: {
-		src: ['map/anim/Map.ZoomAnimation.js'],
+		src: [
+			'map/anim/Map.ZoomAnimation.js',
+			'map/anim/Map.FlyTo.js'
+			],
 		deps: ['AnimationPan'],
 		desc: 'Smooth zooming animation. Works only on browsers that support CSS3 Transitions.'
 	},

diff --git a/debug/map/grid.html b/debug/map/grid.html
@@ -31,7 +31,7 @@
 			// test async
 			setTimeout(function () {
 				done(null, tile);
-			}, Math.random() * 500);
+			}, 500 + Math.random() * 500);
 
 			return tile;
 		};

diff --git a/debug/map/zoompan.html b/debug/map/zoompan.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>Leaflet debug page</title>
+
+	<link rel="stylesheet" href="../../dist/leaflet.css" />
+
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<link rel="stylesheet" href="../css/screen.css" />
+	<style>
+	#map {
+		width: 600px;
+		height: 400px;
+	}
+	</style>
+
+	<script type="text/javascript" src="../../build/deps.js"></script>
+	<script src="../leaflet-include.js"></script>
+</head>
+<body>
+
+	<div id="map"></div>
+
+	<div style="position: absolute; left: 530px; top: 10px; z-index: 500">
+		<!-- <button id="london">London</button>
+		<button id="kyiv">Kyiv</button> -->
+		<button id="dc">DC</button>
+		<button id="sf">SF</button>
+		<button id="stop">stop</button>
+	</div>
+
+	<script type="text/javascript">
+
+		var kyiv = [50.5, 30.5],
+			london = [51.51, -0.12],
+			sf = [37.77, -122.42],
+			dc = [38.91, -77.04];
+
+		var map = L.map('map').setView(dc, 10);
+
+		var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
+			attribution: '<a href="https://www.mapbox.com/about/maps/">Terms and Feedback</a>',
+			id: 'examples.map-20v6611k'
+		}).addTo(map);
+
+		var marker1 = L.marker(kyiv).addTo(map),
+			marker2 = L.marker(london).addTo(map);
+			// marker3 = L.marker(dc).addTo(map),
+			// marker4 = L.marker(sf).addTo(map);
+
+		document.getElementById('dc').onclick = function () { map.flyTo(dc, 10); };
+		document.getElementById('sf').onclick = function () { map.flyTo(sf, 10); };
+		document.getElementById('stop').onclick = function () { map.stop(); };
+		// document.getElementById('london').onclick = function () { map.flyTo(london); };
+		// document.getElementById('kyiv').onclick = function () { map.flyTo(kyiv); };
+
+		function logEvent(e) { console.log(e.type); }
+
+		// map.on('click', logEvent);
+
+		// map.on('movestart', logEvent);
+		// map.on('move', logEvent);
+		// map.on('moveend', logEvent);
+
+		// map.on('zoomstart', logEvent);
+		// map.on('zoomend', logEvent);
+
+	</script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -13,6 +13,8 @@
     "karma-coverage": "~0.2.3",
     "karma-phantomjs-launcher": "^0.1.4",
     "karma-chrome-launcher": "^0.1.4",
+    "karma-firefox-launcher": "~0.1.3",
+    "karma-safari-launcher": "~0.1.1",
     "tin": "^0.5.0",
     "copyfiles": "0.1.0"
   },

diff --git a/spec/karma.conf.js b/spec/karma.conf.js
@@ -22,7 +22,9 @@ module.exports = function (config) {
 			'karma-mocha',
 			'karma-coverage',
 			'karma-phantomjs-launcher',
-			'karma-chrome-launcher'],
+			'karma-chrome-launcher',
+			'karma-safari-launcher',
+			'karma-firefox-launcher'],
 
 		// frameworks to use
 		frameworks: ['mocha'],

diff --git a/spec/suites/dom/PosAnimationSpec.js b/spec/suites/dom/PosAnimationSpec.js
diff --git a/spec/suites/layer/marker/MarkerSpec.js b/spec/suites/layer/marker/MarkerSpec.js
@@ -58,7 +58,11 @@ describe("Marker", function () {
 			expect(oldIcon).to.not.be(marker._icon);
 			expect(oldIcon.parentNode).to.be(null);
 
-			expect(marker._icon.src).to.contain('marker-icon.png');
+			if (L.Browser.retina) {
+				expect(marker._icon.src).to.contain('marker-icon-2x.png');
+			} else {
+				expect(marker._icon.src).to.contain('marker-icon.png');
+			}
 			expect(marker._icon.parentNode).to.be(map._panes.markerPane);
 		});
 

diff --git a/src/dom/PosAnimation.Timer.js b/src/dom/PosAnimation.Timer.js
diff --git a/src/dom/PosAnimation.js b/src/dom/PosAnimation.js
@@ -1,5 +1,5 @@
 /*
- * L.PosAnimation is used by Leaflet internally for pan animations.
+ * L.PosAnimation powers Leaflet pan animations internally.
  */
 
 L.PosAnimation = L.Evented.extend({
@@ -9,87 +9,58 @@ L.PosAnimation = L.Evented.extend({
 
 		this._el = el;
 		this._inProgress = true;
-		this._newPos = newPos;
+		this._duration = duration || 0.25;
+		this._easeOutPower = 1 / Math.max(easeLinearity || 0.5, 0.2);
 
-		this.fire('start');
-
-		el.style[L.DomUtil.TRANSITION] = 'all ' + (duration || 0.25) +
-		        's cubic-bezier(0,0,' + (easeLinearity || 0.5) + ',1)';
+		this._startPos = L.DomUtil.getPosition(el);
+		this._offset = newPos.subtract(this._startPos);
+		this._startTime = +new Date();
 
-		L.DomEvent.on(el, L.DomUtil.TRANSITION_END, this._onTransitionEnd, this);
-		L.DomUtil.setPosition(el, newPos);
+		this.fire('start');
 
-		// there's no native way to track value updates of transitioned properties, so we imitate this
-		this._stepTimer = setInterval(L.bind(this._onStep, this), 50);
+		this._animate();
 	},
 
 	stop: function () {
 		if (!this._inProgress) { return; }
 
-		// if we just removed the transition property, the element would jump to its final position,
-		// so we need to make it stay at the current position
-
-                // Only setPosition if _getPos actually returns a valid position.
-		this._newPos = this._getPos();
-		if (this._newPos) {
-		    L.DomUtil.setPosition(this._el, this._newPos);
-		}
-
-		this._onTransitionEnd();
-		L.Util.falseFn(this._el.offsetWidth); // force reflow in case we are about to start a new animation
+		this._step();
+		this._complete();
 	},
 
-	_onStep: function () {
-		var stepPos = this._getPos();
-		if (!stepPos) {
-			this._onTransitionEnd();
-			return;
-		}
-		// jshint camelcase: false
-		// make L.DomUtil.getPosition return intermediate position value during animation
-		this._el._leaflet_pos = stepPos;
-
-		this.fire('step');
+	_animate: function () {
+		// animation loop
+		this._animId = L.Util.requestAnimFrame(this._animate, this);
+		this._step();
 	},
 
-	// you can't easily get intermediate values of properties animated with CSS3 Transitions,
-	// we need to parse computed style (in case of transform it returns matrix string)
-
-	_transformRe: /([-+]?(?:\d*\.)?\d+)\D*, ([-+]?(?:\d*\.)?\d+)\D*\)/,
+	_step: function () {
+		var elapsed = (+new Date()) - this._startTime,
+		    duration = this._duration * 1000;
 
-	_getPos: function () {
-		var left, top, matches,
-		    el = this._el,
-		    style = window.getComputedStyle(el);
-
-		if (L.Browser.any3d) {
-			matches = style[L.DomUtil.TRANSFORM].match(this._transformRe);
-			if (!matches) { return; }
-			left = parseFloat(matches[1]);
-			top  = parseFloat(matches[2]);
+		if (elapsed < duration) {
+			this._runFrame(this._easeOut(elapsed / duration));
 		} else {
-			left = parseFloat(style.left);
-			top  = parseFloat(style.top);
+			this._runFrame(1);
+			this._complete();
 		}
-
-		return new L.Point(left, top, true);
 	},
 
-	_onTransitionEnd: function () {
-		L.DomEvent.off(this._el, L.DomUtil.TRANSITION_END, this._onTransitionEnd, this);
-
-		if (!this._inProgress) { return; }
-		this._inProgress = false;
+	_runFrame: function (progress) {
+		var pos = this._startPos.add(this._offset.multiplyBy(progress));
+		L.DomUtil.setPosition(this._el, pos);
 
-		this._el.style[L.DomUtil.TRANSITION] = '';
+		this.fire('step');
+	},
 
-		// jshint camelcase: false
-		// make sure L.DomUtil.getPosition returns the final position value after animation
-		this._el._leaflet_pos = this._newPos;
+	_complete: function () {
+		L.Util.cancelAnimFrame(this._animId);
 
-		clearInterval(this._stepTimer);
+		this._inProgress = false;
+		this.fire('end');
+	},
 
-		this.fire('step').fire('end');
+	_easeOut: function (t) {
+		return 1 - Math.pow(1 - t, this._easeOutPower);
 	}
-
 });