Easing
The ease of the animation can be changed using the runner's ease() method.
All available ease types include:
- <>: ease in and out
-
: ease out
- <: ease in
- -: linear
- a function
- beziere(x1, y1, x2, y2) // Bezier curve
- step(steps, stepPosition)
The beziere() and step() methods create an easing function for you, which can then be passed to 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'))
For an easier formula, check out the svg.easing.js plugin.
SVG.Timeline
SVG.Timeline treats the runner element as an animation element. Runners can be scheduled on the same temline to program larger animations.
1）finish()
This method completes the entire timeline. All values are set to their corresponding end values, and each animation is completed:
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()
Pause the timeline:
rect.animate().move(200, 200)
rect.mouseover(function() {
this.timeline().pause() })
3）play()
To unlink a timeline:
rect.animate().move(200, 200)
rect.mouseover(function() {
this.timeline().pause() })
rect.mouseout(function() {
this.timeline().play() })
4）reverse()
Play an animation on a flipped timeline:
// 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()
Stop the timeline and set the time back to zero:
rect.animate().move(200, 200)
rect.timeline().stop()
6）speed()
Change the speed of the timeline. A negative velocity will reverse the time axis:
rect.animate().move(200, 200)
rect.timeline().speed(2)
7）time()
Set the current time of the timeline:
rect.animate().move(200, 200)
rect.timeline().time(100)
8）seek()
Find time by increment:
rect.animate().move(200, 200)
rect.timeline().seek(100)
9）persist()
Set the default processing method of the runner after execution. Normally delete running programs to clear memory:
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()
To change the time source of a timeline:
rect.animate().move(200, 200)
rect.timeline().source(fn)
11）schedule()
Schedule runners on the timeline:
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()
To cancel a plan/remove a runner from the schedule:
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
Instead of using the ease() method, you can use the controller to control the animation. SVG.js comes with two built-in controllers. SVG.Spring and SVG.PID.
element.animate(new SVG.Spring(settleTime)).move(200, 200)
element.animate(new SVG.PID(p, i, d)).move(200, 200)
As you may have noticed, the controller is specified and not the duration, since only the controller itself knows when the animation is complete.
That's why it's not possible to program or reverse animations with controllers.
Orchestrate Animations
To create larger animations with multiple elements, all bound to the same timeline, you can use both SVG.timeline and 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