如何动画图片以创建视频？

如何解决如何动画图片以创建视频？

我希望为 Mac 创建一个软件，该软件将拍摄一组图片，如下例所示的图片排列，并让用户输出一个视频，其中每张图片都带有动画以形成图片排列。

我正在寻找有关如何执行此操作的指针。

解决方法

一种方法是创建一个 electron 应用。

在 html5 画布上为这样的照片制作动画非常容易，您可以使用 CCapture.js 之类的东西保存导出的视频

请参阅 here 以获取带有基本动画并将视频保存为 webm 的简化示例：

window.addEventListener('load',function() {
  var
    imgNW = new Image(),imgNE = new Image(),imgSE = new Image(),imgSW = new Image(),canvas = document.getElementById('myCanvas'),ctx = canvas.getContext('2d');

  var fps = 30;

  var animation_offset = 0;

  var frameRequestID;

  imgNW.crossOrigin = "anonymous";
  imgNE.crossOrigin = "anonymous";
  imgSE.crossOrigin = "anonymous";
  imgSW.crossOrigin = "anonymous";

  imgNW.src = 'https://i.imgur.com/po6Bma2.png';
  imgNE.src = 'https://i.imgur.com/WT75J7k.png';
  imgSE.src = 'https://i.imgur.com/pvDnwSD.png';
  imgSW.src = 'https://i.imgur.com/BYXjccx.png';


  function draw() {
    capturer.capture(canvas);
    if (animation_offset <= 210) {
      ctx.clearRect(0,ctx.canvas.width,ctx.canvas.height);
      ctx.fillStyle = "white";
      ctx.fillRect(0,canvas.width,canvas.height);

      var coord = animation_offset - 200;
      var invCoord = 420 - animation_offset;

      ctx.drawImage(imgNW,coord,coord);
      ctx.drawImage(imgNE,invCoord,coord);
      ctx.drawImage(imgSE,invCoord);
      ctx.drawImage(imgSW,invCoord);

      animation_offset += 1; //effectively adjusts the speed.  smaller numbers = slower movement

      frameRequestID = requestAnimationFrame(draw);
    } else {
      console.log("done!");
      capturer.stop();
      capturer.save();
      cancelAnimationFrame(frameRequestID);
    }
  }



  var capturer = new CCapture({
    format: 'webm',verbose: true,});
  capturer.start();

  draw();

},false);