paper.js анимация точки на графике

Я пытаюсь построить анимированный график с помощью paper.js, который может реагировать на разные входные данные. Итак, я хочу плавно анимировать одну точку по вертикали в другую точку.

Я просмотрел разные примеры, и наиболее близким к моему является этот:

paper.tool.onMouseDown = function(event) {
x = event.event.offsetX;
y = event.event.offsetY;
paper.view.attach('frame', moveSeg);
}

var x;
var y;
function moveSeg(event) {
    event.count = 1;
    if(event.count <= 100) {
        myPath.firstSegment.point._x += (x / 100);
        myPath.firstSegment.point._y += (y / 100);
        for (var i = 0; i < points - 1; i++) {
            var segment = myPath.segments[i];
            var nextSegment = segment.next;
            var vector = new paper.Point(segment.point.x - nextSegment.point.x,segment.point.y - nextSegment.point.y);
            vector.length = length;
            nextSegment.point = new paper.Point(segment.point.x - vector.x,segment.point.y - vector.y);
        }
    myPath.smooth();
   }
}

Этот код анимирует одну точку в позиции щелчка, но я не мог изменить ее в соответствии со своими потребностями.

Мне нужно:

var aim = [120, 100];

var target = aim;

// how many frames does it take to reach a target
var steps = 200;

// Segment I want to move
myPath.segments[3].point.x

И тогда я не знаю, как написать цикл, который будет производить плавную анимацию.

пример графика: введите здесь описание изображения


javascript animation jquery paperjs
person vinni    schedule 02.02.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я выработал ответ. Следующие шаги в paperscript:

  • Создать путь
  • Установить цель в точку
  • OnFrame Событие, выполняющее перемещение (упрощенное)

для дальнейшей анимации просто измените переменную currentAim.

var myPath = new Path({
segments: [[0,100],[50,100],[100,100]]});

// styling
myPath.strokeColor = '#c4c4c4'; // red
myPath.strokeWidth = 8;
myPath.strokeJoin = 'round';
myPath.smooth();

// where the middle dot should go
var currentAim = [100,100];

// Speed
var steps = 10;

//Animation

function onFrame(event) {

dX1 = (currentAim[0] - myPath.segments[1].point.x )/steps;
dY1 = (currentAim[1] - myPath.segments[1].point.y )/steps;
myPath.segments[1].point.x += dX1;
myPath.segments[1].point.y += dY1;
}
person vinni    schedule 02.02.2016