最初のUIViewController
にカスタムVC
トランジションを作成する最良の方法は何ですか。たとえば、画像があり、それをタップすると、画面の上部に表示され、いくつか他のUIコンポーネント(ラベルやtextViewsなど)が画面に追加されますか?
App Storeの新しい「今日」タブでAppleが行ったことのようなものを実現したいと思います。
最善の方法は何ですか?
ありがとうございました :)
UIViewControllerAnimatedTransitioning
、UIPercentDrivenInteractiveTransition
などのネイティブの方法で、func animateTransition(using transitionContext: UIViewControllerContextTransitioning)
のすべてのアニメーション/遷移を制御します。
https://github.com/aunnnn/AppStoreiOS11InteractiveTransition
アニメーション中に目的のビューとタップされたセルを非表示にします。カードセルとまったく同じに見える新しいカードコンテンツビューを作成し、代わりにアニメーションに使用します。
アニメーションの場合、AutoLayout制約をアニメーション化することで、滑らかに見えるようにすることができます(たとえば、背景画像の拡大中にラベルが移動します)。カードの角の周りにそれらすべてのラベルを固定し、カードビューの幅と高さの制約をアニメーション化すると、アニメーション全体に固定されます。
背景画像ビューのcontentMode
を.center
にして、静止したままにします(最初にサイズを変更します)。
コンテンツ(テキストビューなど)revealingの部分については、宛先ビュー全体を(非表示にする前に)スナップショットを作成し、アニメーションに使用するカードビューの下に追加できます。もう一度、コンテンツのスナップショットの左、上、右をカードビューに固定しますが、コンテンツがカードの真下に表示されるように固定高さアンカーを使用します。理想的には、カードとこのスナップショットを保持するコンテナが必要です。
ぼかし効果については、UIBlurEffectを含むUIVisualEffectをカードの下に追加し、そのアルファを一緒にアニメーション化します。
cornerRadius
は現在アニメート可能であるため、簡単です。アニメーションカードビューのcornerRadiusを元のセルと一致するように設定し、ゼロにアニメーション化します。
コードでよりよく説明される詳細があります:
https://github.com/aunnnn/AppStoreiOS11InteractiveTransition
このリポジトリには、アニメーションを表示する部分とインタラクティブな閉じる部分の両方が含まれています。ただし、まったく同じではありません。
または、チェックアウトしたい場合 私の記事
最初は、UIView.animate(withDuration: delay: usingSpringWithDamping: initialSpringVelocity: options: animations:
を使用してカードビューのエッジをウィンドウ全体にアニメーション表示するだけでアニメーションを作成できると思っていましたが、それは間違っていました。エッジでスプリングアニメーションを使用するだけでは、アニメーションは元のアニメーションとまったく同じに見えません。
アニメーションをApp Storeのバージョンにできるだけ近づけるには、次のようにする必要があります垂直スプリングアニメーションをカード拡張アニメーションから分離します =。これは、animatingCardView
を再度保持するための特別なコンテナビューが存在することを意味します。コンテナ内のanimatingCardView
の幅と高さの制約を線形曲線でアニメーション化しながら、スプリングアニメーションを使用してコンテナ全体を目的地まで垂直にアニメーション化します。*
https://github.com/lkzhao/Hero を使用してこの動作を行うことができます