如何用动画制作视频？

Question

我希望为Mac创建一个软件，该软件将拍摄一组图片，如下面的示例所示的图片排列，并让用户输出一段视频，使每幅图片动画化，形成图片排列。

​

​

我正在寻找的指针，以了解如何做到这一点。

Answer 1

一种方法是创建一个电子应用程序。

在html5画布上很容易将这样的照片动画化，并且可以使用类似于CCapture.js的东西保存导出的视频

有关具有基本动画并将视频保存为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, 0, ctx.canvas.width, ctx.canvas.height);
      ctx.fillStyle = "white";
      ctx.fillRect(0, 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, invCoord);
      ctx.drawImage(imgSW, coord, 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);