Es gibt viele Beispiele von SVG Pfadanimation, sowohl nativIst Pfadanimation möglich mit SVG.js
und mit Raphael.js
p.animate({path:"M140 100 L190 60"}, 2000, function() {
r.animate({path:"M190 60 L 210 90"}, 2000);
});
Wie ist das mit demmöglich??
Nein, dies ist mit svg.js noch nicht möglich. Ich habe darüber nachgedacht und es wird eine ziemlich große Implementierung sein. Wenn ich versuche, die Bibliothek klein zu halten, wird sie niemals Teil der Bibliothek selbst sein, aber ich könnte ein Plugin schreiben. Obwohl ich im Moment nicht viel Zeit habe, wird jede Hilfe geschätzt.
UPDATE:
Das mit SVG.js aus der Box nun möglich ist, wenn Sie verwenden paths with equal commands aber unterschiedliche Werte.
Aber wir haben auch eine path morphing plugin for SVG.js, die ist wahrscheinlich das, was Sie suchen.
Wir können Pfadanimation machen, indem Sie die Bounding Box Ihres Pfades finden und das tun.
wenn Ihr Weg einige Clipping -rectangle bedeutet wie, dass mit unter
<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();
das Rechteck auf dem Feld erstellen basiert und die Menge dieses Rechteck als Clip-Pfad im Weg.
Dann erhöhen Sie die Breite des Rechtecks Schritt für Schritt 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);
}
});
},
jquery.animate Schritt Funktion wird Schritt für die Breite des Clips-rect Schritt zu erhöhen.
Danke @Siva Rajini Ich werde in das tun, aber mit dem '.during' Aufruf für die Schritte, wie in meiner Antwort beschrieben. Ich bin nicht sicher, dass es in meinem Fall funktioniert, wie ich komplexe Pfade und 'Squiggles' animieren möchte –
Es ist eine schnelle und schmutzige Art und Weise eine Linie mit svg.js zu animieren: 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)})
})
Animieren komplexe SVG Pfade als Wout sagte ein Plugin benötigen. Leider weiß ich (noch) nicht genug über SVG, aber ich denke daran, ein Plugin zu schreiben, das die SMIL animation tag verwenden würde. Welches ist, was im ersten Link der Frage verwendet wird.
Das Problem mit SMIL ist, dass Sie eine Animation nicht auf halbem Weg stoppen können. Sie können, aber die Form springt dann einfach in den Ausgangszustand zurück. Es gibt keine Möglichkeit, die Pfaddaten bei beispielsweise 60% abzufangen. Das macht es ziemlich nutzlos, wenn Sie Benutzerinteraktion in den Mix werfen. Um dies zu implementieren, ist ein Pfadparser erforderlich. Ich würde wirklich gerne eines schreiben, aber die Zeit ist im Moment nicht in meinen Händen. – wout
Eine andere Option, auf die wir zurückgegriffen haben, besteht darin, textPath zu verwenden und dann ein Zeichen zu verwenden.
In unserem Fall verwenden wir die • Einheit, aber ich denke, wenn Sie Ihre eigene Typografie in .svg erstellen, .woff etc, können Sie flach Formen jeglicher Art haben.
So würden Sie Ihren Charakter, wie hier verwenden:
/* 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()
Sie Pfade animieren können die svg.path.js-Plugin.
Siehe die ersten Beispiele (mit der .drawAnimated Methode).
Dank Wout, ich werde versuchen, herauszufinden, wie dies zu tun ist. Haben Sie Vorschläge, wo Sie anfangen sollen? Wäre es beispielsweise akzeptabel, die SMIL-Tags wie im ersten Link der Frage zu verwenden? Ich plane, komplexe Pfade zu animieren, die mit svg.import.js importiert wurden. –