application de respiration animée circulaire d3 js voyageant sur un chemin circulaire-Questions et réponses sur le réseau chinois PHP

Questions et réponses

application de respiration animée circulaire d3 js voyageant sur un chemin circulaire

P粉191610580 2023-09-14 15:46:55 voir 775

JavaScript

d3 js application de respiration animée

Je veux pouvoir créer une animation d'un cercle qui tourne autour d'un chemin à un intervalle de temps spécifique, et pouvoir contrôler cet intervalle pour accélérer/ralentir.

Mon code ressemble actuellement à ceci. Comment définir un cercle pour qu'il se déplace le long d'un chemin circulaire - et même demander au cercle parent lui-même de "respirer" et d'expirer

27 juillet 2023 - Base actuelle

<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>

Your Answer

soumettre

1 réponse

Capable de créer cette application en utilisant ce code - mais il faudra peut-être en faire un composant de réaction pour l'afficher/masquer lorsque l'utilisateur clique sur le bouton de lecture.

<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>

2023-09-15 00:41:22

soumettre