动画在HTML5画布上绘制路径 [英] Animate drawing of path on HTML5 canvas
问题描述
我的问题是如何在两点之间绘制路径的动画。
My problem is how to animate the drawing of a path between two points.
考虑两点之间的曲线或路径，A& B.我可以使用Konvajs中的线条绘制功能在画布上轻松绘制。
Consider a curved line or path between two points, A & B. I can draw this easily on the canvas using the line drawing functions in Konvajs.
然而，我真正想要的是动画显示线的动画，使其从A点开始并逐渐绘制到B点。显示应该是动画的，所以我可以申请令人满意的宽松。
However, what I actually want is to animate the revealing of the line so that it starts from point A and progressively draws to point B. The reveal should be animated so I can apply pleasing easings.
作为一个类似的例子，请参阅本网站上的简短视频 https://coggle.it/ ，其中视频显示新框的创建，并绘制线条以将其连接到旧框。
As a comparable example, see the brief video on this site https://coggle.it/ where the video shows the creation of a new box and the line draws to connect it to the old.
推荐答案
这是一个潜在的答案（特别感谢 @ markov00 同样的技巧SVG）。它通过操纵路径dashOffset和dash属性来工作。 在Jake Archibald的帖子中有一个很好的解释技术其中还包括一个滑块的交互式实验，我发现它非常有用。
Here is a potential answer (special thanks to @markov00 re same technique in SVG). It works by manipulating the path dashOffset and dash attributes. There is an excellent explanation of the technique here in a post by Jake Archibald which also includes an interactive experiment with sliders which I found very useful.
我试图让演示尽可能轻巧，只是展示技术 - 尽管我添加了一个滑块和一些用于帮助理解过程的UI。 jquery的使用仅适用于该技术不需要的UI部分。
I have tried to make the demo as lightweight as possible and just show the technique - though I added a slider and some UI to help understand the process. The use of jquery is only for the UI parts which are not needed for the technique.
几点：
- 这里的演示使用3连胜的路径线段。但我尝试了曲线和组合路径，这种技术在这些情况下也适用 - 所以任何路径都应该有效。
- 我发现在路径上使用close-path命令（z）会导致路径长度函数在真实距离上变短。这表现为在任一端保持行程或间隙的路径量，其大小取决于第一和第二之间的跳跃。最后关闭路径。
- 路径长度实际上总是小数，所以不要试图做整数，因为你最终会发现你的笔划略微过长或过短。
要将其用于动画和缓动等，请从滑块更改事件中取出几行，并将它们粘贴在帧回调中，操纵数学以适合你的情况。
To adopt this for animation and easing etc, take the couple of lines from the slider change event and stick them inside the frame callback, manipulating the maths to suit your case.
// Set up the canvas / stage
var stage = new Konva.Stage({container: 'container1', width: 320, height: 180});
// Add a layer
var layer = new Konva.Layer({draggable: false});
stage.add(layer);
// show where the start of the path is.
var circle = new Konva.Circle({
x: 66,
y: 15,
radius: 5,
stroke: 'red'
})
layer.add(circle);
// draw a path.
var path = new Konva.Path({
x: 0,
y: 0,
data: 'M66 15 L75 100 L225 120 L100 17 L66 15',
stroke: 'green'
});
// get the path length and set this as the dash and dashOffset.
var pathLen = path.getLength();
path.dashOffset(pathLen);
path.dash([pathLen]);
layer.add(path)
stage.draw();
// Some UI bits
$('#dist').attr('max', parseInt(pathLen)); // set slider max to length of path
$('#pathLen').html('Path : ' + pathLen); // display path length
// jquery event listener on slider change
$('#dist').on('input', function(){
// compute the new dash lenth as original path length - current slider value.
// Means that dashLen initially = path len and moves toward zero as slider val increases.
var dashLen = pathLen - $(this).val();;
path.dashOffset(dashLen); // set new value
layer.draw(); // refresh the layer to see effect
// update the UI elements
$('#dashLen').html('Dash: ' + dashLen);
$('#pathPC').html(parseInt(100-(100 * (dashLen/pathLen)), 10) + '%');
})
.info
{
padding-left: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div class="slidecontainer">
<input class='slider' id='dist' type="range" min="0" max="100" value="0" class="slider" id="myRange"/>
<span class='info' id='pathPC'></span>
<span class='info' id='pathLen'></span>
<span class='info' id='dashLen'></span>
</div>
<div id='container1' style="display: inline-block; width: 300px, height: 200px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>
这篇关于动画在HTML5画布上绘制路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
