SVG.js动画——timeline方法与内置控制器

Easing

可以使用runner的ease（）方法更改动画的缓和程度。
所有可用的ease类型包括：

• <>: ease in and out

• : ease out

• <: ease in
• -: linear
• a function
• beziere(x1, y1, x2, y2) // 贝塞尔曲线
• step(steps, stepPosition)

beziere（）和step（）方法为您创建了一个easing函数，然后可以将其传递给ease（）

var runner = new SVG.Runner({duration: 1000})

// use a string
runner.ease('<>')

// or pass a function
runner.ease(SVG.easing.beziere(x1, y1, x2, y2))
runner.ease(SVG.easing.step(5, 'jump-end'))

要了解更简单的公式，请查看svg.easing.js插件。

SVG.Timeline

SVG.Timeline把runner元素当做动画元素。runner可以在同一temline上安排，以编排更大的动画。

1）finish()

此方法完成整个时间线。所有值都被设置为其相应的结束值，并且每个动画都被完成：

rect.animate().move(200, 200).animate().dmove(50,50).size(300,400)
rect.timeline().finish() // rect at 250,250 with size 300,400

2）pause()

暂停时间线：

rect.animate().move(200, 200)
rect.mouseover(function() { this.timeline().pause() })

3）play()

取消时间线的连接：

rect.animate().move(200, 200)

rect.mouseover(function() { this.timeline().pause() })
rect.mouseout(function() { this.timeline().play() })

4）reverse()

在翻转的时间线上播放动画：

// will run from 100,100 to rects initial position
// 没有参数时表示初始位置
rect.animate(3000).move(100, 100)
rect.timeline().reverse()

// sets direction to backwards
// 动画倒退
rect.timeline().reverse(true)

// sets direction to forwards
// 动画前进
rect.timeline().reverse(false)

5）stop()

停止时间线并将时间设置回零：

rect.animate().move(200, 200)
rect.timeline().stop()

6）speed()

更改时间线的速度。负速度将反转时间轴：

rect.animate().move(200, 200)
rect.timeline().speed(2)

7）time()

设置时间线的当前时间：

rect.animate().move(200, 200)
rect.timeline().time(100)

8）seek()

按增量查找时间：

rect.animate().move(200, 200)
rect.timeline().seek(100)

9）persist()

设置runner在执行后的默认处理方式。通常删除运行程序以清除内存：

rect.animate().move(200, 200)

rect.timeline().persist(100) // persist runner for 100ms more than their end time
rect.timeline().persist(true) // never delete runners

10）source()

更改时间线的时间源：

rect.animate().move(200, 200)
rect.timeline().source(fn)

11）schedule()

在时间线上安排runner：

var timeline = new SVG.Timeline()
var runner = new SVG.Runner()
runner.move(100, 100)
timeline.schedule(runner, 100, 'now') // runner, delay, when - see animate()

12）unschedule()

取消计划/从时间表中删除runner：

var timeline = new SVG.Timeline()
var runner = new SVG.Runner()
runner.move(100, 100)
timeline.schedule(runner, 100, 'now')
timeline.unschedule(runner) // same as runner.unschedule()

Controllers

可以使用控制器来控制动画，而不是使用ease()方法。SVG.js带有两个内置控制器。SVG.Spring和SVG.PID。

element.animate(new SVG.Spring(settleTime)).move(200, 200)
element.animate(new SVG.PID(p, i, d)).move(200, 200)

正如您可能注意到的，指定的是控制器而不是持续时间，因为只有控制器本身知道动画何时完成。

这就是为什么不可能用控制器编排或反转动画的原因。

Orchestrate Animations

要创建包含多个元素的更大的动画，这些元素都绑定到同一时间线，您可以同时使用SVG.timeline和SVG.Runner：

var timeline = new SVG.Timeline()

var rect1 = draw.rect(100, 200)
var rect2 = draw.rect(200, 100)

rect1.timeline(timeline)
rect2.timeline(timeline)

rect1.animate(300, 0, 'absolute').move(300, 300) // start at time 0 of timeline
rect2.animate(400, 200, 'absolute').move(500, 500) // start at time 200 of timeline

视频讲解

视频讲解