Ist die Pfad-animation möglich SVG.js

Gibt es viele Beispiele von SVG-path-animation, sowohl nativ

http://jsfiddle.net/FVqDq/

und mit Raphael.js

http://jsfiddle.net/d7d3Z/1/

p.animate({path:"M140 100 L190 60"}, 2000, function() {
    r.animate({path:"M190 60 L 210 90"}, 2000);
});

Wie ist das möglich, mit der svg.js Bibliothek?

InformationsquelleAutor Stan Bondi | 2013-05-09
  1. 4

    Nein, dies ist noch nicht möglich mit svg.js. Ich habe auf der Suche in, und es wird eine ziemlich große Umsetzung. Als ich versuche immer, die Bibliothek zu klein, es wird nie Teil von der Bibliothek selbst, aber ich könnte ein plugin schreiben. Obwohl ich im moment nicht viel Zeit auf meinen Händen, so dass Sie alle Hilfe wird geschätzt.

    UPDATE:

    Dies ist jetzt möglich mit SVG.js out of the box, wenn Sie Pfade mit gleichen Befehle aber unterschiedliche Werte haben.

    Aber wir haben auch eine Pfad morphing-plugin für SVG.js das ist wahrscheinlich das, was Sie suchen.

    • Dank Wout, ich werde versuchen, herauszufinden, wie dies zu tun. Haben Sie Anregungen darüber, wo zu beginnen? Zum Beispiel, wäre es akzeptabel, verwenden Sie die SMIL - <animation> - tags wie im ersten link von der Frage? Ich Plane, in der Lage sein zu animieren, komplexe Pfade importiert svg.import.js.
    InformationsquelleAutor wout
  2. 3

    Es gibt eine schnelle und schmutzige Art und Weise zu animieren, eine Zeile, die mit 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)})
    })

    Animieren von komplexen SVG-Pfade als wout sagte, wird ein plugin benötigen.
    Leider habe ich (noch) nicht genug wissen über SVG, aber ich denke das schreiben eines plugins, das die SMIL animation-tag. Das ist das, was im ersten link die Frage stellen.

    • Das problem mit SMIL ist, dass Sie nicht aufhören können, eine animation auf halbem Weg. Sie können, aber die Form wird dann springen Sie einfach zurück zu seiner ursprünglichen Zustand. Es gibt keinen Weg, fangen Sie den Weg von Daten auf sagen wir 60% zum Beispiel. Das macht es ziemlich nutzlos, wenn Sie werfen, die die Benutzerinteraktion in den mix. Um die Umsetzung dieser eine Pfad-parser erforderlich ist. Ich würde wirklich gerne schreiben, aber die Zeit ist nicht auf meiner Hand im moment.
    InformationsquelleAutor Stan Bondi
  3. 1

    Können wir machen, Pfad-animation durch das finden der bounding-box von Ihrem Pfad, und die dies so tun.

    wenn der Pfad mit einigen clipping -Rechteck bedeutet wie, dass unten 

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

    erstellen Sie das Rechteck auf der Basis der box und legen Sie das Rechteck, wenn der clip-Pfad im Pfad.

    dann erhöhen Sie die Breite des Rechtecks Schritt für Schritt in jquery.animieren.

    doAnimation: function () {

//cliprect is your clipped rectangle path.

        $(clipRect).animate(
                                 { width: 1000},
                                 {
                                     duration: 2000,

                                     step: function (now, fx) {
                                         $(clipRect).attr("width", now);
                                     }
                                 });


    },

    jquery.animieren Sie die step-Funktion wird verwendet, um zu erhöhen die Breite der clip-rect-Schritt für Schritt.

    • Danke @Siva Rajini ich werde sehen, was sich tut dies, aber mit der .during rufen Sie für die Schritte, wie unten in meiner Antwort. Ich bin mir nicht sicher, es funktioniert in meinem Fall möchte ich animieren, komplexe Pfade und 'Schnörkel'
    InformationsquelleAutor SivaRajini
  4. 1

    Animieren Sie die Pfade über die svg.path.js plugin.

    Siehe die ersten Beispiele (mit der .drawAnimated - Methode).

    InformationsquelleAutor Rui Vieira
  5. 0

    Eine weitere Möglichkeit, die wir haben, auf die zurückgegriffen wird, ist die Verwendung textPath und verwenden Sie dann ein Zeichen.

    In unserem Fall verwenden wir das • Wesen, aber ich denke, wenn Sie erstellen Sie Ihre eigene Typografie in .svg, .woff etc. haben, können Sie Wohnung Formen jeglicher Art.

    So würden Sie Ihren Charakter als hier:

    http://jsfiddle.net/wbx8J/3/

       /* 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()
    InformationsquelleAutor lmerino
Schreibe einen Kommentar