Анимация пути Рафаэля

Можете ли вы объяснить, что объект сначала достигает одной точки на пути, затем поворачивает назад и затем достигает другой точки (например, он сначала проходит по пути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/ вот коды, которые я использовал) ?


animation jquery jscript raphael
person beginner js    schedule 21.07.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вот оно: объект движется вперед, затем возвращается, затем выбирает другое случайное направление и снова движется.

Скрипка

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--;
    }
};
person Regent    schedule 21.07.2014