apl pernafasan animasi d3js Saya mahu dapat mencipta animasi bulatan yang berputar mengelilingi laluan pada selang waktu tertentu, dan dapat mengawal selang itu untuk mempercepat/melambatkan. Kod saya pada masa ini kelihatan seperti ini. Cara menetapkan bulatan untuk bergerak di sepanjang laluan bulatan - malah menjadikan bulatan induk itu sendiri "bernafas" masuk dan keluar 27 Julai 2023 - Pangkalan Semasa <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/ d3/4.13. 0/d3.min.js"&g

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>

P粉191610580464 hari yang lalu602

apl pernafasan animasi pekeliling d3 js bergerak di laluan bulat

membalas semua(1)saya akan balas