如何逐步绘制矢量路径？ （Raphael.js） [英] How to draw a vector path progressively? (Raphael.js)

问题描述

如何像它的被吸引，逐渐吗换句话说动画矢量路径，慢慢展现逐像素的路径像素。

我用Raphaël.js，，但的，如果你的答案是不特定的库类也许有做一些一般的编程模式之类的话（我是相当新的矢量动画） - 它的欢迎！

---

这很容易做直线路径，容易作为一个例子在该页面 ::

 路径（M114 253），动画（{路径：M114 253大号234 253}）;
 

但尝试改变code在该网页上，也就是说，这种方式：

 路径（M114 26），动画（{路径：M114 26℃24 23 234 253 234 253}）;
 

你会明白我的意思。路径肯定是从它的初始状态（点M114 26），动画结束状态（曲线C 24 23 234 253 234 253出发点上M114 26），而不是在有关规定的方式，而不是像它被绘制。

我看不出 animateAlong 可以做到这一点。它可以沿着路径动画的对象，但我怎样才能使这条道路，逐步显示自己，而对象被沿线动画？

---

解决方案？

（通过<一个href=\"http://stackoverflow.com/questions/4631019/how-to-draw-a-vector-path-progressively-raphael-js/5073832#5073832\">peteorpeter's回答。）

好像目前做到这一点的最好办法是通过'假'使用破折号原SVG。对于解释见这个演示或的这个文件，第4页。

  

如何产生渐进式绘图？

  
  

我们必须使用中风dasharray 和中风dashoffset ，知道曲线的长度来绘制。
  这code没有绘制在屏幕上圆，椭圆，折线，polygone或路径：

 ＆LT;元素]风格=行程dasharray：[curve_length]，[curve_length];中风dashoffset：[curve_length]/＆GT;
 

如果在animate元素行程dashoffset下降到0，我们得到曲线渐进图。

 ＆LT;圈CX =200CY =200R =115
    风格=填写：无;行程：蓝色;脑卒中dasharray：723723;脑卒中dashoffset：723＆GT;
    ＆LT;动画开始=0的attributeName =中风dashoffset
        从=723为=0DUR =5S补=冻结/＆GT;
＆LT; /圈＆GT;
 

如果你知道一个更好的办法，请留下一个答案。

---

更新（2012年4月26日）：发现，说明这个想法很好的例子，请参见动画贝塞尔曲线的。

解决方案

我创建了一个脚本这样的：的 Scribble.js ，在此基础上极大 dasharray / dashoffset 技术。

只需将它实例进行收购一堆SVG的＆LT;路径＆GT; 取值：

  VAR涂鸦=新的涂鸦（路径，时间{3000}）;
scribble.erase（）;
scribble.draw（函数（）{
    //完成
}）;
 

-

NB：全用法 code此处的 https://gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

享受;）

How to animate a vector path like it's being drawn, progressively? In other words, slowly show the path pixel by pixel.

I'm using Raphaël.js, but if your answer is not library specific—like maybe there's some general programming pattern for doing that kind of thing (I'm fairly new to vector animation)—it's welcome!

---

It's easy to do with straight paths, as easy as an example on that page::

path("M114 253").animate({path: "M114 253 L 234 253"});

But try to change code on that page, say, this way::

path("M114 26").animate({path: "M114 26 C 24 23 234 253 234 253"});

And you'll see what I mean. Path is certainly animated from it initial state (point "M114 26") to the end state (curve "C 24 23 234 253 234 253" starting on point "M114 26"), but not in a way specified in question, not like it's being drawn.

I don't see how animateAlong can do that. It can animate an object along a path, but how can I make this path to gradually show itself while object is being animated along it?

---

The solution?

(Via peteorpeter's answer.)

Seems like currently the best way to do it is via 'fake' dashes using raw SVG. For the explanation see this demo or this document, page 4.

How produce progressive drawing?

We have to use stroke-dasharray and stroke-dashoffset and know length of curve to draw. This code draw nothing on screen for circle, ellipse, polyline, polygone or path:

<[element] style="stroke-dasharray:[curve_length],[curve_length]; stroke-dashoffset:[curve_length]"/>

If in animate element stroke-dashoffset decrease to 0, we get progressive drawing of curve.

<circle cx="200" cy="200" r="115"
    style="fill:none; stroke:blue; stroke-dasharray:723,723; stroke-dashoffset:723">
    <animate begin="0" attributeName="stroke-dashoffset"
        from="723" to="0" dur="5s" fill="freeze"/>
</circle>

If you know a better way, please leave an answer.

---

Update (26 Apr. 2012): Found an example that illustrates the idea well, see Animated Bézier Curves.

解决方案

I've created a script for this: Scribble.js, based on this great dasharray/dashoffset technique.

Just instantiate it overs a bunch of SVG <path>s:

var scribble = new Scribble(paths, {duration: 3000});
scribble.erase();
scribble.draw(function () {
    // done
});

--

NB: Full USAGE code here: https://gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

Enjoy ;)

这篇关于如何逐步绘制矢量路径？ （Raphael.js）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！