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

问题描述

如何使矢量路径动画化，就像它正在绘制一样，渐进式?换句话说，慢慢地逐个像素地显示路径.

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

我正在使用 Raphaël.js，但是如果你的答案不是特定于库的——比如可能有一些通用的编程模式来做那种事情(我我刚接触矢量动画)—不客气！

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"});

你会明白我的意思.路径肯定是从它的初始状态(点M114 26")到结束状态(曲线C 24 23 234 253 234 253"从点M114 26"开始)的动画，但不是以有问题的方式指定的，不像正在绘制中.

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.

我不明白 animateAlong 是如何做到这一点的.它可以沿路径为对象设置动画，但是如何在对象沿路径设置动画时使该路径逐渐显示自身?

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?

(通过 peteorpeter 的回答.)

似乎目前最好的方法是通过使用原始 SVG 的假"破折号.有关说明，请参阅此演示 或 本文档，第 4 页.

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.

我们必须使用 stroke-dasharray 和 stroke-dashoffset 并且知道要绘制的曲线长度.此代码在屏幕上不为圆、椭圆、折线、多边形或路径绘制任何内容:

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]"/>

如果动画元素中的stroke-dashoffset减少到0，我们得到曲线的渐进绘制.

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.

更新(2012 年 4 月 26 日):找到一个很好地说明该想法的示例，请参阅 动画贝塞尔曲线.

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

推荐答案

我为此创建了一个脚本:Scribble.js，基于这个伟大的dasharray/dashoffset 技术.

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

只需在一堆 SVG s 上实例化它:

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

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

--

注意:完整的USAGE代码在这里:https://gist.github.com/abernier/e082a201b0865de1a41f#file-index-html-L31

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

享受;)

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