我如何在版本 svg.js 3.x 中使用时间线

Question

svg.js 版本 3.x 中似乎有一个新的时间轴功能。我想尝试这个功能，但我不明白api。据我所知，文档尚未更新。你能给我一个例子，告诉我如何开始使用时间表吗？

谢谢迈克尔

Answer 1

当您为每个元素设置动画或请求它时，会自动为每个元素创建一个新时间轴：

const animationRunner = el.animate(duration).move(100, 100) // cretates a timeline
const timeline = el.timeline() // also creates a timeline if not present

但是，您通常希望在同一时间轴上安排不同元素的动画。因此也可以先创建一个时间轴，然后在元素上设置：

const timeline = new SVG.Timeline() // create a timeline
el.timeline(timeline) // set the timeline for the element

当您为元素设置动画时，动画会自动安排在时间轴上。作为默认行为，它们被安排在时间轴上安排的最后一个动画之后运行。如果没有安排动画，那么它将立即运行：

el.animate(1000).move(100, 100) // moves now
  .animate(1000).move(200, 200) // moves after first animation

要更好地控制调度，您可以将其他参数传递给动画：

el.animate(duration, delay, when)

duration：动画持续时间。可以是数字或控制器，在这种情况下它不是持续时间并且整个动画由控制器控制
延迟：动画开始前的时间
何时：可以是 'now'、'relative'、'after' 或 'absolut'
- 现在：运行马上
- 相对：相对于动画开始前
- 之后：在最后一个动画完成 delay 毫秒后开始
- absolute: 将动画放置在时间轴的零delay毫秒

要控制时间线，您可以使用play()、pause()、stop()、finish()、seek()、speed()、reverse()等等。

如果你想玩这个，你也应该在时间轴上使用persist(true)。否则，完成的动画将被垃圾收集并自动从时间轴中取消安排。

正如在第一个代码示例中被破坏的那样，animate() returns animationRunner（简称 Runner）包含有关动画的所有信息。您可以使用 schedule 或 unschedule 直接在时间线上安排这些跑步者。但是，我认为这会打破这个答案的框架。

结尾的好例子：https://codepen.io/fuzzyma/pen/wQbVed
还有许多其他动画示例：https://codepen.io/collection/XpwMLO/#

我如何在版本 svg.js 3.x 中使用时间线

How can i use timelines in version svg.js 3.x

svg.js