Рафаэль, анимация очков

Question

У меня есть функция, которая отображает линии (координаты х и у) на основе информации о времени. Координаты x и y определяют положение нарисованных точек, тогда как время представляет метки времени (в миллисекундах) соответствующих точек.

В настоящее время есть функция, которая отображает строку, как показано ниже

    <script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
    <script type="text/javascript">
        function drawLine(points) {
            var paths = ['M ' + points[0].x + ' ' + points[0].y];
            for (var i = 1; i < points.length; i++) {
                var p = points[i];
                paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y);
            }
            var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
            var line = paper.path(paths[0]);
            var next = 1;

            function animate() {
                if (paths[next]) {  
                    duration = points[next].t - points[next - 1].t        
                    line.animate({ path: paths[next] }, duration, 'linear', animate);
                    next++;
                }
            }
            animate();
        }
    </script>

А функцию можно вызывать с использованием ассоциативных массивов следующим образом:

    drawLine([
                { x: 0, y: 0, t: 0 },
                { x: 100, y: 230, t: 1520 },
                { x: 210, y: 290, t: 3850 },
                { x: 150, y: 200, t: 5060 },
            ]);

Вопрос в том, как я могу изменить эту функцию для отображения точек, а не линий?

Answer 1

Вы можете добавить метод drawPoint, который будет принимать объект с x а также y свойства

function drawPoint(point) {
    paper.circle(point.x, point.y, 5).attr('fill', 'red');
};

Тогда позвони из своего animate функция до points[next] сравнение

drawPoint(points[next - 1]);

Вот JSFiddle http://jsfiddle.net/jaimem/2krgN/

Если вы не хотите линий, то вам не нужны пути

function drawPoints(points){
    var paper = new Raphael('canvas_container', 500, 500),
        idx  = 0;

    function animate(){
        if(points[idx]){
            var currP = points[idx],
                prevP = points[idx - 1],
                d     = currP.t - (prevP ? prevP.t : 0 );
            paper.circle(currP.x, currP.y, 1)
                 .attr('fill', 'red')
                 .animate({r:5}, d, animate);
            idx++       
        }
    }
    animate();
}

Рекурсивный animate обратный вызов может быть немного сложным для понимания / чтения, поэтому может просто захотеть использовать setTimeout, Также вы можете передать строку с id элемента к Raphael Конструктор и библиотека найдут для вас DOM-узел.

JS Fiddle: http://jsfiddle.net/jaimem/Q5G5y/2/