web-dev-qa-db-ja.com

カスタムUIViewController遷移-iOS 11のappstoreアプリの本日のタブのように

最初のUIViewControllerにカスタムVCトランジションを作成する最良の方法は何ですか。たとえば、画像があり、それをタップすると、画面の上部に表示され、いくつか他のUIコンポーネント(ラベルやtextViewsなど)が画面に追加されますか?

App Storeの新しい「今日」タブでAppleが行ったことのようなものを実現したいと思います。

Example

最善の方法は何ですか?

ありがとうございました :)

13
F.SO7

UIViewControllerAnimatedTransitioningUIPercentDrivenInteractiveTransitionなどのネイティブの方法で、func animateTransition(using transitionContext: UIViewControllerContextTransitioning)のすべてのアニメーション/遷移を制御します。

https://github.com/aunnnn/AppStoreiOS11InteractiveTransition

preview

アニメーション中に目的のビューとタップされたセルを非表示にします。カードセルとまったく同じに見える新しいカードコンテンツビューを作成し、代わりにアニメーションに使用します。

アニメーションの場合、AutoLayout制約をアニメーション化することで、滑らかに見えるようにすることができます(たとえば、背景画像の拡大中にラベルが移動します)。カードの角の周りにそれらすべてのラベルを固定し、カードビューの幅と高さの制約をアニメーション化すると、アニメーション全体に固定されます。

背景画像ビューのcontentMode.centerにして、静止したままにします(最初にサイズを変更します)。

コンテンツ(テキストビューなど)revealingの部分については、宛先ビュー全体を(非表示にする前に)スナップショットを作成し、アニメーションに使用するカードビューの下に追加できます。もう一度、コンテンツのスナップショットの左、上、右をカードビューに固定しますが、コンテンツがカードの真下に表示されるように固定高さアンカーを使用します。理想的には、カードとこのスナップショットを保持するコンテナが必要です。

ぼかし効果については、UIBlurEffectを含むUIVisualEffectをカードの下に追加し、そのアルファを一緒にアニメーション化します。

cornerRadiusは現在アニメート可能であるため、簡単です。アニメーションカードビューのcornerRadiusを元のセルと一致するように設定し、ゼロにアニメーション化します。

コードでよりよく説明される詳細があります:

https://github.com/aunnnn/AppStoreiOS11InteractiveTransition

このリポジトリには、アニメーションを表示する部分とインタラクティブな閉じる部分の両方が含まれています。ただし、まったく同じではありません。

または、チェックアウトしたい場合 私の記事


Extra:上向きの跳ねるアニメーション

最初は、UIView.animate(withDuration: delay: usingSpringWithDamping: initialSpringVelocity: options: animations:を使用してカードビューのエッジをウィンドウ全体にアニメーション表示するだけでアニメーションを作成できると思っていましたが、それは間違っていました。エッジでスプリングアニメーションを使用するだけでは、アニメーションは元のアニメーションとまったく同じに見えません。

アニメーションをApp Storeのバージョンにできるだけ近づけるには、次のようにする必要があります垂直スプリングアニメーションをカード拡張アニメーションから分離します =。これは、animatingCardViewを再度保持するための特別なコンテナビューが存在することを意味します。コンテナ内のanimatingCardViewの幅と高さの制約を線形曲線でアニメーション化しながら、スプリングアニメーションを使用してコンテナ全体を目的地まで垂直にアニメーション化します。*

9
aunnnn

https://github.com/lkzhao/Hero を使用してこの動作を行うことができます

4
Pierre Yao