21

I would like items in my UICollectionView to animate in to view as the user scrolls through the list (I am using a subclass of UICollectionViewFlowLayout).

I specify the position in the Layout Manager, what I would like to be able to do is to also specify an initial transform and have that applied in an animation at the correct time (when the cell first appears on screen). To see the effect I mean, check out the Google Plus app on iOS. Ideally a different transform depending on the location of the cell.

I can't seem to find a way to find out when a cell is displayed (no equivalent of willDisplayCell as there is on UITableView) or any pointers on where to go for this.

Any suggestions?

You can just about make out the animation in Google Plus in this screen shot: Example in the Google Plus App

Also, take a look at iPhoto on the iPad. I don't know if they're using a UIcollectionView (probably not, as it worked on iOS5) but this is the sort if effect I'm looking for, the photos appear to fly in from the right.

4

3 に答える 3

36

この効果は、カスタム レイアウトとは関係なく実現できます。

アニメーションコードは中に入る必要がありますcollectionView:cellForItemAtIndexPath:

セルがデキューされるとframe、レイアウトで指定されたものに設定されます。frameセルの最終値として一時変数に格納できます。次に、 を画面外の初期位置に設定しcell.frame、目的の最終位置に向かってアニメーション化できます。次のようなもの：

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {

    UICollectionView *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];

    CGRect finalCellFrame = cell.frame;
    //check the scrolling direction to verify from which side of the screen the cell should come.
    CGPoint translation = [collectionView.panGestureRecognizer translationInView:collectionView.superview];
    if (translation.x > 0) {
        cell.frame = CGRectMake(finalCellFrame.origin.x - 1000, - 500.0f, 0, 0);
    } else {
        cell.frame = CGRectMake(finalCellFrame.origin.x + 1000, - 500.0f, 0, 0);
    }

    [UIView animateWithDuration:0.5f animations:^(void){
        cell.frame = finalCellFrame;
    }];

    return cell;
}

上記のコードはUICollectionView、スクロール方向に応じて、画面の上部と両側から来る水平方向のセルをアニメーション化します。現在をチェックしてindexPath、より複雑なレイアウトのさまざまな位置からセルをアニメーション化したり、フレームとともに他のプロパティをアニメーション化したり、変換を適用したりすることもできます。

于 2014-02-09T20:40:52.963 に答える
5

initialLayoutAttributesForAppearingItemAtIndexPath:コレクション ビュー レイアウトでオーバーライドする必要があります。ここでは、セルが表示された後に実際の属性にアニメーション化されるレイアウト属性アイテム (変換を含む) に任意の属性を設定できます。

標準のレイアウト属性オブジェクトで十分なオプションが得られない場合は、それをサブクラス化し、追加の属性を追加applyLayoutAttributes:し、セルをオーバーライドして追加のプロパティを取得できます。

これは、コレクション ビューにセルを追加する場合にのみ機能します。

コレクション ビューを下にスクロールするときにセルに変換を適用するには、セル ( cellForItem...) に直接適用するか、レイアウト属性 (おそらくinitialTransform. レイアウト属性をセルに適用するときは、 をチェックしてinitialTransform適用し、ID に設定し、アニメーションをトリガーして ID 変換に移動するため、セルが最初に画面にスクロールされたときにのみ適用されます。 . 私はこのようなものを実装していません。これは、私がどのように行うかについての推測にすぎません。

于 2013-07-20T18:46:13.823 に答える