2

これまで PhantomJS を使用したことはありませんでしたが、それを使用してカスタムメイドの CSS3 アニメーション シーケンスをサーバー側の一連の PNG ファイルにレンダリングし、次にそれらを 1 つのビデオ ファイルに結合したいと考えています。PhantomJS には、現在のページの状態を画像にレンダリングするオプションがあるようです。次に、-webkit-animation-play-stateアニメーションを一時停止し、ページをレンダリングしてから、次のフレームに移動して、すべてをやり直すのに役立つことを願っています。

すべての一時停止/再生状態をより適切に制御できるように、純粋な JS でこれらのアニメーションを実行する必要がありますか? たとえば、長方形を1px移動してから画像をレンダリングし、もう一度移動してからレンダリングすることができると思います。ただし、CSS3 のアニメーション化は、操作するのにはるかにクリーンです。

このタスクを最善の方法で解決する方法、または少なくとも私が開始できる方法を教えてください。ありがとう！

4

1 に答える 1

5

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

Google ホームページのスナップショットを 0.5 秒ごとに 5 回取得します。

次に、アニメーションを 0.5 秒ごとに一時停止すると、phantomjs がそれらのポイントをキャプチャします。

于 2013-04-16T10:12:05.757 に答える