相关疑难解决方法(0)

如何为矢量路径设置动画,就像它正在逐渐被绘制一样？换句话说,逐个像素地慢慢显示路径.

我正在使用Raphaël.js,但是如果你的答案不是特定于库的 - 也许有一些通用的编程模式来做这种事情(我对矢量动画很新) - 欢迎!

使用直线路径很容易,就像该页面上的示例一样简单::

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

但尝试改变该页面上的代码,比如说,这样::

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"开始),路径肯定是动画的,但不是以有问题的方式指定,不是像它正在被吸引.

我不知道怎么animateAlong能这样做.它可以沿着路径为对象设置动画,但是如何在对象沿着它进行动画处理时使这条路径逐渐显示出来？

解决方案？

(通过peteorpeter的回答.)

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

如何制作渐进式绘图？

我们必须使用stroke-dasharray并stroke-dashoffset知道要绘制的曲线长度.此代码在屏幕上不显示圆形,椭圆形,折线,多边形或路径:

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

Run Code Online (Sandbox Code Playgroud)

如果在animate元素stroke-dashoffset减少到0,我们将逐步绘制曲线.

<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> …

Run Code Online (Sandbox Code Playgroud)