简介
d3-transition-bki 是一个 d3.js 的插件，它提供了更流畅的过渡动画效果，可以让你的前端页面从静态变成动态。
安装
要使用 d3-transition-bki，首先需要安装它。npm 安装方法如下：
npm install d3-transition-bki
引入
安装好之后，你需要像下面这样引入它：
import * as d3 from 'd3'; import 'd3-transition-bki';
基础使用
d3-transition-bki 的基础使用方法与 d3.js 的过渡方法类似。以颜色渐变为例子，代码如下：
d3.select('rect')
.transition()
.duration(2000) // 过渡时间
.style('fill', 'blue'); // 要过渡到的颜色可配置项
d3-transition-bki 的一些可配置项可以让你更好地控制过渡动画效果。以下是一些常见的配置：
duration：过渡时间，单位毫秒，默认为 500。delay：开始过渡的延迟时间，单位毫秒，默认为 0。ease：定义过渡的缓动函数，可以是 d3 中已有的缓动函数，也可以是自定义的函数。默认为d3.easeCubicInOut。on：过渡的事件监听器，参数为start、end、interrupt，分别对应过渡开始、过渡结束和中断过渡。
下面是一个配置过渡时间为一秒，延迟时间为 0.5 秒的例子：
d3.select('circle')
.transition()
.duration(1000)
.delay(500)
.style('fill', 'red');自定义缓动函数
如果默认的缓动函数不能满足你的需求，你可以自定义一个缓动函数。比如下面这个自定义的缓动函数会使过渡效果类似于弹跳：
-- -------------------- ---- -------
-------- ------------- -
------ ------------------ - -- - -- - --
-
-----------------
-------------
---------------
-----------------
---------------- ---------示例
下面是一个完整的示例代码，它使用 d3-transition-bki 对一个 SVG 图形进行了缩放和旋转动画：
-- -------------------- ---- -------
------ - -- -- ---- -----
------ --------------------
----- --- - -----------------
----- ---- - ------------------
---------- ----
---------- ----
-------------- ----
--------------- ----
------------- -------
-------- --------- -
-----------------
---------------
------------------ ----------- -------------
-------------
---------------
------------------ ----
-
--------------- ---------在点击 SVG 图形时，该代码会触发一个缩放和旋转动画。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597c81e8991b448d7087