如何在svg.js 3.x版中使用时间表 [英] How can i use timelines in version svg.js 3.x

问题描述

svg.js版本3.x中似乎有一个新的时间轴功能.我想尝试此功能，但我不了解api.据我所知，该文档尚未更新.您能给我一个例子，向我展示如何开始时间表吗?

There seems to be a new timeline-feature in svg.js Version 3.x. I'd like to try this feature but I don't understand the api. As far as I see, the documentation has not been updated yet. Could you please give me an example that shows me how to get started with timelines?

谢谢 迈克尔

推荐答案

为每个元素设置动画或请求时，会自动为每个元素创建一个新的时间轴:

A new timeline is created for every element automatically when you animate it or request it:

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

但是，通常您希望在同一时间线上安排不同元素的动画.因此，您还可以先创建一个时间轴，然后在元素上进行设置:

However, often you want to schedule animation of different elements on the same timeline. Therefore you can also create a timeline first and then set it on the element:

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

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

Animations are scheduled on the timeline automatically when you animate an element. As a default behavior, they are scheduled to run after the last animation which was scheduled on the timeline. If no animation was scheduled, then it will run right away:

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

要对计划进行更多控制，您可以传递其他参数来设置动画:

To have more control over the scheduling you can pass additional parameters to animate:

el.animate(duration, delay, when)

• 持续时间:动画的持续时间.可以是数字，也可以是控制器，在这种情况下，它不是持续时间，整个动画由控制器控制
• 延迟:动画开始之前的时间

• 何时:可以是现在"，相对"，之后"或绝对"

  • duration: duration of the animation. Can be a number or a controller in which case it is not a duration and the whole animation is controlled by the controller
  • delay: time before the animaton starts

  • when: can be 'now', 'relative', 'after' or 'absolut'

    • 现在:立即运行
    • 相对:相对于动画开始之前delay ms之后开始
    • 之后:在最后一个动画结束后开始delay ms
    • 绝对:将动画置于时间轴零处的delay ms
    • now: run right away
    • relative: start after delay ms relative to the start of the animation before
    • after: start delay ms after the last animation was finished
    • absolute: place the animation delay ms of the zero of the timeline

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

    To conrol the timeline, you can use play(), pause(), stop(), finish(), seek(), speed(), reverse() and so on.

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

    If you want to play around with this, you shall also use persist(true) on the timeline. Otherwise animations which are finished are garbage collected and unscheduled from the timeline automatically.

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

    As spoiled in the first code example, animate() returns an animationRunner (short Runner) which holds all infos about the animation. You can schedule those Runners directly on the timeline by using schedule or unschedule. However, I think this will burst the frame of this answer.

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

    A good example for the end: https://codepen.io/fuzzyma/pen/wQbVed
    And many other examples with animations: https://codepen.io/collection/XpwMLO/#

    这篇关于如何在svg.js 3.x版中使用时间表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！