Animar elementos es muy similar a animar elementos con el método attr(). La única diferencia es que se debe incluir el método animate().
Animar()
rect.animate().move(150, 150)
El método animate() aceptará tres parámetros. El primero es la duración, el segundo es el retraso y el tercero es cuando:
rect.animate(2000, 1000, 'now').attr({
fill: '#f03' })
Alternativamente, puede pasar un objeto como primer argumento, que acepta más argumentos:
rect.animate({
duration: 2000,
delay: 1000,
when: 'now',
swing: true,
times: 5,
wait: 200
}).attr({
fill: '#f03' })
De forma predeterminada, la duración (duración) se establecerá en 400, el retraso (retraso) se establecerá en 0 y el tiempo (cuándo) se establecerá en después.
El parámetro when especifica el punto de inicio de la animación. Puede tener los siguientes valores:
- ahora: reproduce la animación inmediatamente después de esta llamada
- absoluto o inicio: programa la animación para que se ejecute en un tiempo absoluto en la línea de tiempo
- relativo: programa la animación para que se reproduzca en relación con su hora de inicio anterior (no es útil para animate()-call)
- último o después: reproduce la animación después de la última animación en la línea de tiempo. Si no, reproduce la animación inmediatamente (ver )
Se pueden encadenar varias animaciones llamando a animate nuevamente:
rect.animate().attr({
fill: '#f03' }).animate().dmove(50,50)
También es posible agregar retrasos entre animaciones:
rect.animate().attr({
fill: '#f03' }).delay(200).animate().dmove(50,50)
Por supuesto, esto también se puede hacer agregando un retraso a la segunda animación:
rect.animate().attr({
fill: '#f03' }).animate({
delay: 200}).dmove(50,50)
SVG.Corredor
El método animate() no devuelve el elemento de destino, sino una instancia del SVG. Runner tiene los mismos métodos que cualquier elemento y métodos adicionales para controlar al corredor:
let rect = draw.rect(100, 100)
let runner = rect.animate()
runner.element() // 返回或设置runner绑定到的元素
runner.timeline() // 返回或设置runner计划的时间线
runner.animate() // 用于动画链接。请参见element.animate（）
runner.schedule(timeline, delay, when) // 在timeline上安排runner。如果已设置timeline，则可以跳过
runner.unschedule() // 从timeline中删除runner
runner.loop(times, swing, wait) // 将动画循环“times”次，每次循环之间的时间为“wait”毫秒
runner.queue(runOnceFn, runOnEveryStepFn) // 允许您链接非必要动画的函数
runner.during(fn) // 用于将函数绑定到每个动画步骤
runner.after(fn) // 用于绑定动画完成后执行的函数
runner.time() // 返回或设置runner时间
runner.duration() // 返回runner运行的持续时间
runner.loops() // 让您跳转到runner的特定迭代，例如第4个循环中途的3.5
runner.persist() // 让这位runner永远（真）或在特定时间内坚持在时间线上。通常在执行后删除运行程序以清理内存。
runner.position() // 返回或设置runner的当前位置，忽略等待时间（介于0和1之间）
runner.progress() // 返回或设置runner的当前位置，包括等待时间（介于0和1之间）
runner.step(dt) // 按一定时间步进runner（用于手动步进槽动画）
runner.reset() // 将runner设置回零时间，并使用它设置所有动画
runner.finish() // 使runner逐步进入完成状态
runner.reverse() // 向后执行runner
runner.ease() // 更改动画的缓和程度
runner.active() // 返回或设置runner的活动状态。不执行非活动runner
Los corredores generalmente se crean llamando a animate. Sin embargo, es posible crear el corredor sin un elemento y luego configurar el elemento:
var runner = new SVG.Runner(1000)
runner.move(100, 100)
runner.element(someElement)
// Step animation by 20ms
runner.step(20)
// To animate, we need a timeline on which the runner is run
var timeline = new SVG.Timeline()
timeline.schedule(runner)