Morphing entre formas SVG con JavaScript-Morpher

Vista prévia

Descripción

Sólo otro plugin de JavaScript para la animación de ruta SVG que se transforma una forma SVG a otra cuando se desencadena.

Install & Download:

# NPM
$ npm install morpherjs --save

Funcionamiento

Cree un nuevo objeto Morpher y especifique la ruta SVG que desea animar.

let myMorpher = new Morpher(document.getElementById('path-ID'), {



// the duration of the animation


duration: 500,



// the number of times an animation cycle should be played before stopping (-1 = infinite)


iterations: -1,



// whether the morpher should animate back to its initial state at the end of an iteration


alternate: true,



// the animation easing function


easing: (t) => { return t<.5 ? 2*t*t : -1+(4-2*t)*t; },



// the amount of decimals we should output in the interpolated SVG paths


decimals: 3

});

API methods.

// updates the duration
myMorpher.setDuration(500)

// updates the iterations
myMorpher.setIterations(-1)

// updates the morpher's alternation mode.
myMorpher.setAlternate(true)

// updates the easing function
myMorpher.setEasing(function)

// adds a new SVG path
myMorpher.addStep(string)

// adds an array of SVG paths
myMorpher.addSteps(array)

// starts the animation
myMorpher.play(timestamp = Date.now())

// pauses the animation
myMorpher.pause()

// stops the animation
myMorpher.stop()