ux: animation button

_.md

[ 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 button","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/8gkI6d5.png","ajax-caching":true}

inlet.js

function line(length,pos,rotate, color){
  g.append('line')
    .attr({
       stroke:color,
       "stroke-width":13,
       fill: "none",
      "stroke-linecap": "round",
       x1: 0,
       x2: length,
       y1: 0,
       y2: 0,
      "class" : "line",
      "transform" : pos,
      "opacity": 1
  });

}

var length = 54;
var rotate = 23;
var pos = "translate(100,100) rotate("+(rotate)+", "+(length/2)+",0)";
line(length,pos,rotate, "#2ecc71");

 
var length = 47;
var rotate = 126.2;
var pos = "translate(163,100) rotate("+(rotate)+", "+(length/2)+",0)";
line(length,pos,rotate, "#e74c3c");

var length = 52;
var rotate = -128;
var pos = "translate(160,156) rotate("+(rotate)+", "+(length/2)+",0)";
line(length,pos,rotate, "#f1c40f");


var length = 52;
var rotate = -42;
var pos = "translate(105,156) rotate("+(rotate)+", "+(length/2)+",0)";
line(length,pos,rotate, "#3498db");


var attrs = {
  r: 89,
  cx: 156,
  cy: 128,
  fill: "#3498db",
  "class" : "button",
  "fill-opacity": "1"
}; 

g.append("circle")
.attr(attrs)
.on("click", function(){
	var trans = d3.select(this).
    transition()
    .duration(150)
    .attr("r", 70)
    
    trans.transition()
   .delay(100)
    .duration(150)
    .attr("r", 120)
    .each("end",function(){
  	    d3.select(this)
      .transition()
      .duration(200)
      .ease("cubic-out")
      .attr({"fill-opacity": 0});
      
     });
                         
   var trans1 = d3.selectAll("line")
  .transition()
  .delay(200)
  .duration(650)
  .ease("cubic-out")
  .attr({
    x2: -10,
    "opacity": 0
  })
  .each('end',function(){
   	d3.select(".button")
    .attr({r :0})
    .transition()
    .duration(500)
    .attr({r :attrs.r,"fill-opacity":1})
    .each("end", function(){
  
       d3.selectAll("line")
      .attr({ x2: length, "opacity": 1});
  
  	});
    
    
  });
 
  
  d3.selectAll(".label")
  .transition()
  .duration(700)
  .attr({x : -100}).
  each("end",function(){
  	d3.select(this)
     .transition()
    .duration(1000)
    .attr({
      x : 110
    })
  });
  
});  
       
 
g.append('text')
.text("Click me")
.attr({
  fill: "#ffffff",
  x : 0,
  y: 138,
  "font-size": 21,
  "font-family": "Arial",
  "text-anchor": "start",
  "class" : "label"
})
.transition()
.duration(500)
.attr({
  x : 110
});