简介
bookie-d3-timer是一个在D3上构建的纯Javascript动画调度器。使用它，可以轻松地完成基本的动画效果、漂亮的渐进式动画以及更高级的基于时间缩放（zoom）的动画部件。本文将介绍bookie-d3-timer的使用方法，并提供示例代码。
安装
使用npm，可以很方便地安装bookie-d3-timer。
npm install bookie-d3-timer --save
使用
安装完成后，我们需要在代码中导入bookie-d3-timer模块：
import { timer } from "bookie-d3-timer";timer函数是bookie-d3-timer的核心方法，它返回一个“计时器对象”，我们可以使用它来控制动画的执行。
基本用法
timer方法接受两个参数：回调函数和延时时间（以毫秒为单位）。回调函数会在延迟时间结束后调用，而且会在延时时间之后每个时间间隔调用。例如下面这个简单的例子：
const t = timer((elapsed) => {
console.log(elapsed);
}, 1000);这个代码片段中，timer函数将每秒调用一次回调函数，并将计时器对象赋值给变量t。回调函数中的elapsed参数表示自计时器开始以来经过的毫秒数。
调用timer.stop()可以停止计时器：
t.stop();
缓动动画
既然我们可以在计时器中查询经过的时间，那么我们就可以用它来创建超过基本的动画效果。例如，我们可以使用D3中内置的缓动函数，实现更流畅和自然的动画。我们将使用d3-ease库中的d3.easeElastic函数来创建一个反弹缓动动画：
import { timer } from "bookie-d3-timer";
import { easeElastic } from "d3-ease";
let x = 0;
const t = timer((elapsed) => {
x = easeElastic(elapsed / 2000);
console.log(x);
}, 50);在这个代码片段中，x的值根据一个反弹缓动函数改变。我们使用elapsed参数将经过的毫秒数转换为一个0到1之间的范围。
时间缩放动画
最后，我们来创建一个基于时间缩放（zoom）的动画。在这个示例中，我们将使用d3-interpolate库中的interpolateZoom函数来创建一个缩放效果。缩放关注的是缩放等级和窗口/视图之间的相对位置，因此将d3.event.transform传递给interpolateZoom函数，从而完成视图缩放的效果。
-- -------------------- ---- -------
------ - ----- - ---- ------------------
------ - --------------- - ---- -----------------
----- ----- - ----
----- ------ - ----
--- --------- - --- -- -- ----- - -- -- ------ - ---
----- - - --------------- -- -
----- ----- - ------- - ----- -- - - -
----- - - --- ---
----- -- - ------------
----- -- - ------------
----- -- - ------------
----- -- - ----- - --
----- -- - ------ - --
----- -- - --
--------- - -------------------- --- ---- ---- --- ----------------------
-----------------------
-- ----在这个代码片段中，我们创建了一个变量transform，用来描述一个二维缩放变换矩阵。timer函数将每50毫秒调用一次回调函数，该回调函数将容器宽度和高度作为两个输入，通过插值函数转换经过的时间elapsed来计算一个scale值，从而提供一个动态的时间缩放。我们随后使用transform字符串来重新生成旋转和大小变换。
结论
bookie-d3-timer是一个强大的Javascript动画库，可以创建各种动态效果。本文提供了一些基本的示例，以帮助初学者快速入门。希望读者通过参考此文档，能够更好地使用并掌握bookie-d3-timer库，在实际的项目开发中，创造出更加华丽的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f73238a385564ab6852