利用svg.js制作动画比较简单，主要使用animate()函数，例如
rect.animate().attr({ fill: '#f03' })
这就是一个会改变颜色的动画，如果多个animate()串联在一起，那就是有多个步骤的动画
rect.animate().attr({ fill: '#f03' }).animate().dmove(50, 50)
animate函数接受一个函数，包括以下属性
duration代表动画持续时间, 默认是400ms
delay代表动画延迟多少时间开始执行, 默认是0
when代表要在什么时候执行动画，它的值是‘now’, 表示动画立即执行，多个动画步骤的话，表现形式就是一起同时触发，‘after’或者‘last’表示上一个动画执行完毕后再执行，这也是它的默认值，‘absolute’和‘start'表示所有动画都处于时间轴的0点处，‘relative’表示起点固定到旧的开始时间，表现形式上会始得delay失效。
swing和times配合使用，swing表示是否要往返执行，times则指执行次数,
wait表示每次执行的间隔时间是多少
此外，animate()函数会返回一个runner的对象，其中有多个属性
runner.element() // 返回或设置运行器绑定的元素
runner.timeline() // 返回或设置运行器将被/正在安排的时间线
runner.animate() // 用于动画链式操作。参见 element.animate()
runner.schedule(timeline, delay, when) // 在时间线上安排运行器。如果已经设置，可以跳过时间线
runner.unschedule() // 从时间线上移除运行器
runner.loop(times, swing, wait) // 使动画循环 `times` 次，每次循环之间间隔 `wait` 毫秒 runner.queue(runOnceFn, runOnEveryStepFn) // 让你能够链接函数，这些函数不一定是动画
runner.during(fn) // 让你能够将一个函数绑定到每个动画步骤
runner.after(fn) // 让你能够绑定一个在动画结束后执行的函数
runner.time() // 返回或设置运行器时间
runner.duration() // 返回运行器运行的持续时间
runner.loops() // 让你跳转到运行器的特定迭代次数，例如 3.5 表示第四次循环进行到一半 runner.persist() // 使这个运行器永远（true）或在特定时间内保持在时间线上。通常运行器在执行后会被删除以清理内存。
runner.position() // 返回或设置运行器的当前位置，忽略等待时间（介于 0 和 1 之间） runner.progress() // 返回或设置运行器的当前位置，包括等待时间（介于 0 和 1 之间） runner.step(dt) // 根据一定时间（手动逐步浏览动画）来逐步运行运行器
runner.reset() // 将运行器重置为零时间，并重置所有动画
runner.finish() // 将运行器步骤到完成状态
runner.reverse() // 反向执行运行器
runner.ease() // 改变动画的缓动效果 ，它的值有‘<>’ 淡入淡出，'<'淡入，‘>’淡出，‘-’线性，beziere(x1, y1, x2, y2) 贝塞尔曲线，step(steps, stepPosition) 有关步长的函数
runner.active() // 返回或设置运行器的活动状态。非活动运行器不会被执行
此外还可以创建一个时间线timeline，通过绑定动画的方式来控制，例如下面的例子
const runner = rect.animate().attr({ fill: '#f03' })
const ruuner2 = rect.animate().dmove(50, 50)
const tl = new Timeline()
tl.stop()
tl.schedule(runner)
tl.schedule(ruuner2)
rect.mouseover(function () {
tl.play()
})
在这个例子中动画被创建出来但不会立即执行，通过stop()函数让动画停止，在鼠标进入后才会执行
除此timeline还有time执行时间，speed执行速度，reverse反转等方法
更多详细信息可以查看svgjs.dev/docs/3.2/an…
