是路徑動畫可能與SVG.js

有SVG路徑動畫的例子很多，無論是本地是路徑動畫可能與SVG.js

與Raphael.js

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

這怎麼可能與svg.js library？

來源

2013-05-09 Stan Bondi

不，這還不可能與svg.js。我一直在研究它，這將是一個相當大的實現。當我試圖讓圖書館變小時，它永遠不會成爲圖書館本身的一部分，但我可能會編寫一個插件。雖然目前我沒有太多時間在我的手上，所以所有的幫助將不勝感激。

UPDATE：

現在這是可能的SVG.js開箱即用的，如果你使用paths with equal commands但不同的值。

但我們也有一個path morphing plugin for SVG.js這可能是你正在尋找的東西。

來源

2013-05-09 12:20:12 wout

謝謝Wout，我會試着弄清楚如何做到這一點。你對從哪裏開始有任何建議嗎？例如，在問題的第一個鏈接中使用SMIL 標籤是否可以接受？我計劃能夠使用svg.import.js導入複雜路徑的動畫。 – 2013-05-10 14:05:13

我們可以通過找到你的路徑的邊界框和做這樣的路徑動畫。

如果有一些剪輯-rectangle你的路徑是指像下面

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

創建基於框，並設定該矩形作爲路徑您的剪輯路徑的矩形。

然後在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 step函數用於逐步增加剪輯寬度。

來源

2013-05-10 11:49:59 SivaRajini

謝謝@Siva Rajini我會研究這樣做，但使用'.during'調用步驟，詳見我的答案。我不確定它會在我的情況下工作，因爲我想動畫複雜的路徑和「扭曲」 – 2013-05-10 14:07:23

有動畫一個符合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)}) 
    })

複雜的動畫SVG路徑，WOUT說，將需要的插件。不幸的是，我還沒有對SVG有足夠的瞭解，但是我正在考慮編寫一個使用SMIL animation tag的插件。問題的第一個鏈接中使用了哪些內容。

來源

2013-05-10 13:59:51

SMIL的問題是，您無法半途停止動畫。你可以，但形狀將會跳回到初始狀態。例如，假設有60％的路徑數據沒有辦法。如果你在混合中引入用戶交互，這使得它非常無用。所以爲了實現這個，路徑分析器是必需的。我真的很想寫一篇，但時間不在我手上。 – wout 2013-05-30 18:34:54

另一種選擇是我們使用textPath，然後使用一個字符。

在我們的例子中，我們使用•實體，但如果你創建.SVG自己的排版我在想，.woff等，你可以有平形狀的任何一種。

所以，你會用你的性格，在這裏：

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

來源

2014-04-01 15:41:47 lmerino

您可以用動畫的svg.path.js插件路徑。

查看第一個示例（使用.drawAnimated方法）。

來源

2014-11-07 22:51:30

是路徑動畫可能與SVG.js

回答

相關問題