SVG.js 3.x Timeline功能使用方法及入门示例请求

Hey Michael! 我完全懂你的困扰——SVG.js 3.x的Timeline确实是个好用的新功能，但官方文档没跟上确实头疼。我刚折腾完这个功能，给你写个超实用的入门示例，一步步带你搞定：

1. 先搭好基础环境 #

首先在HTML里引入SVG.js并创建一个SVG容器：

<div id="svg-container" style="width: 400px; height: 300px; border: 1px solid #eee;"></div>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0.0/dist/svg.min.js"></script>

然后初始化SVG实例：

// 创建SVG实例并挂载到容器
const svg = SVG('#svg-container').size(400, 300);

2. 第一个基础Timeline动画 #

Timeline的核心是编排多个动画的顺序和并行关系，我们先从单个元素的动画序列开始：

// 画一个红色矩形
const rect = svg.rect(100, 100).fill('#ff6347').move(50, 50);

// 创建Timeline实例
const timeline = SVG.Timeline();

// 给Timeline添加动画任务
timeline
  // 任务1：2秒内把矩形移动到右侧
  .add(rect.animate(2000).move(250, 50))
  // 任务2：任务1结束后，1秒内把矩形改成蓝色
  .add(rect.animate(1000).fill('#1e90ff'))
  // 任务3：和任务2重叠500ms开始，1.5秒内把矩形放大1.5倍
  .add(rect.animate(1500).scale(1.5), '-=500');

// 启动动画！
timeline.play();

关键知识点： #

• add(动画实例, 时间偏移)：第二个参数用来控制动画的启动时机
  • 留空：上一个动画结束后启动
  • '0'：和上一个动画同时启动
  • '-=500'：比上一个动画提前500ms启动（实现重叠）
  • '+=200'：比上一个动画延迟200ms启动

3. 常用Timeline控制方法 #

Timeline自带了很多实用的控制方法，给你加个按钮示例方便测试：

<div style="margin-top: 10px;">
  <button id="play-btn">播放</button>
  <button id="pause-btn">暂停</button>
  <button id="reverse-btn">反向播放</button>
  <button id="loop-btn">开启循环</button>
</div>

// 绑定按钮事件
document.getElementById('play-btn').addEventListener('click', () => timeline.play());
document.getElementById('pause-btn').addEventListener('click', () => timeline.pause());
document.getElementById('reverse-btn').addEventListener('click', () => timeline.reverse());
document.getElementById('loop-btn').addEventListener('click', () => timeline.loop(true));

其他常用方法：

• timeline.seek(1500)：直接跳转到动画的1500ms位置
• timeline.duration()：获取整个Timeline的总时长
• timeline.speed(2)：把动画速度调到2倍

4. 多元素的并行/序列编排 #

Timeline最强大的地方就是控制多个元素的动画协同，比如让矩形和圆形同时动起来：

// 新增一个绿色圆形
const circle = svg.circle(80).fill('#9acd32').move(50, 200);

// 重置Timeline并添加多元素动画
timeline.clear()
  // 矩形移动的同时，圆形开始360度旋转
  .add(rect.animate(2000).move(250, 50))
  .add(circle.animate(2000).rotate(360), '0')
  // 两者动画结束后，一起缩放（用数组传入多个并行动画）
  .add([
    rect.animate(1000).scale(0.8),
    circle.animate(1000).scale(1.2)
  ]);

timeline.play();

这个示例覆盖了Timeline的核心用法，你可以基于这个调整动画时长、添加更多元素或动画属性（比如透明度、旋转角度），慢慢摸索更复杂的编排~

内容的提问来源于stack exchange，提问作者michael