Использование PaperJs анимировать рисования линии

Это мой код:Использование PaperJs анимировать рисования линии

<!DOCTYPE html> 
<html> 
<head> 
<!-- Load the Paper.js library --> 
<script type="text/javascript" src="paper.js"></script> 
<!-- Define inlined PaperScript associate it with myCanvas --> 
<script type="text/paperscript" canvas="myCanvas"> 

    // Create a Paper.js Path to draw a line into it: 
    var path = new Path(); 
    // Give the stroke a color 
    path.strokeColor = 'black'; 
    var start = new Point(100, 100); 
    // Move to start and draw a line from there 
    path.moveTo(start); 
    // Note the plus operator on Point objects. 
    // PaperScript does that for us, and much more! 
    function onFrame(event) { 
     // Your animation code goes in here 
     for (var i = 0; i < 100; i++) { 
      path.add(new Point(i, i)); 
     } 
    } 

</script> 
</head> 
<body style="margin: 0;"> 
    <canvas id="myCanvas"></canvas> 
</body> 
</html>

Когда страница загружается, линия рисуется. Но я пытаюсь анимировать чертеж линии из точки A в B. Моя попытка выше, похоже, ничего не делает ... она просто рисует линию на загрузке страницы без анимации фактической строки, идущей от A до B .

Реф. http://paperjs.org/download/

источник

2013-09-10 user1477388

Поскольку вы используете цикл for на каждом кадре, вы снова и снова создаете одни и те же сегменты линии. Вместо этого вам нужно добавить один сегмент для каждого кадра:

// Create a Paper.js Path to draw a line into it: 
var path = new Path(); 
// Give the stroke a color 
path.strokeColor = 'black'; 
var start = new Point(100, 100); 
// Move to start and draw a line from there 
// path.moveTo(start); 
// Note the plus operator on Point objects. 
// PaperScript does that for us, and much more! 
function onFrame(event) { 
    // Your animation code goes in here 
    if (event.count < 101) { 
     path.add(start); 
     start += new Point(1, 1); 
    } 
}

Оператор if служит пределом для длины линии.

Также обратите внимание, что команда path.moveTo (start) ничего не значит, если ваш путь еще не имеет сегментов.

Если вы не хотите добавлять точки в каждый кадр, а только изменяете длину линии, просто измените положение одного из сегментов. Сначала создайте добавление двух сегментов на ваш путь, затем измените положение второго сегмента на каждое событие кадра:

// Create a Paper.js Path to draw a line into it: 
var path = new Path(); 
// Give the stroke a color 
path.strokeColor = 'black'; 
path.add(new Point(100, 100)); 
path.add(new Point(100, 100)); 
// Move to start and draw a line from there 
// path.moveTo(start); 
// Note the plus operator on Point objects. 
// PaperScript does that for us, and much more! 
function onFrame(event) { 
    // Your animation code goes in here 
    if (event.count < 101) { 
     path.segments[1].point += new Point(1, 1); 
    } 
}

источник

2013-09-10 15:27:56

Спасибо за хороший ответ. Мне интересно: это создает 100 очков, чтобы нарисовать линию ... Есть ли способ рисовать анимированную линию с двумя точками (A и B)? – user1477388

Конечно. Проверьте отредактированный ответ выше. –

Использование PaperJs анимировать рисования линии

ответ

Смежные вопросы