Konva 动画迭代计数器在 1 后停止动画

Question

我想让

yellowLine

在屏幕上从左到右流动一次。之后它应该保持稳定。 添加的动画可以正常工作，但

yellowLine

会缩短。 是否有不同的方法来处理

anim.stop()

，例如迭代计数器？

<div class="content-container">
  <div id="stage">
    <div style="position: relative; user-select: none; width: 1425px; height: 392.5px;" class="konvajs-content" role="presentation"><canvas style="padding: 0px; margin: 0px; border: 0px none; background: transparent; position: absolute; top: 0px; left: 0px; width: 1425px; height: 392.5px; display: block;" width="1425" height="392"></canvas></div>
  </div>
</div>
<script src="https://unpkg.com/konva@9/konva.min.js"></script>

const stage = new Konva.Stage({
  width: window.innerWidth,
  height: document.querySelector('.content-container').clientHeight / 2,
  container: 'stage',
});

const layer = new Konva.Layer();

const bluePoly = new Konva.Line({
  points: [0, 0, stage.width(), 0, stage.width() / 2, stage.height() / 2, 0, stage.height() / 2],
  fill: '#3769cd',
  closed: true,
});

const whitePoly = new Konva.Line({
  points: [0, 0, stage.width() / 2, 0, (stage.width() / 2) * 1.5, stage.height() / 2, 0, stage.height() / 2],
  fill: '#ffffff',
  closed: true,
  x: 0,
  y: stage.height() / 2,
});

const yellowLine = new Konva.Line({
  points: [0, 0, stage.width() / 2, 0, ((stage.width() / 2) * 1.5) - 50, (stage.height() / 2) - 20, stage.width(), (stage.height() / 2) - 20],
  stroke: 'yellow',
  strokeWidth: 10,
  x: 0,
  y: stage.height() / 2,
  dash: [stage.width(), stage.width()],
  dashOffset: stage.width(),
});

const anim = new Konva.Animation(function(frame) {
  yellowLine.dashOffset(stage.width() - (frame.time * stage.width() / 2055));
}, layer);

anim.start();

setTimeout(function() {
  anim.stop();
  redrawYellowLine();
}, 2055);

const redrawYellowLine = () => {
  const viewportWidth = stage.width();
  const viewportHeight = stage.height();

  yellowLine.points([0, 0, viewportWidth / 2, 0, ((viewportWidth / 2) * 1.5) - 50, (viewportHeight / 2) - 20, viewportWidth, (viewportHeight / 2) - 20]);
  layer.batchDraw();
};

layer.add(bluePoly, whitePoly, yellowLine);
stage.add(layer);

window.addEventListener('resize', () => {
  stage.width(window.innerWidth);
  stage.height(document.querySelector('.content-container').clientHeight / 2);

  const viewportWidth = stage.width();
  const viewportHeight = stage.height();

  bluePoly.points([0, 0, viewportWidth, 0, viewportWidth / 2, viewportHeight / 2, 0, viewportHeight / 2]);
  whitePoly.points([0, 0, viewportWidth / 2, 0, (viewportWidth / 2) * 1.5, viewportHeight / 2, 0, viewportHeight / 2]);
  yellowLine.points([0, 0, viewportWidth / 2, 0, ((viewportWidth / 2) * 1.5) - 50, (viewportHeight / 2) - 20, viewportWidth, (viewportHeight / 2) - 20]);

  redrawYellowLine();
  layer.batchDraw();
});

Answer 1

依靠计时器来停止动画几乎总是会使实际停止变得不可预测。幸运的是，Konva 确实提供了一种替代方案：Tweens。

主要好处是：

• 您可以为动画设置特定的持续时间
• 定义对象在动画结束时的外观

如果您对动画

dashoffset

感兴趣，请在 after 将

yellowLine

添加到图层后尝试以下几行。

let tween = new Konva.Tween({
    node: yellowLine,
    duration: 2,
    dashOffset: 0
});
tween.play();