10

s間の遷移を含む、インタラクティブでアニメーション化されたビュー コントローラーの遷移を可能にする新しい iOS 7 API を処理しようとしていますUICollectionViewLayout。

WWDC 2013 のサンプル コード「iOS-CollectionViewTransition」を取得して変更しました。これはhttps://github.com/timarnold/UICollectionView-Transition-Demoにあります。

元のデモは、私が見つけたときは動作していませんでしたが、Apple Developer アカウントでアクセスできます。

私のバージョンのアプリは、2 つのレイアウトを持つコレクション ビューを表示します。どちらのUICollectionViewFlowLayoutレイアウトも異なるプロパティを持ちます。

最初のレイアウトでセルをタップすると、2 番目のレイアウトに適切にアニメーション化されます。これには、重要なことに、新しいレイアウトでスクロールされるタップされた項目が含まれます。最初は、適切なセルが表示されるように新しいコレクション ビューがそのコンテンツ オフセットを設定する方法を知っていることに戸惑いましたが、表示してselectedいるコレクション ビューのプロパティに基づいてこれを行うことを学びました。

最初のレイアウトでアイテムをピンチすると、 UICollectionViewTransitionLayout、UIViewControllerAnimatedTransitioning、およびを使用UIViewControllerInteractiveTransitioningして、新しいレイアウトにもアニメーションが表示されます。これは機能しますが、ピンチされたセルは新しいレイアウトまたはトランジション レイアウトでスクロールされません。

selectedさまざまな場所でピンチオンセルのプロパティを設定しようとしましたが（項目をタップして新しいView Controllerをプッシュするときに説明された動作を模倣しようとしました）、役に立ちませんでした。

この問題を解決する方法についてのアイデアはありますか?

4

2 に答える 2

19

トランジション中に自分自身を操作できます。これにより、組み込みのアニメーションcontentOffsetよりもきめ細かい制御が可能になります。UICollectionView's

たとえば、次のようにトランジション レイアウトを定義して、「to」オフセットと「from」オフセットの間を補間できます。物事をどのように終わらせたいかに基づいて、「to」オフセットを自分で計算する必要があります。

@interface MyTransitionLayout : UICollectionViewTransitionLayout
@property (nonatomic) CGPoint fromContentOffset;
@property (nonatomic) CGPoint toContentOffset;
@end

#import "MyTransitionLayout.h"
@implementation MyTransitionLayout

- (void) setTransitionProgress:(CGFloat)transitionProgress
{
    super.transitionProgress = transitionProgress;
    CGFloat f = 1 - transitionProgress;
    CGFloat t = transitionProgress;
    CGPoint offset = CGPointMake(f * self.fromContentOffset.x + t * self.toContentOffset.x, f * self.fromContentOffset.y + t * self.toContentOffset.y);
    self.collectionView.contentOffset = offset;
}

@end

注意すべきことの 1 つはcontentOffset、遷移が完了すると「開始」値にリセットされることですが、完了ブロックの「終了」オフセットに戻すことでそれを無効にすることができます。startInteractiveTransitionToCollectionViewLayout

CGPoint toContentOffset = ...;
[self.collectionViewController.collectionView startInteractiveTransitionToCollectionViewLayout:layout completion:^(BOOL completed, BOOL finish) {
    if (finish) {
        self.collectionView.contentOffset = toContentOffset;
    }
}];

アップデート

これの実装と実際の例を新しい GitHub ライブラリTLLayoutTransitioningに投稿しました。この例はインタラクティブではなく、 よりも改善されたアニメーションを示すことを目的としてsetCollectionViewLayout:animated:completionいますが、上記の手法と組み合わせてインタラクティブなトランジション API を利用しています。TLTransitionLayoutクラスを見て、 「例」ワークスペースで「サイズ変更」の例を実行してみてください。

おそらくTLTransitionLayoutあなたが必要とするものを達成することができます。

更新 2

TLLayoutTransitioning ライブラリにインタラクティブな例を追加しました。Examples ワークスペースで"Pinch" の例を実行してみてください。これは、表示されているセルをグループとしてピンチします。他のセルがデフォルトの線形パスをたどる間、セルが遷移中に指をたどるように個々のセルをつまむ別の例に取り組んでいます。

更新 3

最近、コンテンツ オフセットの配置オプションを追加しました: Minimal、Center、Top、Left、Bottom、Right。また、Warren Moore のAHEasing ライブラリtransitionToCollectionViewLayout:のおかげで、30 以上のイージング関数がサポートされるようになりました。

于 2013-10-08T20:43:54.387 に答える