Как отрендерить анимацию в последовательности файлов png с помощью Konva JS на узле?

Question

Как отрендерить анимацию в последовательности файлов png с помощью Konva JS на узле?

1

В качестве эксперимента я хочу оживить квадрат с классом Tween и сохранить все фреймы в виде png файлов, однако надлежащего обратного вызова, такого как onUpdate, похоже, не существует. Я хотел бы назвать его на каждом новом фрейме и сгенерировать 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();

Julian Weimer 18 окт. 2018, в 12:23

Источник

Теги:

javascript

node.js

konvajs

1 ответ

Ещё вопросы

lavrton · Accepted Answer · 2018-10-18T12-37-00.000Z

Нет обратного вызова 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

Спасибо за Ваш быстрый ответ! Ваш пример работает отлично, за исключением одной проблемы. Я думаю, что он работает в режиме реального времени и пропускает кадры, потому что сохранение изображений требует времени. В конце я хотел бы иметь все кадры со скоростью 25 кадров в секунду в видео. До сих пор я разработал решение с использованием Konva.Animation. Это единственный способ?
@JulianWeimer обновил ответ. Вероятно, это будет работать для вас.