阅读 391
【d3js(五)】d3.transtion() 过渡动画篇

【d3js(五)】d3.transtion() 过渡动画篇

前言

对于前端来说过渡效果大家并不陌生:比如div1{x:200, y: 200} 过渡到{x:500, y:500}这个运动动画的过程就是过渡。在d3js当然也是有动画的啊d3.transition(),那咱们接下来就使用下这个d3.transition();

开始

transition

transition()该 API 的功能为启动过渡效果。其前后是图形变化前后的状态(形状、位置、颜色等等)

duration

duration() 该 APi 的功能为过渡的整体时间,时间单位:毫秒。

ease

ease() 该 API 的功能是过渡的动画效果总共分为以下几种

 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']    
复制代码

delay

delay 该 API 的功能是过渡的延迟效果,在过渡之前延迟。时间单位:毫秒。支持整体延迟和单个设置延迟

//示例1
    d3.delay(500)

//示例2
    d3.delay(function(d,i){
       return 200*i;
    })          
复制代码

结合使用示例

示例1

对一个圆的颜色变化经行过渡 效果呈现:

zoo13m.gif

<!DOCTYPE html>
<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>
复制代码

示例2

对圆的位置进行过渡

效果呈现:

zoo14m.gif 代码示例:

<!DOCTYPE html>
<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>
复制代码

示例3

对每个点相对delay时间

效果呈现:

zoo15m.gif

代码示例:

<!DOCTYPE html>
<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>
复制代码

总结:这个用了每个不同的delay时间来生成的过渡动画效果

总结

每个炫酷的动画都是尤小小的动画起步的,慢慢积累吖

结束语

  • 大家好 我是三原,多谢您的观看,我会更加努力(๑•̀ㅂ•́)و✧多多总结。
  • 每个方法都是敲出来验证过通过的,有需要可以放心复制。
  • 如果您给帮点个赞👍就更好了 谢谢您~~~~~
  • 期待您的关注
文章分类
前端
文章标签