ios - UITableView 的自定义加载动画

Question

我正在尝试创建一个 UITableViewController，其中 tableview 上的加载动画应该使项目从侧面滑入。这些单元格的高度比默认单元格高，大约大 5-7 倍。我想要一个像 Google+ 加载动画那样的动画，可以在 android 上看到。 (卡片动画)。

我想象的是将 TableView 类子类化，重写一个加载方法，当它们被引入显示器时显示新项目，然后使用 Spring 动画同时旋转单元格，同时它的 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

这是(我相信)您所描述内容的一个功能齐全的示例。我打开了一个空的单 View 项目，删除了 Storyboard中的 View 控件，并简单地创建了一个 UITableViewController 并将其类设置为我在下面创建的 UITableViewController 子类的类。

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

#import "weeeTables.h"

@interface weeeTables ()


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

@end

shownIndexes 将包含已显示 View 的索引，因此我们不会重复向上滚动的动画。 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;
}

上面 block 中的所有内容对于 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 列表中，如果不在我们添加它，然后为创建一个局部变量此当前单元格内容 View 。

然后将该 contentView 的转换设置为我们的初始转换(我们在 ViewDidLoad 中设置)。这会在用户可见之前将单元格移到我们的起始位置，然后我们将转换动画回身份转换。我那里也有不透明度，只是为了它。

希望对您有所帮助!