プログラムで背景画像をアニメーション化する
背景画像をアニメーション化する主な方法は 2 つあります。
- CSS スプライトを使用して、JS の
background-positionを更新します。 .toDataURL()で始まるハック。
前もって画像が用意されている場合は、最初の方法が適切ですが、<canvas> などによってソースをプログラムで生成する必要がある場合はどうすればよいでしょうか。問題 1 の解決策は、キャンバスで .toDataURL() を使用し、生成された URL を背景に設定することです。
while(1) {
var url = canvas.toDataURL('image/jpeg');
el.style.background = 'url(' + url + ')';
}
これには 2 つの問題があります。
data:URL を使用すると、生成される画像のサイズが約 33% 増加します。- 大量の DOM 操作（
el.style）。
どちらの方法も非効率的であり、常に 60 fps の滑らかなウェブアプリでは許容できません。
2D キャンバスを背景として使用する
調べてみると、WebKit には何年も前から、キャンバスを背景のソースとして使用できる非標準の API があります。ただし、この機能の仕様は公開されていません。
まず、戻るページの URL を指定せずに、次のようにします。
.bg {
background: url(bg.png) no-repeat 50% 50%;
}
-webkit-canvas() を使用して、キャンバス コンテキストへの文字列識別子を参照します。
.canvas-bg {
background: -webkit-canvas(animation) no-repeat 50% 50%;
}
次に、特別なバージョンの .getContext() を使用して 2D コンテキストを作成する必要があります。
var ctx = document.getCSSCanvasContext('2d', 'animation', 300, 300);
Dave Hyatt による詳細情報:
アニメーション
デモで説明したように、requestAnimationFrame() を再利用してアニメーションを駆動できます。これは、一度接続すると、CSS とキャンバス要素の関連付けが保持されるため便利です。DOM を操作する必要はありません。
Chrome でデモがアニメーション化されない
Chrome の現在の Stable チャンネル（バージョン 23）には crbug.com/161699 があり、requestAnimationFrame() アニメーションが背景を適切に更新できなくなっています。この問題は Chrome 25（現在は Canary）で修正されています。デモは、現在の Safari でも正常に動作するはずです。
パフォーマンス上のメリット
ここではキャンバスについて説明します。ハードウェア アクセラレーションによるアニメーションが完全に機能するようになりました（少なくとも、この機能が動作するブラウザでは）。繰り返しになりますが、JS から DOM を操作する必要はありません。
背景として WebGL を使用する
ちょっと待ってください。これは、webgl を使用して CSS の背景を強化できるということですか？はい、搭載されています。WebGL は、キャンバス用の 3D コンテキストにすぎません。「2d」ではなく「experimental-webgl」に置き換えるだけで、準備完了です。
var gl = document.getCSSCanvasContext('experimental-webgl', 'animation', 300, 150);
頂点シェーダーとフラグメント シェーダーを使用して背景が描画された div を含むプロトタイプは次のとおりです。DEMO
その他のアプローチ
Mozilla では、-moz-element()（MDN）がかなり前から存在しています。これは CSS Image Values and Replaced Content Module Level 4 仕様の一部であり、動画、キャンバス、DOM コンテンツなど、任意の HTML から生成された画像を作成できます。ただし、DOM のスナップショット イメージに完全アクセスできると、セキュリティ上の懸念が生じます。これが、他のブラウザがこの機能を採用していない主な理由です。