使用PhantomJS将CSS3动画渲染为一系列图像文件 [英] Render CSS3 animation as a sequence of image files with PhantomJS

问题描述

之前我没有使用PhantomJS，但是想用它来为服务器端的PNG文件集渲染一些定制的CSS3动画序列，然后将它们连接成一个视频文件。看起来像PhantomJS有一个选项可以将当前页面状态呈现给图像。接下来，我发现 -webkit-animation-play-state 我希望可以帮助我暂停动画，渲染页面，然后转到下一帧并再次完成所有操作。

I didn't work with PhantomJS before, but want to use it to render some custom-made CSS3 animated sequences to sets of PNG files on server side to join them into a single video file next. Seems like PhantomJS has an option to render current page state to an image. Next, I found -webkit-animation-play-state that I hope can help me to pause the animation, render the page, then go to next frame and do it all again.

可能我应该用纯JS做这些动画，以便我可以更好地控制所有暂停/播放状态？我想我可以，例如，将矩形移动1px，然后渲染图像，然后再移动它，然后渲染等等。虽然CSS3动画可以更清晰地使用。

May be I should do these animations with pure JS so that I can control all pause/play states better? I think I can, for example, move a rectangle by 1px, then render the image, then move it again, then render and so on. Though CSS3 animating is much cleaner to work with.

请告诉我如何以最好的方式或至少我可以开始的事情来更好地解决这个任务。谢谢！

Please advise how I can better solve this task in the best way or at least something I can begin wth. Thanks!

推荐答案

你可以让phantomjs每隔几百毫秒拍摄一张快照，然后根据它拍摄你的css3动画。

You could have phantomjs take a snapshot every few hundred milliseconds and base your css3 animations around that.

这个示例脚本（snap.js）将是：

An example script (snap.js) for this would be:

var system = require('system');
var page = new WebPage();

var address = system.args[1];
var wait = parseInt(system.args[2]);
var iterations = parseInt(system.args[3]);

page.open(address, function(){
    (function snap(i){
        if(i < iterations){
            window.setTimeout(function(){
                page.render('capture/'+i+'.png');
                snap(++i);
            }, wait);
        }
        else{
            phantom.exit();
        }
    })(0);
});

您可以使用phantomjs来调用脚本：

You would use phantomjs to call the script like this:

./phantomjs snap.js http://google.com 500 5

它将每半秒拍摄一次谷歌主页的快照，5次。

and it would take a snapshot of the google homepage every half a second, 5 times.

然后如果你每半年暂停动画一次第二个幻影将捕获这些点。

Then if you paused your animation every half a second phantomjs would capture those points.

这篇关于使用PhantomJS将CSS3动画渲染为一系列图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！