5

私が出会った最も印象的なiOSアプリの1つは、その優れたデザイン、信じられないほどのインターフェース、およびアニメーションの創造的な使用によるJetsetterです。このアプリの私のお気に入りのコンポーネントの1つは、ホテルや会場用のティーザー写真インターフェースです。最小化された写真のスライドショーを提供しますが、全体を表示したい場合は、それをクリックすると拡大して画像の拡大版が表示されます。これが実際に動作しているぼやけたビデオをここで見ることができます。

似たようなものを再現することに興味があります。私はMHPagingScrollview(より大きな写真ビューアがどのように機能するか)のようなページギャラリーをよく知っていますが、私が理解しようとしているのは、遷移を処理する適切な方法です。画像のケンバーンズ効果を処理するライブラリも見ました。ただし、明確ではないのは、個別のViewControllerがあるかどうかです。

これは2つの別々のViewController間の移行ですか?または、最小化および最大化された写真ビューアは同じコントローラーの一部になりますか?似たようなものを最も効率的に複製するにはどうすればよいですか?前後を説明するために、以下のスクリーンショットを埋め込みました。ただし、上記のリンク先のビデオは、この移行を最も効果的に示しています。

ここに画像の説明を入力してください

4

1 に答える 1

12

Jetsetterのモバイルエンジニアはこちら。これらは2つの別個のコントローラーですが、遷移アニメーションは最初のコントローラーで発生します。フローは次のとおりです。

  1. ユーザーが小さい写真をタップします。
  2. フルサイズの画像を含むトランジションビューは、小さい画像の上に直接配置されます。
  3. トランジションビューは、画面の境界に合わせてアニメーション化されます。
  4. フォトビューアコントローラーは、アニメーションなしのモーダルとして表示され、1つのシームレスなアニメーションで効果を完成させます。

モーダルコントローラーを閉じると、効果が逆になります。

秘訣はトランジションビューにあります。imageViewを含むUIViewサブクラス(clipsToBoundsが有効になっている)を作成しました。トランジションビューの境界が拡大してimageViewが表示されるため、アニメーション中に最終的な画像に歪みが生じることはありません。

于 2012-07-27T19:51:14.397 に答える