Как анимировать чертеж линии или дуги в PaperJS на основе продолжительности?

Question

У меня есть три вопроса:

• Я создал animation, чтобы нарисовать прямую линию. Это работает, но я уверен, что это не лучший способ сделать это. Кто-то может предложить некоторое улучшение для моего кода?

Псевдо код:

onFrame = function() { 

    -Calculate % of the line that have been drawn 
    -Find Point between two Points 
    -Draw line until this new point 
} 

Here is my code on JSFiddle

• Моя техника работала на прямой, но как я могу сделать, если я хочу, чтобы нарисовать Arc основанный на продолжительности?

• Что делать, если я хочу добавить эффект ослабления к чертежу?

Answer 1

Вы можете использовать getLocationAt:

for(var i = 0; i < 100; i++) { 
    var point = path.getLocationAt(i); 
    newPath.add(point); 
} 

(Это просто грубый набросок, чтобы объяснить мою идею).

Answer 2

• Вместо добавления сегментов в пути, я считаю, что проще создать путь из двух сегментов и перемещения последнего сегмента для каждого кадра. Если вы создадите новый с разницей вашего конца и стартом Points, вы можете легко рассчитать позицию за кадр на основе вашего времени.

• Что касается дуги, проще создать новый кадр. Здесь хорошо работает формат Path.Arc(from, through, to). Просто поверните клоны вашего старта point о вашем центре point от percent_completed/2 * numberOfDegrees и percent_completed * numberOfDegrees для получения значений и to на каждый кадр. Если вы хотите создать полный круг, убедитесь, что numberOfDegrees немного больше 360. В противном случае Arc() может не найти подходящее решение .

• Ваше время на основе процент метод работает хорошо, но вы должны учитывать когда percent_completed заканчивается слишком далеко до 1

• Если вы хотите сделать ослабление, изменение percent_completed с помощью соответствующей функции. Найдите вокруг «сигмовидное ослабление». Для Например:

  percent_completed = Math.pow(percent_completed, .5);

  Это может быть столь же сложна, как вы хотите, чтобы сделать это.

• Чтобы проверить булев каждый кадр, подключите обработчик onFrame к настройке и удалите обработчик по завершении. См. this question для более подробной информации.

• Если вы используете обозначение paperscript, вам не нужно добавлять префикс paper к конструкторам.

• Я не уверен, почему вы включаете функции jQuery внутри вашего документа.

Here's a jsFiddle demonstration.

Answer 3

Вот example of a circle following an arc, я использую функцию интерполировать мой folio.js библиотеки, но основа.

// move path along an arc 
path.position.x *= Math.cos(delta); 
path.position.y *= -Math.sin(delta)*2; 

ЗАКАНЧИВАТЬ source, чтобы увидеть более подробную информацию о том, как она работает