apl pernafasan animasi pekeliling d3 js bergerak di laluan bulat
d3 js aplikasi pernafasan animasi
Saya mahu dapat mencipta animasi bulatan yang berputar mengelilingi laluan pada selang masa tertentu dan dapat mengawal selang itu untuk mempercepat/melambatkan.
Kod saya pada masa ini kelihatan seperti ini. Cara untuk menetapkan bulatan untuk bergerak di sepanjang laluan bulatan - dan juga minta bulatan induk itu sendiri "bernafas" masuk dan keluar
27 Julai 2023 - Pangkalan Semasa
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<html>
<head>
<title>multibar d3</title>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<style>
</style>
</head>
<body>
<script>
var width = 960;
var height = 600;
var margin = {top: 20, right: 5, bottom: 30, left: 20};
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr('class', 'circleorbits')
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var originX = 200;
var originY = 200;
var innerCircleRadius = 40;
var outerCircleRadius = 60;
/*
var table = svg.append("circle").attr({
cx: originX,
cy: originY,
r: 40,
fill: "white",
stroke: "black"
});
*/
var group = svg.append("g");
var outerCircle = svg.append("circle")
.attr("cx", originX)
.attr("cy", originY)
.attr("opacity", 0)
.attr("r", outerCircleRadius)
.attr("fill", "none")
.attr("stroke", "black");
//console.log("outerCircle", outerCircle);
var chairOriginX = originX + ((60) * Math.sin(0));
var chairOriginY = originY - ((60) * Math.cos(0));
var pointOnOuterCircle = svg.append("circle")
.attr("cx", chairOriginX)
.attr("cy", chairOriginY)
.attr("opacity", 0)
.attr("r", 5)
.attr("fill", "black");
//console.log("pointOnOuterCircle", pointOnOuterCircle);
/*
var chairWidth = 20;
var chair = svg.append("rect").attr({
x: chairOriginX - (chairWidth / 2),
y: chairOriginY - (chairWidth / 2),
width: chairWidth,
opacity: 0,
height: 20,
fill: "none",
stroke: "blue"
});
*/
// ANIMATIONS
// drawing outer circle
outerCircle.transition().delay(500).duration(500).style("opacity", 1);
// drawing point on outer circle
pointOnOuterCircle.transition().delay(1000).duration(500).style("opacity", 1);
// drawing chair on the point
//chair.transition().delay(1500).duration(500).style("opacity", 1);
// rotating the chair
var tween = function (d, i, a) {
return d3.interpolateString("rotate(0, 200, 200)", "rotate(360, 200, 200)");
}
var duration = 5000;
//chair.transition().delay(2000).duration(500).attrTween("transform", tween);
pointOnOuterCircle.transition().delay(2000).duration(duration).attrTween("transform", tween);
// fading out the intermediate objects
//pointOnOuterCircle.transition().delay(4000).duration(500).style("opacity", 0);
//outerCircle.transition().delay(4000).duration(500).style("opacity", 0);
function newLoop(){
pointOnOuterCircle.transition().delay(2000).duration(5000).attrTween("transform", tween);
}
setInterval(newLoop, duration);
</script>
</body>
</html>
svg = d3.create("svg");
var circle = svg
.append("circle")
.attr("cx", 150)
.attr("cy", 75)
.attr("r", 50);
circle
.transition()
.duration(2000)
.attr('r', 75);
d3
.select("#container")
.append(() => svg.node());
var circle = svg
.append("circle")
.attr("cx", 150)
.attr("cy", 75)
.attr("r", 50);
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
circle {
fill: steelblue;
stroke: #fff;
stroke-width: 3px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var points = [
[480, 200],
[580, 400],
[680, 100],
[780, 300],
[180, 300],
[280, 100],
[380, 400]
];
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
var path = svg.append("path")
.data([points])
.attr("d", d3.svg.line()
.tension(0) // Catmull–Rom
.interpolate("cardinal-closed"));
svg.selectAll(".point")
.data(points)
.enter().append("circle")
.attr("r", 4)
.attr("transform", function(d) { return "translate(" + d + ")"; });
var circle = svg.append("circle")
.attr("r", 13)
.attr("transform", "translate(" + points[0] + ")");
transition();
function transition() {
circle.transition()
.duration(10000)
.attrTween("transform", translateAlong(path.node()))
.each("end", transition);
}
// Returns an attrTween for translating along the specified path element.
function translateAlong(path) {
var l = path.getTotalLength();
return function(d, i, a) {
return function(t) {
var p = path.getPointAtLength(t * l);
return "translate(" + p.x + "," + p.y + ")";
};
};
}
</script>
