Ci sono molti esempi di SVG di animazione percorso, sia nativamenteè l'animazione percorso possibile con svg.js
e con Raphaël.js
p.animate({path:"M140 100 L190 60"}, 2000, function() {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
Com'è possibile con lo svg.js library?
No, questo non è ancora possibile con svg.js. L'ho esaminato e sarà un'implementazione piuttosto ampia. Mentre provo a mantenere la libreria piccola, non farà mai parte della libreria stessa, ma potrei scrivere un plugin. Anche se al momento non ho molto tempo sulle mie mani quindi sarà apprezzato tutto l'aiuto.
UPDATE:
Questo è ora possibile con svg.js fuori dalla scatola, se si utilizza paths with equal commands ma diversi valori.
Ma abbiamo anche un path morphing plugin for SVG.js che è probabilmente la cosa che stai cercando.
Possiamo creare un'animazione del percorso trovando il riquadro di delimitazione del percorso e il fare in questo modo.
se il percorso avendo qualche -rectangle clipping significa come quella qui sotto
<g id="container_svg_SeriesGroup_0" transform="translate(128.8,435)" clip-path="url(#container_svg_SeriesGroup_0_ClipRect)"><path id="container_svg_John_0" fill="none" stroke-dasharray="5,5" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.7 -112.12499999999999 M 21.7 -112.12499999999999 L 43.4 -51.75 M 43.4 -51.75 L 86.8 -25.875 M 86.8 -25.875 L 108.5 -155.25 "/><defs><clipPath id="container_svg_SeriesGroup_0_ClipRect"><rect id="container_svg_SeriesGroup_0_ClipRect" x="0" y="-155.25" width="118.5" height="148" fill="white" stroke-width="1" stroke="transparent" style="display: inline-block; width: 118.5px;"/></clipPath></defs></g>
var box = $("#"+ path.id")[0].getBBox();
creare il rettangolo sulla base della scatola e il set di questo rettangolo come il clip-percorso nel percorso.
quindi aumentare la larghezza del rettangolo passo dopo passo in jquery.animate.
doAnimation: function() {
//cliprect is your clipped rectangle path.
$(clipRect).animate(
{ width: 1000},
{
duration: 2000,
step: function (now, fx) {
$(clipRect).attr("width", now);
}
});
},
funzione a gradini jquery.animate viene utilizzato per aumentare la larghezza del passo clip-rect per passo.
Grazie a @Siva Rajini proverò a fare questo, ma usando la chiamata '.during' per i passaggi, come dettagliato nella mia risposta. Non sono sicuro che funzionerà nel mio caso perché voglio animare percorsi complessi e 'scarabocchi' –
C'è un modo rapido e sporco per animare una linea con svg.js: http://jsfiddle.net/c4FSF/1/
draw
.line(0, 0, 0, 0)
.stroke({color: '#000', width: 2})
.animate(1000, SVG.easing.bounce) // Using svg.easing.js plugin(not required)
.during(function(t, morph) {
this.attr({x2:morph(0, 100), y2: morph(0, 100)})
})
animazione di tracciati SVG complessi come Wout detto richiederà un plugin. Sfortunatamente non lo so (ancora) abbastanza su SVG, ma sto pensando di scrivere un plugin che userebbe lo SMIL animation tag. Quale è ciò che viene utilizzato nel primo link della domanda.
Il problema con SMIL è che non è possibile interrompere un'animazione a metà. Puoi, ma la forma tornerà al suo stato iniziale. Ad esempio, non è possibile prendere i dati del percorso, ad esempio il 60%. Ciò lo rende piuttosto inutile se si gettano le interazioni dell'utente nel mix. Quindi per implementare questo è necessario un parser di percorso. Mi piacerebbe davvero scriverne uno, ma il momento non è nelle mie mani al momento. – wout
Un'altra opzione, a cui abbiamo fatto ricorso, è utilizzare textPath e quindi utilizzare un carattere.
Nel nostro caso stiamo usando l'entità •, ma sto pensando se si crea la propria tipografia in SVG, .woff ecc, si può avere piatte forme di qualsiasi tipo.
Quindi si usa il tuo personaggio come qui:
/* create canvas */
var draw = SVG('canvas').size(400,400).viewbox(0, 0, 1000, 1000)
/* create text */
var text = draw.text(function(add) {
add.tspan('•').dy(27)
})
text.font({ size: 80, family: 'Verdana' })
/* add path to text */
text.path('M 100 400 C 200 300 300 200 400 300 C 500 400 600 500 700 400 C 800 300 900 300 900 300')
/* visualise track */
draw.use(text.track).attr({ fill: 'none'/*, 'stroke-width': 1, stroke: '#f09'*/ })
/* move text to the end of the path */
function up() {
text.textPath.animate(3000).attr('startOffset', '100%').after(down)
}
/* move text to the beginning of the path */
function down() {
text.textPath.animate(3000).attr('startOffset', '0%').after(up)
}
/* start animation */
up()
È possibile animare i percorsi che utilizzano il plugin svg.path.js.
Vedere i primi esempi (utilizzando il metodo .drawAnimated).
Grazie a Wout, cercherò di capire come farlo. Avete qualche suggerimento su dove iniziare? Ad esempio, sarebbe accettabile utilizzare i tag SMIL come nel primo collegamento della domanda? Ho intenzione di essere in grado di animare percorsi complessi importati con svg.import.js. –