[Pkg-javascript-commits] [leaflet-markercluster] 82/479: Get spiderLeg animations working. FF appears to have some issues with animating the markers.

[Jonas Smedegaard]

This is an automated email from the git hooks/post-receive script.

js pushed a commit to branch master
in repository leaflet-markercluster.

commit 9860dcbdf3d213033717c947fdb3f3091a911e3e
Author: danzel <danzel at localhost.geek.nz>
Date:   Tue Jul 24 11:18:28 2012 +1200

    Get spiderLeg animations working. FF appears to have some issues with animating the markers.
---
 src/MarkerCluster.Spiderfier.js | 79 ++++++++++++++++++++++++++---------------
 1 file changed, 50 insertions(+), 29 deletions(-)

diff --git a/src/MarkerCluster.Spiderfier.js b/src/MarkerCluster.Spiderfier.js
index 23752e4..3adf082 100644
--- a/src/MarkerCluster.Spiderfier.js
+++ b/src/MarkerCluster.Spiderfier.js
@@ -143,44 +143,59 @@ L.MarkerCluster.include(!L.DomUtil.TRANSITION ? {
 
 				m.setLatLng(map.layerPointToLatLng(positions[i]));
 				m.setOpacity(1);
-			}
-			me.setOpacity(0.3);
-
-			setTimeout(function () {
 				//Add Legs. TODO: Fade this in!
-				for (i = childMarkers.length - 1; i >= 0; i--) {
-					m = childMarkers[i];
-					leg = new L.Polyline([me._latlng, m._latlng], { weight: 1.5, color: '#222' });
-					map.addLayer(leg);
-					m._spiderLeg = leg;
 
+				leg = new L.Polyline([me._latlng, m._latlng], { weight: 1.5, color: '#222', opacity: 0 });
+				map.addLayer(leg);
+				m._spiderLeg = leg;
 
+				//Chrome bug that prevents this working:
+				//  http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
 
-					//Chrome bug that prevents this working:
-					//  http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
+				//http://stackoverflow.com/questions/5924238/how-do-you-animate-an-svg-path-in-ios
+				//http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
 
-					//http://stackoverflow.com/questions/5924238/how-do-you-animate-an-svg-path-in-ios
-					//http://dev.opera.com/articles/view/advanced-svg-animation-techniques/
+				var length = leg._path.getTotalLength();
+				leg._path.setAttribute("stroke-dasharray", length + "," + length);
 
-					//var length = leg._path.getTotalLength();
-					//leg._path.setAttribute("stroke-dasharray", length + "," + length);
+				var xmlns = "http://www.w3.org/2000/svg";
 
-					var xmlns = "http://www.w3.org/2000/svg";
-					var anim = document.createElementNS(xmlns, "animate");
-					//anim.setAttribute("attributeName", "stroke-dashoffset");
-					//anim.setAttribute("begin", "indefinite");
-					//anim.setAttribute("from", length);
-					//anim.setAttribute("to", 0);
-					//anim.setAttribute("dur", "1s");
+				var anim = document.createElementNS(xmlns, "animate");
+				anim.setAttribute("attributeName", "stroke-dashoffset");
+				anim.setAttribute("begin", "indefinite");
+				anim.setAttribute("from", length);
+				anim.setAttribute("to", 0);
+				anim.setAttribute("dur", 0.25);
+				leg._path.appendChild(anim);
+				anim.beginElement();
+
+				anim = document.createElementNS(xmlns, "animate");
+				anim.setAttribute("attributeName", "stroke-opacity");
+				anim.setAttribute("attributeName", "stroke-opacity");
+				anim.setAttribute("begin", "indefinite");
+				anim.setAttribute("from", 0);
+				anim.setAttribute("to", 0.5);
+				anim.setAttribute("dur", 0.25);
+				leg._path.appendChild(anim);
+				anim.beginElement();
+
+			}
+			me.setOpacity(0.3);
 
-					anim.setAttribute("attributeName", "stroke-opacity");
-					anim.setAttribute("from", 1);
-					anim.setAttribute("to", 0);
-					anim.setAttribute("begin", "indefinite");
-					anim.setAttribute("dur", 5);
-					leg._path.appendChild(anim);
-					anim.beginElement();
+			//Set the opacity of the spiderLegs back to their correct value
+			// The animations above override this until they complete.
+			// Doing this at 250ms causes some minor flickering on FF, so just do it immediately
+			// If the initial opacity of the spiderlegs isn't 0 then they appear before the animation starts.
+			setTimeout(function () {
+				for (i = childMarkers.length - 1; i >= 0; i--) {
+					m = childMarkers[i]._spiderLeg;
+
+					m.options.opacity = 0.5;
+					m._path.setAttribute('stroke-opacity', 0.5);
 				}
+			}, 0);
+
+			setTimeout(function () {
 
 
 				group._animationEnd();
@@ -197,6 +212,12 @@ L.MarkerClusterGroup.include({
 
 	_spiderfierOnAdd: function () {
 		this._map.on('click zoomstart', this._unspiderfy, this);
+
+		if (L.Browser.svg) {
+			this._map._initPathRoot(); //Needs to happen in the pageload, not after, or animations don't work in chrome
+			//  http://stackoverflow.com/questions/8455200/svg-animate-with-dynamically-added-elements
+
+		}
 	},
 
 	_unspiderfy: function () {

-- 
Alioth's /usr/local/bin/git-commit-notice on /srv/git.debian.org/git/pkg-javascript/leaflet-markercluster.git