时间戳

首页 > 解决方案 > 如何在 Node 上使用 Konva JS 将补间渲染到一系列 png 文件？

javascript - 如何在 Node 上使用 Konva JS 将补间渲染到一系列 png 文件？

问题描述

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

下面的代码基于我在 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();

标签： javascriptnode.jskonvajs

解决方案

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

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,控制台,输出

更新：

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

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

推荐阅读