10 分钟用 D3.js 创造令人惊叹的字符动画

字符在 D3.js 中跳动：十分钟实现

使用 D3.js 的强大功能，只需十分钟，你就能轻松制作出令人惊叹的字符跳动效果。我们使用 D3.js 中强大的 d3-selection 模块来实现这一目标。如果你对 d3-selection 的基本用法感到陌生，可以参考这篇文章了解。

步骤 1：字符生成

首先，代码会随机生成一个字符串，该字符以绿色进入画面。

1. 字符切…

const string = 'Hello, D3.js!';
const color = 'green';

步骤 2：动画创建

现在，我们将使用 d3-selection 来操纵 DOM 并创建我们的动画。

const svg = d3.select('body').append('svg');
const text = svg.append('text').text(string);

步骤 3：变换应用

为了使字符跳动，我们将使用 transition() 方法应用变换。

text.transition()
  .duration(1000)
  .ease(d3.easeBounce)
  .attr('transform', 'translate(0, 20)');

在 1000 毫秒内，字符将平滑地垂直移动 20 像素，然后再恢复到其原始位置。

步骤 4：循环动画

最后，我们希望动画无限循环。我们可以使用 setInterval() 函数来实现此目的。

setInterval(() => {
  text.transition()
    .duration(1000)
    .ease(d3.easeBounce)
    .attr('transform', 'translate(0, 20)');
}, 2000);

此代码每 2000 毫秒就会重复动画。

完整代码

将所有步骤组合在一起，得到完整的代码：

const string = 'Hello, D3.js!';
const color = 'green';
const svg = d3.select('body').append('svg');
const text = svg.append('text').text(string);

text.transition()
  .duration(1000)
  .ease(d3.easeBounce)
  .attr('transform', 'translate(0, 20)');

setInterval(() => {
  text.transition()
    .duration(1000)
    .ease(d3.easeBounce)
    .attr('transform', 'translate(0, 20)');
}, 2000);