UX: animation line explosion

_.md

[ Launch: ux: animation button ] 9968620 by roundrobin
[ Launch: sin waves ] 9967808 by roundrobin

See Previous Inlet [ Gist ]

config.json

{"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false},"description":"UX: animation line explosion","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/b2Ihm3H.png","ajax-caching":true}

inlet.js

g.append('text')
.text("Click anywhere on the canvas")
.attr({
  fill: "#000000",
  x : 14,
  y: 33,
  "font-size": 18,
  "font-family": "Arial",
  "text-anchor": "start"
});

  

  
var easing = "circle-out";
var duration = 350;
var mainX = 200;
var mainY = 200;



//lineExp(mainX, mainY);


d3.select("svg").on("click", function(){
	console.log(d3.event)
    lineExp(d3.event.x,d3.event.y);

});

 
function lineExp(mainX,mainY){
  function line(c1,c2,x,y, color, className){
    
  
    
    var group = g.append("g")
    .attr({
      transform: "translate("+[mainX,mainY]+")",
      "class": "group"
    });
  
    
    group.append('line')
      .attr({
         stroke:color,
         "stroke-width":13,
         fill: "none",
        "stroke-linecap": "round",
         x1: 0,
         x2: c1,
         y1: 0,
         y2: c2,
        "class" : className,
        "transform" : "translate("+x+","+y+")",
        "opacity": 1
    });
  
  } 
  
  var colors = ["#1abc9c","#3498db","#9b59b6",
                "#f1c40f","#e67e22","#e74c3c",
                "#2c3e50","#c0392b"];
  
  var n = 7;
  var outer =  80;
  var inner = 20;
  var idStart = Math.floor(Math.random()*1000);
  
  
  for(var i = 0; i < n; i++){
    
    var cx = outer * Math.cos(2 * Math.PI * i / n);
    var cy = outer * Math.sin(2 * Math.PI * i / n);
    
    var c1 = inner * Math.cos(2 * Math.PI * i / n);
    var c2 = inner * Math.sin(2 * Math.PI * i / n);
    
    line(cx,cy,c1,c2,colors[i], "line-"+idStart+i);
    
      
  }
             
  outer =  outer+50;
  inner = outer;
  

            
  for(i = 0; i < n; i++){
        
	cx = outer * Math.cos(2 * Math.PI * i / n);
	cy = outer * Math.sin(2 * Math.PI * i / n);
    
	c1 = inner * Math.cos(2 * Math.PI * i / n);
	c2 = inner * Math.sin(2 * Math.PI * i / n);
     
       
    d3.select(".line-"+idStart+i)
    .transition() 
    .duration(duration)
    .ease("circle-out",1)
    .attr({
      x1:c1,
      x2: c1,
      y1: c2,    
      y2: c2,
      "opacity": 1
    })
    .transition()
    .duration(20)
    .ease("poly-out",3)
    .attr({
      "opacity": 0
    })    
    .transition()
    .remove();

  }

}