Animación de ruta SVG con JavaScript puro-Segment. js
| Autor: | lmgonzalves |
|---|---|
| Views Total: | 4,805 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 3, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Segment. js es una biblioteca de JavaScript ligera que se utiliza para dibujar y animar el trazo en cada < ruta de acceso > dentro del elemento < SVG > seleccionado.
¿Cómo funciona?
Descargue e inserte el segmento. js en el documento.
<script src="dist/segment.min.js"></script>
Inicializar una nueva instancia en el elemento que desea animar.
var myPath = document.getElementById("my-path"),
segment = new Segment(myPath);
segment.draw("25%", "75% - 10", 1); Parámetros:
- Begin: 0 – longitud de trayecto para iniciar el dibujo.
- final: 100% – longitud de trazado para finalizar el dibujo.
- Duración: 0 – duración (en segundos) de la animación.
- Options: null – opciones para la animación en la notación de objetos.
draw(begin, end, duration, options)
Todas las opciones:
- retardo : 0 – tiempo de espera (en segundos) para iniciar el dibujo.
- Easing: lineal – función de aceleración (normalizada).
- circular: false – si es true, cuando el trazo alcanza el final de la ruta, se reanudará al principio. Lo mismo se aplica en la dirección opuesta.
- callback: null – FUNCTION para llamar cuando se realiza la animación.
Registro de cambios
v1.1.3 (08/03/2018)
- Más opciones y funciones.
