スムーズな画像遷移のための推奨テクニック

Question

私はスライドショーを作成しています。たとえばKen Burnsエフェクトのような滑らかな（サブピクセルの）画像の切り抜きやサイズ変更が必要です。

私は人々がさまざまなテクニックを使用しているのを見ます。

• CSSトランジション
• に埋め込まれたJavaScript requireanimationframe
• 画像：今日は最善のアプローチと考えられ、これらのいずれかが、実際には改善をもたらしていないだけで、都市伝説である場合にされているものを知って興味があると思いますキャンバス要素
• 他？

注：これらのテクニックのいくつかは古いブラウザではサポートされていません。私の質問は、最近のバージョン（IE9、Firefox 5など）のためのものです。

Answer 1

私は、CSSトランジションがあなたが望む効果の主要部分に良い答えとなると思います。

CSSトランジションは、要素の2つの状態間をスムーズに変更するように設計されています。

ケン・バーンズ効果の場合、例えば絶対位置にある2つの画像に幅の遷移を実行することで達成できます。

JavaScriptを使用してアニメーションを作成するのは面倒です。各フレームでDOMを操作する場合は、パフォーマンスが重くなる可能性があります。

キャンバス要素が問題なく動的にスケーラビリティがないため（パフォーマンスが特に問題）、キャンバスが最適なソリューションではないとも思います。

Answer 2

Javascript Performance Optimizationsで次の記事を参照してください：

それは5つの幅広い科目間で異なる性能の技術概要を説明：ホストオブジェクト（DOM）との相互作用を回避

1. を
2. 管理と積極的にあなたの依存を減らします
3. 規律されたイベントバインディング
4. 効率を最大化するあなたのイテレーションのNCYは
5. は、JavaScriptの辞書

ので（画像遷移は、セクション1、3、4にDOMオブジェクトブラウザにポインタ参照を特に使用している滑らかにするために、ほとんどを適用するものと友達になれますDOMを複数回トラバースする必要はありません）、DOM変更をバッチで適用し、反復の効率を最適化します。

しかし、5つのセクションはすべて、反応性の高いUIを作成するのに便利です