Animação SVG.js - método de linha do tempo e controlador integrado

Facilitando

A facilidade da animação pode ser alterada usando o método easy() do executor.
Todos os tipos de facilidade disponíveis incluem:

• <>: facilidade de entrada e saída

• : aliviar

• <: facilidade em
• -: linear
• uma função
• beziere(x1, y1, x2, y2) // Curva de Bézier
• step(etapas, stepPosition)

Os métodos beziere() e step() criam uma função de atenuação para você, que pode então ser passada para 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 uma fórmula mais fácil, verifique o plugin svg.easing.js .

SVG.Linha do tempo

SVG.Timeline trata o elemento runner como um elemento de animação. Os corredores podem ser agendados no mesmo modelo para programar animações maiores.

1）concluir()

Este método completa toda a linha do tempo. Todos os valores são definidos com seus valores finais correspondentes e cada animação é concluída:

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

Pause a linha do tempo:

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

3）jogar()

Para desvincular uma linha do tempo:

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

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

4）reverso()

Reproduza uma animação em uma linha do tempo 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）parar()

Pare a linha do tempo e defina o tempo de volta para zero:

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

6）velocidade()

Altere a velocidade da linha do tempo. Uma velocidade negativa inverterá o eixo do tempo:

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

7）tempo()

Defina a hora atual da linha do tempo:

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

8）procurar()

Encontre o tempo por incremento:

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

9）persistir()

Defina o método de processamento padrão do executor após a execução. Normalmente exclua programas em execução para limpar a memória:

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

Para alterar a origem do tempo de uma linha do tempo:

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

11）agendar()

Agende corredores na linha do tempo:

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 um plano/remover um corredor da programação:

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

Em vez de usar o método easy(), você pode usar o controlador para controlar a animação. SVG.js vem com dois controladores integrados. SVG.Spring e SVG.PID.

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

Como você deve ter notado, o controlador é especificado e não a duração, pois somente o próprio controlador sabe quando a animação está completa.

É por isso que não é possível programar ou reverter animações com controladores.

Orquestrar animações

Para criar animações maiores com vários elementos, todos vinculados à mesma linha do tempo, você pode usar SVG.timeline e 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

Explicação em vídeo

Explicação em vídeo