Question

如何从一条路径到另一条路径制作动画，但路径仍然连接。

这是我的源代码。如果在path1上仍然有效，但在path2上没有从第一点开始。

        var obj;
        var path1
        var path2;


        var canvas = Raphael("canvas", 620, 420);
        window.onload = function() {

            obj = canvas.circle(100, 200, 10);                

            path1 = canvas.path("M100 200L200 200");
            path2 = canvas.path("M200 200L400 100");

            window.setInterval("method_animasi()", 10); 
        };

        var counter = 0;
        var position;
        function method_animasi(){

            position = path1.getPointAtLength(counter);   

            if(position.x == 200 && position.y == 200){
                position = path2.getPointAtLength(counter);
            }
            obj.attr({cx: position.x, cy: position.y});    

            counter++;
        };

您可以在http://jsfiddle.net/jhohannespurba/cE26g/

上看到

谢谢

Answer 1

通过使用单个复杂路径而不是两个单命令路径，您可以非常轻松地实现这一目标。例如，将path1定义为

path1 = canvas.path( [  "M", 100, 200,
                        "L", 200, 200,
                        "R", 220, 180, 220, 160, 250, 150,
                        "L", 400, 100,
                        "A", 120, 120, 150, 0, 1, 450, 180,
                        "L", 350, 240,
                        "R", 320, 280, 240, 220,
                        "L", 100, 280,
                        "R", 50, 240, 100, 200 ]);

注意命令如何从一个引导到下一个。 “R”是Catmull-Rom样条曲线的符号，它简化了方向的曲线变化，“A”是弧命令。如果需要，您可以查看SVG specs路径 - 您可以执行许多其他操作。还值得注意的是，您可以使用数组编译路径（这是一个Raphael实用程序），如果您在路径中使用变量，这将非常有用。

接下来，只需调整动画循环即可使用单一路径。

function method_animasi() 
{
    position = path1.getPointAtLength(counter);

    obj.attr( {cx: position.x, cy: position.y } );

    counter++;
    if ( counter >= path1.getTotalLength() )
    {
        counter = 0;  // This will take us back to the beginning and start the whole animation all over again, yay!
    }
};

那就是那个！这是更新的小提琴：http://jsfiddle.net/kevindivdbyzero/bAsCT/

Raphael js，在多个连接路径上制作动画

1 个答案: