使用PaperJs为线条绘制动画 [英] Using PaperJs to Animate the Drawing of a Line
问题描述
这是我的代码：
<!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的实际线条的动画。
When the page is loaded, a line is drawn. But I am trying to animate the drawing of the line from point A to B. My attempt above doesn't seem to do anything... it just draws the line on page load with no animation of the actual line going from A to B.
参考。 http://paperjs.org/download/
推荐答案
由于您在每个帧上运行for循环，因此您将一次又一次地重复创建相同的线段。相反，您需要每帧添加一个段：
Since you are running the for-loop on every frame, you're re-creating the same line segments over and over, all at once. Instead, you need to add one segment per frame:
// 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语句用作行长的限制。
The if statement serves as a limit for the line's length.
另请注意，如果您的路径还没有任何段，则path.moveTo（start）命令没有任何意义。
Also note that the path.moveTo(start) command does not mean anything if your path does not yet have any segments.
如果您不想每帧添加点，但只更改一条线的长度，只需更改其中一个线段的位置即可。首先创建向路径添加两个段，然后更改第二个段的每帧点数事件的位置：
If you don't want to add points every frame, but only change the length of a line, simply change the position of one of the segments. First create add two segments to your path, then change the position of the second segment's point per frame event:
// 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);
}
}
这篇关于使用PaperJs为线条绘制动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
