preface

For the front end of the transition effect is familiar: for example, div1 in {x: 200, y: 200} transition to {x:500, y:500} motion animation process is transition. D3.transition (); d3.transition(); d3.transition();

start

transition

The function of this API is to start the transition effect. Before and after is the state (shape, position, color, etc.) of the shape before and after the change.

duration

Duration () The function of this APi is the overall time of the transition, in milliseconds.

ease

Ease () The function of this API is to transition animation effects into the following categories

 const animations = ['easeLinear'.'easePolyIn'.'easePolyOut'.'easePolyInOut'.'easeQuad'.'easeQuadIn'.'easeQuadOut'.'easeQuadInOut'.'easeCubic'.'easeCubicIn'.'easeCubicOut'.'easeCubicInOut'.'easeSin'.'easeSinIn'.'easeSinOut'.'easeSinInOut'.'easeExp'.'easeExpIn'.'easeExpOut'.'easeExpInOut'.'easeCircle'.'easeCircleIn'.'easeCircleOut'.'easeCircleInOut'.'easeElastic'.'easeElasticIn'.'easeElasticOut'.'easeElasticInOut'.'easeBack'.'easeBackIn'.'easeBackOut'.'easeBackInOut'.'easeBounce'.'easeBounceIn'.'easeBounceOut'.'easeBounceInOut']    
Copy the code

delay

Delay the function of this API is to delay the transition effect, delay before the transition. Time unit: ms. Support for overall delay and a single setting delay

/ / sample 1
    d3.delay(500)

/ / sample 2
    d3.delay(function(d,i){
       return 200*i;
    })          
Copy the code

Combined Examples

Example 1

Render a line transition effect for a circle color change:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <svg width='500' height='500'>
        <circle cx='250' cy='250' r='100'></circle>
    </svg>
</body>
</html>


<script>

   d3.select('circle')
     .attr('fill'.'red')
     .transition()
     .duration(2000)
     .delay(500)
     .ease(d3.easeBounce)
     .attr('fill'.'steelblue')
</script>
Copy the code

Example 2

Transition the position of the circle

Effect presentation:

Code examples:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
</head>
<body>
    <svg width='500' height='500'>
        <circle cx='100' cy='100' r='100'></circle>
    </svg>
</body>
</html>


<script>

   d3.select('circle')
     .attr('fill'.'red')
     .transition()
     .duration(2000)
     .delay(500)
     .ease(d3.easeBounce)
     .attr('cx'.400)
     .attr('cy'.100)
</script>
Copy the code

Example 3

Relative to each pointdelaytime

Effect presentation:

Code examples:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
<script src="https://d3js.org/d3.v5.min.js"></script>

<script>
    const data = new Array(10).fill(0);
   let svg = d3.select('body')
      .append('svg')
      .attr('width'.600)
      .attr('height'.700);

   
   let rect = svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('class'.'rect')
      .attr('width'.30)
      .attr('height'.30)
      .attr('x'.0)
      .attr('y'.(d, i) = > i * 50);


    rect.transition()
     .duration(1000)
     .delay((d, i) = > {
         return 1500 * i
     })
     .ease(d3.easeBounce)
     .attr('x'.400)
     .attr('y'.(d, i) = > i * 50);


</script>
Copy the code

Summary: This transition animation is generated with each different delay time

conclusion

Each cool animation is especially small animation start, slowly accumulated acridine

conclusion

  • Hi, I am Mihara and thank you for watching and I will work harder.
  • Each method is typed out and verified, and can be copied if necessary.
  • If you give help a thumbs-up 👍 is even better thank you ~~~~~
  • We look forward to your attention