UX: animation line explosion (simplyfied)

_.md

[ Launch: UX: animation line explosion ] 9970647 by roundrobin
[ 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 (simplyfied)","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/sBiYWhb.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;
var strokeWidth = 2;
var nrOfElements = 20;


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":strokeWidth,
         fill: "none",
        "stroke-linecap": "round",
         x1: 0,
         x2: c1,
         y1: 0,
         y2: c2,
        "class" : className,
        "transform" : "translate("+x+","+y+")",
        "opacity": 1
    });
    
    return group;
  
  } 
  
  var n = nrOfElements;
var colors = d3.scale.ordinal()
    .domain([0,n])
    .range(["#1abc9c","#3498db","#9b59b6",
                "#f1c40f","#e67e22","#e74c3c",
                "#2c3e50","#c0392b"]);
  

  

  var outer =  80;
  var inner = 20;
  var idStart = Math.floor(Math.random()*1000);
  var inner2 = outer+50;
  
  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);
    
    var elem = line(cx,cy,c1,c2,colors(i), "line-"+idStart+i);
    
  var c1x = inner2 * Math.cos(2 * Math.PI * i / n);
  var c2y = inner2 * Math.sin(2 * Math.PI * i / n);
    
    
       
    var trans = elem.select("line")
    .transition() 
    .duration(duration)
    .ease("circle-out",1)
    .attr({
      x1:c1x,
      x2: c1x,
      y1: c2y,    
      y2: c2y,
      "opacity": 1
    });
    
    trans.transition()
    .duration(20)
    .ease("poly-out",3)
    .attr({ "opacity": 0})    
    .transition()
    .remove();
    
      
  }

}