javascript – 在HTML5画布上绘制路径的动画

我的问题是如何动画两点之间的路径绘制.

考虑两点之间的曲线或路径,A& B.我可以使用Konvajs中的线条绘制功能在画布上轻松绘制.

然而,我真正想要的是为线条的显示设置动画,使其从A点开始并逐渐绘制到B点.显示应该是动画的,这样我就可以应用令人愉悦的缓动.

作为一个类似的例子,请参阅此网站https://coggle.it/上的简短视频,其中视频显示了新框的创建,并且线条绘制以将其连接到旧框.

解决方法:

这是一个潜在的答案(特别感谢@markov00与SVG相同的技术).它通过操纵路径dashOffset和dash属性来工作.对于技术here in a post by Jake Archibald有一个很好的解释,它还包括一个滑块的交互式实验,我发现它非常有用.

我试图使演示尽可能轻量级,只是展示技术 – 虽然我添加了一个滑块和一些UI来帮助理解这个过程. jquery的使用仅适用于该技术不需要的UI部分.

几点：

>此处的演示使用了3条直线段的路径.但我尝试了曲线和组合路径,这种技术在这些情况下也适用 – 所以任何路径都应该有效.
>我发现在路径上使用close-path命令(z)导致路径长度函数在真实距离上变短.这表现为在任一端保持行程或间隙的路径量,其大小取决于第一和第二之间的跳跃.最后关闭路径.
>路径长度实际上总是十进制,所以不要试图做整数,因为你最终会发现你的笔划略微过长或过短.

要将其用于动画和缓动等,请从滑块更改事件中取出几行,并将它们粘贴在帧回调中,操纵数学以适合您的情况.

// 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>

标签：javascript,canvas,html5-canvas,konvajs
来源： https://codeday.me/bug/20191002/1844781.html