如何在拉斐尔JS中为曲线设置动画

how to animate a curve in raphael js

本文关键字：曲线 设置 动画 JS      更新时间：2023-09-26

>我画了一个线圈状的结构 

var pathCommand = "M 10 50 l 10 0 ";
for (var i = 0; i < 10; i++) {
 pathCommand += "c  15   0  25 -20  15 -20 " + "c -10   0   0  20  15  20 ";
}
var pc = paper.path(pathCommand);`enter code here`
            pc.attr({
                stroke: '#000',
                'stroke-width': 3
            });

但我想用动画来展示这一点，就好像它是逐像素绘制的一样。我试过这个

var pc = paper.path("M 10 50");
for (var i = 0; i < 10; i++) {
pathCommand += "c  15   0  25 -20  15 -20 " + "c -10   0   0  20  15  20 ";
pc.animate({path: pathCommand, stroke: '#000','stroke-width': 3},2000);
}

这并没有给我我真正想要的东西。谁能告诉我我应该怎么做才能显示，因为这正在用拉斐尔 js 进行绘制？？感谢您的任何帮助

var s = [ { stroke: "M 150 150", time: 0},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600},
            { stroke: "c  15   0  25 -20  15 -20", time: 800},
            { stroke: "c -10   0   0  20  15  20", time: 600} ];
var drawnPath = s[0].stroke;
var myPath = paper.path(drawnPath).attr({"stroke-width": 3,"stroke": "#000"});
var temp = 1;
animateMyPath();
function animateMyPath() {
if (temp < s.length) {
    drawnPath += s[temp].stroke;
    myPath.animate({path: drawnPath}, s[temp].time, animateMyPath);
    temp++;
    }
}

请告诉我这是正确的方法，因为我是这个javascript编程的新手。

相关文章：