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)

持续时间：动画的持续时间。可以是数字，也可以是控制器，在这种情况下，它不是持续时间，整个动画都由控制器控制
延迟：动画开始之前的时间
何时：可以是“现在”，“相对”，“之后”或“绝对”
- 现在：马上运行
- 相对：相对动画之前的delay毫秒之前开始
- 之后：在最后一个动画完成后delay毫秒开始
- 绝对：将动画放置在时间轴零处的delay毫秒上

要控制时间轴，可以使用play()，pause()，stop()，finish()，seek()，speed()，{{1 }}等。

如果要尝试使用此方法，还应该在时间轴上使用reverse()。否则，完成的动画将被垃圾收集，并自动从时间轴中取消计划。

如第一个代码示例中所述，persist(true)返回一个animationRunner（简短的animate()），其中包含有关动画的所有信息。您可以使用Runner或schedule在时间轴上直接安排这些跑步者。但是，我认为这将打破此答案的框架。

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

如何在svg.js 3.x版中使用时间表

1 个答案: