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