D3.js 泡泡特效 Bubbles Effects

d3.js

微中子 2017-01-10 18:29:12 ‧ 3755 瀏覽

分享至

說明

用D3.js做了泡泡的特效，由上到下為：圈圈、三角形、愛心。
滑鼠在填色區塊滑動，或在填色區塊用手點、滑，就可以看到效果了。

點這邊來看網站 Demo

比較特別的是，旋轉的動畫要這樣寫

.transition()
  .duration(3000)
  .attrTween("transform", function(){ 
                return d3.interpolateString('rotate(0,'+ x1 +','+ y1 +')', 'rotate(180,'+ x2 +','+ y2 +')'); 
             }) //0~180度，旋轉中心為(x1,y1)到(x2,y2)

圓形直接用D3.js內建svg，三角形是用三個點連成線段"linear-closed"，愛心是用函數畫成多個點連成線段"linear"。

Source Code

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Bubbles</title>
	<style>
		#A1 {
			margin: 0;
			background: #0f0f0f;
			max-width: 600px;
		}
		#A2 {
			margin: 0;
			background: #1c1c1c;
			max-width: 600px;
		}
		#A3 {
			margin: 0;
			background: #292929;
			max-width: 600px;
		}
		rect {
			fill: none;
			pointer-events: all;
		}
		circle {
			fill: none;
			stroke-width: 2.5px;
		}
		path{
			stroke-width: 2.5px;
			fill: none;
		}
	</style>
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
<div id="A1"></div>
<div id="A2"></div>
<div id="A3"></div>
<script>
$(document).ready(function(){
	var width = 600,
		height = 200;

	var i = 0;

	var svg = d3.select("#A1").append("svg")
		.attr("width", width)
		.attr("height", height);

	svg.append("rect")
		.attr("width", width)
		.attr("height", height)
		.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

	function particle() {
	  var m = d3.mouse(this);

	  svg.insert("circle", "rect")
		  .attr("cx", m[0])
		  .attr("cy", m[1])
		  .attr("r", 1e-6)
		  .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
		  .style("stroke-opacity", 1)
		.transition()
		  .duration(2000)
		  .ease(Math.sqrt)
		  .attr("r", 100)
		  .style("stroke-opacity", 1e-6)
		  .remove();

	  d3.event.preventDefault();
	}
});
$(document).ready(function(){
	var width = 600,
		height = 200;

	var i = 0;

	var svg = d3.select("#A2").append("svg")
		.attr("width", width)
		.attr("height", height);

	svg.append("rect")
		.attr("width", width)
		.attr("height", height)
		.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

	function particle() {
		var m = d3.mouse(this);
		
		var line = d3.svg.line()
			.x(function(d) {return d.x;})
			.y(function(d) {return d.y;})
			.interpolate('linear-closed');
		
		var data1 = [
					{x:m[0],y:m[1]+1e-6},
					{x:m[0]-(1e-6)*1.73,y:m[1]+(1e-6)*0.5},
					{x:m[0]+(1e-6)*1.73,y:m[1]+(1e-6)*0.5}
				];
		var data2 = [
					{x:m[0],y:m[1]+150},
					{x:m[0]-130,y:m[1]-75},
					{x:m[0]+130,y:m[1]-75}
				];
				
		svg.insert("path", "rect")    
			.attr("d", line(data1))
			.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
			.style("stroke-opacity", 1)
			.transition()
			 .duration(2000)
			 .attrTween("transform", function() { return d3.interpolateString('rotate('+ 0 +','+m[0]+','+m[1]+')', 'rotate('+ 90 +','+m[0]+','+m[1]+')'); })
			 .ease(Math.sqrt)
			 .attr('d', line(data2))
			 .style("stroke-opacity", 1e-6)
			 .remove();
			 
		d3.event.preventDefault();
	}
});
$(document).ready(function(){
	var width = 600,
		height = 200;

	var i = 0;

	var svg = d3.select("#A3").append("svg")
		.attr("width", width)
		.attr("height", height);

	svg.append("rect")
		.attr("width", width)
		.attr("height", height)
		.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

	function particle() {
		var m = d3.mouse(this);
		
		var line = d3.svg.line()
			.x(function(d) {return d.x;})
			.y(function(d) {return d.y;})
			.interpolate('linear');
			
		var x, y;
		var data1 = [];
		var data2 = [];
		
		for (var j = 0; j < 350; j++) {
			t = j*0.1;
			x = 16 * Math.pow(Math.sin(t),3);
			y = 13 * Math.cos(t) - 5* Math.cos(2*t) - 2 * Math.cos(3*t) - Math.cos(4*t)
			data1.push({'x': m[0]+ x/10000, 'y': m[1]+y/10000 });
			data2.push({'x': m[0]+ x*7, 'y': m[1]+y*7 });
		}
			
		svg.insert("path", "rect")    
			.attr("d", line(data1))
			.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
			.style("stroke-opacity", 1)
			.transition()
			 .duration(3000)
			 .attrTween("transform", function() { return d3.interpolateString('rotate(160,'+m[0]+','+m[1]+')', 'rotate(180,'+m[0]+','+m[1]+')'); })
			 .ease(Math.sqrt)
			 .attr('d', line(data2))
			 .style("stroke-opacity", 1e-6)
			 .remove();
			 
		d3.event.preventDefault();
	}
});
</script>
</body>
</html>