Animación SVG.js: método de línea de tiempo y controlador integrado

Facilitando

La facilidad de la animación se puede cambiar utilizando el método easy() del corredor.
Todos los tipos de facilidad disponibles incluyen:

• <>: entrar y salir con facilidad

• : Facilitarse

• <: facilidad en
• -: lineal
• Una función
• beziere(x1, y1, x2, y2) // curva de Bézier
• paso(pasos, posicióndelpaso)

Los métodos beziere() y step() crean una función de aceleración para usted, que luego puede pasarse a easy()

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'))

Para obtener una fórmula más sencilla, consulte el complemento svg.easing.js .

SVG.Línea de tiempo

SVG.Timeline trata el elemento ejecutor como un elemento de animación. Los corredores se pueden programar en la misma línea de temline para programar animaciones más grandes.

1）finalizar()

Este método completa toda la línea de tiempo. Todos los valores se establecen en sus valores finales correspondientes y se completa cada animación:

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

2）pausa()

Pausa la línea de tiempo:

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

3）jugar()

Para desvincular una línea de tiempo:

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

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

4）inversa()

Reproduzca una animación en una línea de tiempo invertida:

// 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）detener()

Detenga la línea de tiempo y vuelva a poner el tiempo en cero:

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

6）velocidad()

Cambia la velocidad de la línea de tiempo. Una velocidad negativa invertirá el eje del tiempo:

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

7) tiempo()

Establezca la hora actual de la línea de tiempo:

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

8) buscar()

Encuentra el tiempo por incremento:

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

9）persistir()

Establezca el método de procesamiento predeterminado del corredor después de la ejecución. Normalmente elimine los programas en ejecución para borrar la memoria:

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）fuente()

Para cambiar la fuente de tiempo de una línea de tiempo:

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

11) horario()

Programe corredores en la línea de tiempo:

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）desprogramar()

Para cancelar un plan/eliminar un corredor del cronograma:

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()

Controladores

En lugar de utilizar el método easy(), puedes utilizar el controlador para controlar la animación. SVG.js viene con dos controladores integrados. SVG.Spring y SVG.PID.

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

Como habrás notado, se especifica el controlador y no la duración, ya que solo el propio controlador sabe cuando se completa la animación.

Por eso no es posible programar o invertir animaciones con controladores.

Orquestar animaciones

Para crear animaciones más grandes con múltiples elementos, todos vinculados a la misma línea de tiempo, puedes usar SVG.timeline y 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

Vídeo explicativo

Vídeo explicativo