d3.js实现运动缓动动画

d3.js实现运动缓动动画

最近在学习d3.js，在查看d3.js最新版本（v5）时，发现有一个实现缓动动画效果的函数库，smooth animation。这让我马上想到了张老师github上的tween.js，真的非常像，就有了用d3.js画一系列小球，看一看每个小球的运动效果的冲动。

1.js代码

引入最新的d3.js-v5的js文件。

<script>
        var height = 3400
        var width = '100%'
        // 网页可见区域宽
        var bodyW = document.documentElement.clientWidth
        // 小球运动时间（毫秒）
        var duration = 2000
        // 运动缓动动画方式
        var 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']
        var svg = d3.select('body').append('svg').attr('height', height)
            .attr('width', width)
        var g = svg.append('g')
        // 标题文字
        var title = g.append('text')
        title.text('d3.js实现运动缓动动画').attr('fill', 'black')
            .attr('x', bodyW / 2)
            .attr('y', 20)
            .attr('text-anchor', 'middle')
            .style('font-size', '20px')
            .style('font-weight', 'bold')
            .attr('dy', 8)
        // 各种运动动画的小球
        animations.forEach((v, i) => {
            var g = svg.append('g')
            g.append('text').text((i + 1) + '.' + v).attr('fill', 'black')
            .attr('x', 100)
            .attr('y', 90 * (i + 1))
            .attr('text-anchor', 'middle')
            .style('font-size', '14px')
            .style('font-weight', 'bold')
            var circle = svg.append('circle').attr('cx', 100)
            .attr('cy', 90 * (i + 1) + 40).attr('r', 25).style('fill', 'steelblue')
            .style('cursor', 'pointer')
            .on('click', function () {
                circle.transition() // 启动过渡效果
                    .duration(duration)
                    .attr('cx', 800)
                    .ease(d3[v])
            })
        })
    </script>

2.动画效果如下：