沿 konva 中的线或路径为形状设置动画

Posted 2023-03-25

【中文标题】沿 konva 中的线或路径为形状设置动画

【英文标题】：Animate a shape along a line or path in konva

【发布时间】：2019-04-19 04:31:05

【问题描述】：

是否可以在 Konva 中为沿线/路径的形状（标记、圆圈）设置动画。我尝试随着时间的推移手动计算位置，但这仅在直线从 A 到 B 的情况下才可行，但我对贝塞尔曲线和多个路径点感兴趣。

所以我想知道 Konva 是否支持这种事情，或者有人可以指导如何解决这个问题。

【问题讨论】：

好的，基本上使用 getPointAtLength(length) 和 getLength() 应该可以获取图表上某个点的位置……然后可以对其进行动画处理：konvajs.github.io/api/Konva.Path.html

【参考方案1】：

如您所见，Path 对象在 getLength() 中有一些方便的方法来查找总路径长度，而 getPointAtLength() 则可用于在长度上的任何给定点处查找 (x,y)。

如果它对任何人有帮助，我从another snippet from this other question. 的输出中构建了路径数据

var data = ["x":34,"y":34,"x":84,"y":64,"x":141,"y":79,"x":181.5,"y":78.5,"x":218,"y":62,"x":223,"y":40,"x":240,"y":26,"x":259.5,"y":25,"x":271,"y":40,"x":292.5,"y":53,"x":311.25,"y":55.5,"x":330.625,"y":46.75,"x":332.3125,"y":30.375,"x":349.15625,"y":10.1875,"x":374.578125,"y":10.09375,"x":392,"y":26,"x":411,"y":36,"x":444.5,"y":37,"x":453.875,"y":27.25,"x":463.25,"y":17.5,"x":472.9375,"y":10.625,"x":494.625,"y":15.75,"x":530,"y":48,"x":534,"y":88,"x":540,"y":150,"x":552,"y":198,"x":544,"y":227,"x":522,"y":256,"x":504.5,"y":263,"x":471,"y":262,"x":448,"y":252,"x":372,"y":214,"x":290,"y":146,"x":256,"y":100,"x":198,"y":104,"x":182,"y":140,"x":204,"y":185,"x":203,"y":201.5,"x":190,"y":214,"x":174.5,"y":218,"x":155,"y":214,"x":124,"y":222,"x":113.5,"y":232.5,"x":95,"y":227,"x":75.5,"y":211.5,"x":72,"y":188,"x":58,"y":136]

// Set up the canvas / stage
var stage = new Konva.Stage(container: 'container1', width: 600, height: 300);

// Add a layer for line
var layer = new Konva.Layer(draggable: false);
stage.add(layer);

// draw a path.
    var path = new Konva.Path(
      x: 0,
      y: 0,
      stroke: 'cyan'
    );
layer.add(path)

// Load the path points up using M = moveto, L = lineto.
var p = "M" + data[0].x + " " + data[0].y;
for (var i = 1; i < data.length; i = i + 1)
  p = p + " L" + data[i].x + " " + data[i].y;

path.setData(p);

// add a circle to be animated along the path
var circle = new Konva.Circle( x: data[0].x, y: data[0].y, radius: 10, fill: 'Magenta');
layer.add(circle);

stage.draw();

$('#reset').on('click', function()

  // Now animate a circle along the path
  var steps = 50; // number of steps in animation
  var pathLen = path.getLength();
  var step = pathLen / steps;
  var frameCnt = 0, pos =0, pt;

    anim = new Konva.Animation(function(frame) 
        pos = pos + 1;
        pt = path.getPointAtLength(pos * step);
        circle.position(x: pt.x, y: pt.y);    
    , layer);

  anim.start();
)

$('#reset').trigger('click');

<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.min.js"></script>
<button style='position: absolute; z-index: 10;' id='reset'>Go</button>
<div id='container1' style="width: 300px, height: 200px; background-color: silver;"></div>
<div id='img'></div>

【讨论】：

非常感谢您提供如此清晰详细的答案，尤其是还引用了其他 sn-p。非常感谢。