使用 PhantomJS 将 CSS3 动画渲染为一系列图像文件

【问题标题】：Render CSS3 animation as a sequence of image files with PhantomJS使用 PhantomJS 将 CSS3 动画渲染为一系列图像文件
【发布时间】：2013-04-16 18:28:31
【问题描述】：

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

也许我应该用纯 JS 来制作这些动画，以便更好地控制所有暂停/播放状态？我想我可以，例如，将一个矩形移动 1px，然后渲染图像，然后再次移动它，然后渲染等等。尽管 CSS3 动画使用起来更加简洁。

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

【问题讨论】：

标签： javascript html css server-side phantomjs

【解决方案1】：

您可以让 phantomjs 每隔几百毫秒拍摄一次快照，并以此为基础创建 css3 动画。

一个示例脚本 (snap.js) 是：

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 像这样调用脚本：

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

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

如果你每半秒暂停一次动画，phantomjs 就会捕捉到这些点。

【讨论】：

有什么方法可以在 python 上使用 selenium/phantomjs 而不用命令行调用脚本？