基本
ビデオを見て、アプリからいくつかのアプリケーションをひねった後、私は結論に達しました：スプライト（レイヤー）はまるで立方体のようです。 したがって、デバイスを回転させると、近くのレイヤーが一方の方向に移動し、最も遠いレイヤーがもう一方の方向に移動します。 真ん中のどこかがメインレイヤーであり、私たちの注意はそこにあります。
理論を扱った後、開発に進みます。
レイヤーを配置する
ここまでは行かないでDIVを使用します。CSSz-indexプロパティも役立ちます。
<div id="background_scene" class="flow" style="background-image:url(res/images/moun.jpg);z-index:2;top:-20px;left:-150px;width:200%;height:200%"></div> <div id="clouds" class="flow" style="background-image:url(res/images/clouds.png);opacity: 0.5;z-index:3;top:120px;left:400px;"></div> <div id="dragon" class="flow" style="background-image:url(res/images/dragon.png);z-index:5;top:120px;left:500px;"></div>
上記では、.flowクラス、初期座標、および画像で3つのスプライトを与えました。 今、それらを動かす時間です。
デバイスの回転
空間内の位置を取得するためのすべてのニーズは、イベントwindow.ondevicemotionによって満たされます。
window.ondevicemotion = function(event) { X = event.accelerationIncludingGravity.x; Y = event.accelerationIncludingGravity.y; Z = event.accelerationIncludingGravity.z; }
私はイベントをペイントせず、好奇心を参照リストに送ります。
このイベントには、XとUの2つの値が必要です。
オフセットデルタを計算します。
deltaX = lastX - X; deltaY = lastY - Y; lastY = Y; lastX = X;
クラス名.flowですべてのスプライトを検索します
なぜなら 小さなz-indexを持つスプライトは最も「リモート」であり、反対方向に移動する必要があります。各グループの移動は個別に計算されます。
elements = $('div.flow'); elements.each(function (key, layer) { zIndex = layer.style.zIndex; sprite = $('#' + layer.id); if (zIndex > 9) { // z-index < 10 anim = {"left":"-=" + deltaX * zIndex * 2, "top":"+=" + deltaY * zIndex * 0.5}; //0.5 , } else { anim = {"left":"+=" + deltaX * zIndex * 2, "top":"-=" + deltaY * zIndex * 2}; } sprite.animate(anim, 100); // jQuery }
通常のタスクに加えて、z-indexはスプライトの動きを加速するための係数としても機能します。
まあ、それは基本的にそれです。
機能強化
1.レイヤーモーションメソッドのトリガー回数を減らすために、タイマーのアクティブ化が追加されました。 これにより増加しましたが、間隔の増加はアニメーションの単収縮を伴います。
2.揺れを減らすために、デルタの計算方法が異なります。デルタ= X-Xsredn。 Xredn-タイマー間隔の瞬間に計算されます。 最後の瞬間に手を振っても、すべてがスムーズになります。
3.画面の向きのサポートを追加
問題
1.揺れはまだ目立っています。キャリブレーションが必要か、まったく異なるアルゴリズムを記述する必要があるかはわかりません
2.スプライトの速度を実際に設定できません
できた
1.レベルコントロールを備えたドラッグアンドドロップスプライトのシンプルなデザイナー
2.加速度計だけでなく、マウス、スクロールバーでも使用できます（可用性または設定に応じて）
3.カメラでの作業は可能ですが、...
読むことをお勧めします
デモ （デバイスがデバイスモーションをサポートしていない場合、ランダムチルトジェネレーターがオンになります）
コードと例として、アイデアから実装までの短い時間は有罪です。 意見、ヒントを知りたいと思うでしょう。 興味がある場合は、ライブラリを完成させようとします。
UPD ：Andriodデバイスではテストできませんでした。 そして、残念ながら、コードはそれらに対して機能しません。 私は解決策を見つけようとします。