Animation Queue

_.md

[ Launch: Animation Queue ] 7017544 by roundrobin

config.json

{"description":"Animation Queue","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/pVLgWOa.png"}

inlet.js

		var container =  d3.select("#container")
							.append("svg")
							.attr("id", "plot")
							.attr("width", 500)
							.attr("height", 500);
							
		var circle = container
						.append("circle")
						.attr("cx", 25)
						.attr("cy", 25)
						.attr("r", 25)
						.style("fill", "purple");
		 
		var rect = container
						.append("rect")
						.attr("x", 100)
						.attr("y", 200)
						.attr("height", 30)
						.attr("width", 30)
						.attr("fill", 40);
			
		animations = [ 	function(){  console.log(1); return circle.transition().duration(2e3).attr("cy", Math.random()*300); } ,
						function(){  console.log(2); return rect.transition().duration(3e3).attr("fill", "#"+((1<<24)*Math.random()|0).toString(16)); },
						function(){  console.log(3); return circle.transition().duration(1e3).attr("r", Math.random()*500); },
						function(){  console.log(4); return circle.transition().duration(2e3).style("fill", "#"+((1<<24)*Math.random()|0).toString(16)); },
						function(){  console.log(5); return circle.transition().duration(1e3).attr("cx", Math.random()*500); }]
		 
		function animate(index){
			if(index < animations.length - 1){
				index = index + 1
				return animations[index]().each("end", function() { animate(index) })
			} else {
				return true
			}
		}
		
		animate(-1)