Question

作为一个实验，我想使用Tween类为正方形动画，并将所有帧保存为png文件，但是似乎不存在诸如onUpdate之类的适当回调。我想在每个新框架上调用它，并使用我已经创建的函数或通过其他解决方案生成当前状态的png。

下面的代码基于我在this repository on Github中找到的示例。

let i = 0;

let tween = new Konva.Tween({
  node: rect,
  duration: 1,
  x: 140,
  y: 90,
  rotation: Math.PI * 2,
  opacity: 1,
  strokeWidth: 6,
  scaleX: 1.5,
  onUpdate: () => { // does not exist
    i++;
    console.log(i);
    render_frame(i);
  },
  onFinish: () => {
    console.log("finished");
  }
});

tween.play();

Answer 1

没有onUpdate回调，但是我们可以使用图层的draw事件来保存图像：

let tween = new Konva.Tween({
  node: circle,
  duration: 1,
  x: 140,
  y: 90,
  rotation: Math.PI * 2,
  opacity: 1,
  strokeWidth: 6,
  scaleX: 1.5,
  onFinish: () => {
    // remove draw event
    console.log('finish');
    layer.off('.tween');
  }
});

tween.play();

layer.on('draw.tween', () => {
  // save layer to image
  console.log('to image')
})

https://jsbin.com/regiduzusi/1/edit?html,js,console,output

更新：

如果需要同步更新，则可以手动更改补间时间。

const duration = 1;
const tween = new Konva.Tween({
  node: circle,
  duration: duration,
  x: 140,
  y: 90,
  rotation: Math.PI * 2,
  opacity: 1,
  strokeWidth: 6,
  scaleX: 1.5
});

const FPS = 25;
const tics = FPS * duration;


for (let i = 0; i < tics; i++) {
  tween.seek(i / tics);
  layer.draw();
  console.log('to image')
}

演示2：https://jsbin.com/fudanozani/1/edit?html,js,console,output

如何在Node上使用Konva JS将补间渲染为png文件序列？

1 个答案: