UITableView的自定义加载动画

Question

我正在尝试创建一个UITableViewController，在这里，表视图上的加载动画应该使项目从侧面滑入。这些细胞的高度比默认的细胞高，大约大5-7倍。我想要一个像Google+加载动画，在安卓上看到的动画。(卡片动画)

我设想的是子类TableView类，覆盖一个加载方法，当它们被引入到显示器上时显示新的项，然后使用弹簧动画同时旋转单元格，同时它的x和y值会逐渐改变。

我在this answer中尝试了这段代码，但并没有完全发挥作用。详细阐述和解释这一答复也将是非常有益的。代码：

- (void)animate
{
[[self.tableView visibleCells] enumerateObjectsUsingBlock:^(UITableViewCell *cell, NSUInteger idx, BOOL *stop) {
    [cell setFrame:CGRectMake(320, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)];
    [UIView animateWithDuration:1 animations:^{
        [cell setFrame:CGRectMake(0, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)];
    }];
}];
}

任何帮助都将不胜感激！埃里克

Answer 1

下面是一个功能齐全的例子，说明了(我相信)您所描述的内容。我打开了一个空的单一视图项目，删除了情节提要中的视图控件，只创建了一个UITableViewController，并将其类设置为我在下面创建的UITableViewController子类的类。

头文件中没有添加任何内容，所以我排除了它

#import "weeeTables.h"

@interface weeeTables ()


@property (nonatomic, strong) NSMutableSet *shownIndexes;
@property (nonatomic, assign) CATransform3D initialTransform;

@end

shownIndexes将包含在已经显示的视图的索引中，因此我们不会重复滚动的动画。initialTransform属性是单元格初始状态的转换(在它出现在屏幕前的位置)

@implementation weeeTables

- (void)viewDidLoad {
[super viewDidLoad];

CGFloat rotationAngleDegrees = -30;
CGFloat rotationAngleRadians = rotationAngleDegrees * (M_PI/180);
CGPoint offsetPositioning = CGPointMake(-20, -20.0);

CATransform3D transform = CATransform3DIdentity;
transform = CATransform3DRotate(transform, rotationAngleRadians, -50.0, 0.0, 1.0);
transform = CATransform3DTranslate(transform, offsetPositioning.x, offsetPositioning.y, -50.0);
_initialTransform = transform;

_shownIndexes = [NSMutableSet set];
}

在ViewDidLoad中，我们设置了初始转换的值，我使用了一些值，并鼓励您做同样的事情来获得您想要的效果，但是单元格当前从左下角移动。

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return 20;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
return 385;
}




- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"weeCell" forIndexPath:indexPath];


return cell;
}

上面块中的所有内容对于UITableViewController子类来说都是非常典型的，并且与添加动画没有什么特别的关系，我只是设置了一些静态数字来添加大量的单元格来滚动，这里唯一的唯一值是单元格标识符，正如您所看到的，它有一个经过仔细考虑的名称。

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell  forRowAtIndexPath:(NSIndexPath *)indexPath
{

if (![self.shownIndexes containsObject:indexPath]) {

    [self.shownIndexes addObject:indexPath];
    UIView *weeeeCell = [cell contentView];

    weeeeCell.layer.transform = self.initialTransform;
    weeeeCell.layer.opacity = 0.8;

    [UIView animateWithDuration:.65 delay:0.0 usingSpringWithDamping:.85 initialSpringVelocity:.8 options:0 animations:^{
        weeeeCell.layer.transform = CATransform3DIdentity;
        weeeeCell.layer.opacity = 1;
    } completion:^(BOOL finished) {}];
}
}
@end

下面这个家伙将所有的内容组合在一起，首先我们检查将要显示的单元格是否已经在shownIndexes列表中，如果不是，那么为当前的单元格内容视图创建一个局部变量。

然后将contentView上的转换设置为初始转换(在ViewDidLoad中设置)。这会将单元格移到用户可见的起始位置，然后将该转换动画回标识转换。我在里面也有不透明的地方，就为了这该死的东西。

希望能帮上忙！

Answer 2

我会尝试使用tableView:willDisplayCell:forRowAtIndexPath:

您可以将UITableViewCell设置为初始的屏幕外帧，然后异步初始化该单元格的动画。

我已经测试过它，它使用Xcode Master/Detail模板工作

override func tableView(tableView: UITableView, willDisplayCell cell: UITableViewCell, forRowAtIndexPath indexPath: NSIndexPath) {
        let frame = CGRectMake(-cell.frame.size.width, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)
        cell.frame = frame

        UIView.animateWithDuration(1, delay: 0.1, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
            let endFrame = CGRectMake(100, cell.frame.origin.y, cell.frame.size.width, cell.frame.size.height)
            cell.frame = endFrame
        }) { (foo:Bool) -> Void in
            //
        }
    }

您只需要为不同的表示情况添加特殊的大小写即可。有时，当您再次回到视图时，或者在单元格从视图上滚动回来之后，将调用此方法。