在 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 条直线段组成的路径.但我尝试了曲线和组合路径，并且该技术在这些情况下也适用 - 所以任何路径都应该有效.
• 我发现在路径上使用近距离路径命令 (z) 会导致路径长度函数在真实距离上变短.这显示为在任一端保持描边或间隙的路径量，其大小取决于 first 和最后关闭路径.
• 路径长度几乎总是十进制，所以不要尝试将所有内容都作为整数，因为最终您会发现您的笔划稍微过长或过短.

要将其用于动画和缓动等，请从滑块更改事件中获取几行并将它们粘贴到帧回调中，根据您的情况操作数学.

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屋！