objective-c - 我应该如何重新创建 iOS 主屏幕打开文件夹动画？

Question

起初我认为这不会太难，但事实证明它比我想象的要多一些。

目前我的代码基于此:https://github.com/jwilling/JWFolders .但是，它不是很干净，最大的问题是每次打开文件夹时都会截取屏幕截图(renderInContext: 对 CPU 造成很大负担，因此 fps 非常低)。除此之外，此实现看起来并不像 Apple 动画那样干净和精美。

Apple 设法实现了不滞后的像素完美动画。我也想这样做!解决此问题的最佳方法是什么/您将如何做到这一点 - 一个编码清晰、美观且流畅的动画？目前，我的动画在所有这些方面都欠缺，我不知道如何才能做得更好(就像 Apple 那样)。

-

我不是在乞求代码，只是一个最好的方法/方法。但是，如果您想继续编写代码，那么我绝不会拒绝(这绝对值得一试)!!

Answer 1

我会将 Springboard 分成几个 View ，每个 View 都是一排图标。
如果单击文件夹图标，我将为所有以下 View 设置动画以上下移动以为文件夹内容腾出位置。同时，我会添加一个代表文件夹内容的 subview ，并在必要时以相同的速度对其大小和位置进行动画处理。

为了支持横跨整个屏幕的背景图像，我会将其切割成多个部分并将这些部分作为背景 ImageView 添加到每一行的 View 中。

---

我写了一个快速而肮脏的示例代码，动画从任何点击位置开始，也可以作为 complete project on github 获得.

@interface ViewController ()

@property (nonatomic, strong) UIView *upperView;
@property (nonatomic, strong) UIView *lowerView;

@property (nonatomic, strong) UIImageView *upperImageView;
@property (nonatomic, strong) UIImageView *lowerImageView;

@property (nonatomic, strong) UIView *folderContentsView;

@property (nonatomic, assign) CGRect startRect;
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIImage *bgImg = [UIImage imageNamed:@"bg.png"];
    self.upperImageView = [[UIImageView alloc] initWithImage:bgImg];
    self.lowerImageView = [[UIImageView alloc] initWithImage:bgImg];
    [self.upperImageView setContentMode:UIViewContentModeTop];
    [self.lowerImageView setContentMode:UIViewContentModeTop];

    self.upperView = [[UIView alloc] initWithFrame:self.upperImageView.frame];
    self.lowerView = [[UIView alloc] initWithFrame:self.lowerImageView.frame];
    [self.upperView addSubview:_upperImageView];
    [self.lowerView addSubview:_lowerImageView];

    [self.view addSubview:_lowerView];
    [self.view addSubview:_upperView];

    UITapGestureRecognizer *upperTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                                         action:@selector(openOverlay:)];
    UITapGestureRecognizer *lowerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                                         action:@selector(openOverlay:)];

    [self.upperView setUserInteractionEnabled:YES];
    [self.upperView addGestureRecognizer:upperTapRecognizer];
    [self.upperView setClipsToBounds:YES];

    [self.lowerView setUserInteractionEnabled:YES];
    [self.lowerView addGestureRecognizer:lowerTapRecognizer];
    [self.lowerView setClipsToBounds:YES];

    self.folderContentsView = [[UIView alloc] initWithFrame:CGRectZero];
    self.folderContentsView.backgroundColor = [UIColor redColor];
    UITapGestureRecognizer *closeTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self
                                                                                         action:@selector(closeOverlay:)];
    [self.folderContentsView addGestureRecognizer:closeTapRecognizer];
    [self.view addSubview:self.folderContentsView];

    [self.folderContentsView addSubview:[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"bgFolder.png"]]];
    [self.folderContentsView setClipsToBounds:YES];

    self.startRect = [self.upperView frame];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

-(void)openOverlay:(UITapGestureRecognizer *) sender
{
    [self.upperView setUserInteractionEnabled:NO];
    [self.lowerView setUserInteractionEnabled:NO];
    CGPoint location = [sender locationInView:sender.view];

    self.folderContentsView.frame = CGRectMake(0, location.y,
                                    _lowerView.frame.size.width, 0);
    self.lowerView.frame = CGRectMake(0, location.y,
                                      _lowerView.frame.size.width, _lowerView.frame.size.height);
    self.upperView.frame = CGRectMake(0, 0,
                                      _upperView.frame.size.width, location.y);
    self.lowerImageView.frame = CGRectMake(_lowerImageView.frame.origin.x, -location.y,
                                           _lowerImageView.frame.size.width, _lowerImageView.frame.size.height);

    [UIView animateWithDuration:.5 animations:^{
        self.folderContentsView.frame = CGRectMake(0, location.y,
                                    _lowerView.frame.size.width, 200);
        self.lowerView.frame = CGRectOffset(_lowerView.frame, 0, 200);
    }];    
}

-(void) closeOverlay:(UITapGestureRecognizer*) sender
{
    [UIView animateWithDuration:.5 animations:^{
        self.lowerView.frame = CGRectOffset(_lowerView.frame, 0, -200);
        self.folderContentsView.frame = CGRectMake(0, self.folderContentsView.frame.origin.y,
                                        self.folderContentsView.frame.size.width, 0);
    } completion:^(BOOL finished) {
        [self.upperView setUserInteractionEnabled:YES];
        [self.lowerView setUserInteractionEnabled:YES];
        self.upperView.frame = self.startRect;
    }];
}


@end

两个 View 具有相同的图层背景。如果检测到点击，则两个 View 都会调整大小，以便上部 View 在点击的 y 坐标处结束，而下部 View 从那里开始。添加到 lowerView 的 UIImageView 向相反方向移动，以便图像保持原位。

现在 lowerView 向下滑动，同时添加 contentView 并以相同的速度调整大小。

如您所见，不需要图像渲染或其他强硬操作。只是 UIView 动画。