UICollectionVIew:在滚动时为单元格设置动画 [英] UICollectionVIew: Animate cells as they scroll in

问题描述

我希望我的 UICollectionView 中的项目在用户滚动列表时进行动画查看(我正在使用 UICollectionViewFlowLayout 的子类).

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).

我在布局管理器中指定位置，我希望能够指定一个初始变换并在正确的时间(当单元格首次出现在屏幕上时)将其应用到动画中.要查看我的意思，请查看 iOS 上的 Google Plus 应用程序.理想情况下，根据单元格的位置进行不同的变换.

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.

我似乎无法找到一种方法来找出何时显示单元格(不等同于 willDisplayCell，因为在 UITableView 上有)或任何关于位置的指针去这个.

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.

有什么建议吗?

您可以在此屏幕截图中大致了解 Google Plus 中的动画:

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

另外，看看 iPad 上的 iPhoto.我不知道他们是否使用了 UIcollectionView(可能不是，因为它在 iOS5 上工作)但这是我正在寻找的效果，照片似乎从右侧飞入.

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.

推荐答案

您可以独立于自定义布局来实现此效果.

You can achieve this effect independently of having a custom layout.

动画代码应该放在 collectionView:cellForItemAtIndexPath:

当一个单元格出列时，它的 frame 将被设置为您的布局中指定的内容.您可以将它作为单元格的最终 frame 存储在一个临时变量中.然后，您可以将 cell.frame 设置为屏幕外的初始位置，然后朝所需的最终位置设置动画.大致如下:

When a cell is dequeued, its frame will be set to what is specified in your layout. You can store it in a temporary variable as the final frame for the cell. You can then set the cell.frame to a initial position outside the screen, and then animate towards the desired final position. Something along the lines of:

- (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 以使单元格在更复杂的布局上从不同位置进行动画处理，以及与框架一起为其他属性设置动画，或应用变换.

The code above will animate cells on a horizontal UICollectionView, coming from the top of the screen, and from either side, depending on the scrolling direction. You could also check the current indexPath to have cells animating from different positions on more complicated layouts, as well as animate other properties along with the frame, or apply a transform.

这篇关于UICollectionVIew:在滚动时为单元格设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！