问题描述
我希望为 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);