拉斐尔路径动画答案

【问题标题】：Raphael Path Animation拉斐尔路径动画
【发布时间】：2014-07-21 21:31:39
【问题描述】：

你能解释一下那个物体首先到达路径中的一个点，然后返回然后到达另一个点（例如，它先经过路径2，然后返回，然后再经过路径3。） Javascript：

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 a200L200 200");
    //option 1 way 1
    path2 = canvas.path("M200 200L400 100");
    //option 2 way 2
    path3 = canvas.path("M200 200L200 100");
    //option 3 way 3
    path3 = canvas.path("M200 200L300 300");

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

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

    position = path1.getPointAtLength(counter);   

    if ( counter >= path1.getTotalLength() )
    {
        //program make random next way
           position = path2.getPointAtLength(counter);
    }
    obj.attr({cx: position.x, cy: position.y});    

    counter++;
};

jsFiddle：http://jsfiddle.net/cE26g/6/ 这是我使用的代码）？

【问题讨论】：

标签： jquery animation raphael jscript

【解决方案1】：

这里是：物体前进，然后后退，然后选择另一个随机方向并再次前进。

Fiddle

var obj;
var paths;
var interval;
var canvas = Raphael("canvas", 620, 420);
window.onload = function()
{ 
    obj = canvas.circle(100, 200, 10);                

    paths = [
        canvas.path("M200 200L100 200"),
        canvas.path("M200 200L400 100"),
        canvas.path("M200 200L200 100"),
        canvas.path("M200 200L300 300")];

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

var counter = 0;
var position;
var currentPath = 0;
var dirForward = true;

function method_animasi()
{
    if (counter >= paths[currentPath].getTotalLength() && dirForward)
    {
        dirForward = false;
    }
    else if (counter == 0 && !dirForward)
    {
        var newPath = currentPath;
        while (newPath == currentPath)
        {
            newPath = Math.floor(Math.random() * paths.length);
        }
        currentPath = newPath;
        dirForward = true;
    }
    else
    {
        position = paths[currentPath].getPointAtLength(counter);
        obj.attr({cx: position.x, cy: position.y});
    }
    if (dirForward)
    {
        counter++;
    }
    else
    {
        counter--;
    }
};

【讨论】：