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

问题描述

我希望我的 UICollectionView 中的项目能够在用户滚动列表时动画显示（我使用的是 UICollectionViewFlowLayout <的子类/ code>）。

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：

当一个单元格出列时，它的框架将设置为布局中指定的内容。您可以将其存储在临时变量中作为单元格的最终框架。然后，您可以将 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屋！