これは、あらゆる種類のスライドショーで特に顕著です。モバイルおよびタブレットでは、速度が低下したり、グリッチが発生したり、ちらつきが発生したり、あらゆる点でエクスペリエンスが損なわれます。 今日は、アニメーションをiPhoneとiPadで完全に動作させます。
危険にさらされているものを理解するには、Mobile Safariでアニメーションのあるページ、および少なくともjquery.cycleホームページを開いてください 。 コンピューターでは、すべてがスムーズで素晴らしいものであり、iPhoneでは、憂鬱な気分になります。 大きな写真のある実際のスライダーでは、状況はさらに悪化します。
小さなデバイスではこれ以上絞れないと思うかもしれませんが、そうではありません。 一部のインターフェース、特にSenchaフレームワークとiPad雑誌は、ブレーキなしで動作します。 彼らはどうやってそれをしますか？ 救助のためのハードウェアアクセラレーション！
すばらしいCSS3変換および遷移プロパティがあります。 最初の要素は要素の変換を制御し、2番目の要素はCSSアニメーションを制御します。 特に、transformプロパティを使用して、X軸またはY軸に沿って要素をシフトし、トランジションを使用してこのシフトをアニメーション化できます。 margin-left / margin-topおよびleft / topプロパティによるシフトとの違いは、要素自体ではなく、ページ上の「グラフィック表示」がシフトされることです。 したがって、シフトごとにページレイアウトを再描画することを避け、JavaScriptの使用度を減らすことができます。
必要なパラメーターはtranslate3dと呼ばれます。 そして、たまたま彼が本当に何かに影響を与えたのです。少なくともファームウェア4.1では、シンプルなtranslateXを使用しても成功しませんでした。 したがって、アニメーション中に通常の方法でjQueryを接続し、animateメソッドを呼び出した場合：
$('#slide').click(function() {
$(this).stop().animate({'margin-left': 650}, 1000);
});
次に、CSSで必要なプロパティを設定し、アニメーションの時間とタイプを設定するだけです。
$('#slide').click(function() {
$(this).css({
'-webkit-transform': 'translate3d(650px, 0px, 0px)',
'-webkit-transition': '-webkit-transform 1s linear',
});
});
ブラウザが残りの処理を行います。 もちろん、この手法はアメリカを開くものではありませんが、一方で、iPhoneでの震えとけいれんはすべて完全に消えました。 おそらく、アニメーションの開始時にわずかなウィンクがありましたが、これは修正可能です。 指定したプロパティを初期変換値でCSSに明示的に登録する必要があります。
#slide {
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-transition: -webkit-transform 1s linear;
}
また、これらのプロパティを乱用して、行のすべての要素、特に写真に公開しないでください。 Mobile Safariがクラッシュする可能性があります。 したがって、この簡単な方法を使用すると、ハードウェアアクセラレーションをサポートするモバイルデバイス上でサイトを完璧に運用できます。
デモページ
デモでアーカイブする
この方法を使用して、タッチコントロール付きのスライダーとスライドショーの2つのプラグインを作成しました。 スライダーはほぼ準備ができているので、スライドショーを終了する必要がありますが、使用できます。 ドキュメントと説明付きのページはまだ作成されていません。 誰かが開発に役立つと思います。
スライダーとスライドショーのデモ
彼らとアーカイブ
パラメーターmobileMode： 'touchMargin'を使用してスライダーを呼び出し、その外観を確認するには、leftプロパティを使用します。
さらに、興味深いjQuery Enhanced Animateプラグインに言及する価値があります。これにより、一部のプロパティのアニメーションをWebkitアニメーションに即座に変換できます。 プラグインは完全には機能しませんが、注目に値します。