iOS 动画 ——仿继续拖动，查看更多

今天在和小伙伴在看一功能时，发现某个效果图很类似 淘宝的一个滑动，于是好奇的看了下淘宝和天猫的，先上效果图：

淘宝的滑动
天猫的滑动

之前觉的用 ViewController 应该更合适些，但细细看了上述两个效果后，觉的此处是用 View 的。
回来后很想尝试实现下，并注意 天猫 和 淘宝的效果图是有一点点不一样的。

  • 通过 View 尝试 （感觉淘宝是 View 做的）
  • 通过 ViewController 尝试 （感觉天猫是 ViewController 做的）
一、通过View 显示大致效果
View Detail And More

核心代码：

#import "ViewController.h"
#import "MJRefresh.h"

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define NAV_HEIGHT 64.0f
#define MOREVIEW_HEIGHT 40.0f

@interface ViewController () <UIScrollViewDelegate>

@property (nonatomic, strong) UIScrollView *upScrollerView;
@property (nonatomic, strong) UILabel *showMoreLabel;
@property (nonatomic, strong) UIScrollView *downScrollerView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.edgesForExtendedLayout = UIRectEdgeNone;
    [self addAndLayoutView];
    [self setUpRefreshShowUpView];
}

#pragma mark - Method
- (void)setUpRefreshShowUpView {
    // 稍微修改下 下拉的提示文字
    self.downScrollerView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self.downScrollerView.mj_header endRefreshing];
            [UIView animateWithDuration:0.3 animations:^{
                self.downScrollerView.frame = [self downViewFrame];
                self.upScrollerView.frame = [self normalViewFrame];
            }];
        });
    }];
}

#pragma mark - Private Method
// 直接 用 Frame 好了，先不添加 Masonry 库
- (CGRect)upViewFrame {
    return CGRectMake(0, -SCREEN_HEIGHT - NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT);
}
- (CGRect)normalViewFrame {
    return CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT);
}

- (CGRect)downViewFrame {
    return CGRectMake(0, SCREEN_HEIGHT - NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT);
}

#pragma mark - Delegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView.contentOffset.y > MOREVIEW_HEIGHT + NAV_HEIGHT) {
        [UIView animateWithDuration:0.3 animations:^{
            self.upScrollerView.frame = [self upViewFrame];
            self.downScrollerView.frame = [self normalViewFrame];
        }];
    }
}

#pragma mark - InitViewAndLayout
- (void)addAndLayoutView {
    self.view.backgroundColor = [UIColor grayColor];
    [self.view addSubview:self.upScrollerView];
    [self.upScrollerView addSubview:self.showMoreLabel];
    [self.view addSubview:self.downScrollerView];
}

#pragma mark - Getter
- (UIScrollView *)upScrollerView {
    if (!_upScrollerView) {
        _upScrollerView = [[UIScrollView alloc] initWithFrame:[self normalViewFrame]];
        _upScrollerView.delegate = self;
        _upScrollerView.backgroundColor = [UIColor redColor];
        _upScrollerView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT);
    }
    return _upScrollerView;
}

- (UILabel *)showMoreLabel {
    if (!_showMoreLabel) {
        _showMoreLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, SCREEN_HEIGHT - MOREVIEW_HEIGHT , SCREEN_WIDTH, MOREVIEW_HEIGHT)];
        _showMoreLabel.text = @"--上拉，显示更多--";
        _showMoreLabel.font = [UIFont systemFontOfSize:14];
        _showMoreLabel.textAlignment = NSTextAlignmentCenter;
    }
    return _showMoreLabel;
}

- (UIScrollView *)downScrollerView {
    if (!_downScrollerView) {
        _downScrollerView = [[UIScrollView alloc] initWithFrame:[self downViewFrame]];
        _downScrollerView.backgroundColor = [UIColor greenColor];
        _downScrollerView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT);
    }
    return _downScrollerView;
}

@end
二、通过ViewController 显示大致效果
VC More

核心代码：

#import "DetailViewController.h"
#import "SubMoreViewController.h"
#import "SubDetailViewController.h"

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
#define NAV_HEIGHT 64.0f
#define BOATTOM_VIEW_HEIGHT 40.0f

@interface DetailViewController ()

@property (nonatomic, strong) UIView *showDetailOrMoreView;
@property (nonatomic, strong) UIButton *addToCartButton;
@property (nonatomic, strong) SubMoreViewController *subMoreViewController;
@property (nonatomic, strong) SubDetailViewController *subDetailViewController;
@property (nonatomic, strong) UIViewController *currentViewController;

@end

@implementation DetailViewController

#pragma mark - Life Cycle
- (void)viewDidLoad {
    [super viewDidLoad];
    // View
    self.title = @"Detail";
    [self.view addSubview:self.showDetailOrMoreView];
    [self.view addSubview:self.addToCartButton];
    // Main ACtion
    [self setUpMainEvent];
}

#pragma mark - Private Method
- (void)setUpMainEvent {
    // 转场处的处理
    [self addChildViewController:self.subDetailViewController];
    [self addChildViewController:self.subMoreViewController];
    
    // 显示的 View
    [self.showDetailOrMoreView addSubview:self.subDetailViewController.view];
    self.currentViewController = self.subDetailViewController;
    
    // 向上拉的显示 More 和 向下啦显示 Deatail
    __weak typeof(self) weakSelf = self;
    self.subDetailViewController.showMoreVCBlock = ^{
        __strong typeof(self) strongSelf = weakSelf;
        strongSelf.title = @"More";
        [strongSelf replaceController:strongSelf.currentViewController newController:strongSelf.subMoreViewController];
    };
    
    self.subMoreViewController.showDetailVCBlock = ^{
        __strong typeof(self) strongSelf = weakSelf;
        strongSelf.title = @"Detail";
        [strongSelf replaceController:strongSelf.currentViewController newController:strongSelf.subDetailViewController];
    };
}

- (void)replaceController:(UIViewController *)oldController newController:(UIViewController *)newController {
    
    [self addChildViewController:newController];
    [self transitionFromViewController:oldController toViewController:newController duration:0.6 options:UIViewAnimationOptionTransitionNone  animations:nil completion:^(BOOL finished) {
        if (finished) {
            [newController didMoveToParentViewController:self];
            [oldController willMoveToParentViewController:nil];
            [oldController removeFromParentViewController];
            self.currentViewController = newController;
        }else{
            self.currentViewController = oldController;
        }
    }];
}

- (void)addToCartAction {
    NSLog(@"Click Add To Cart");
}

#pragma mark - Getter
- (SubMoreViewController *)subMoreViewController {
    if (!_subMoreViewController) {
        _subMoreViewController  = [[SubMoreViewController alloc] init];
        [_subMoreViewController.view setFrame:CGRectMake(0,0, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT -BOATTOM_VIEW_HEIGHT)];
    }
    return _subMoreViewController;
}

- (SubDetailViewController *)subDetailViewController {
    if (!_subDetailViewController) {
        _subDetailViewController  = [[SubDetailViewController alloc] init];
        [_subDetailViewController.view setFrame:CGRectMake(0,0, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT -BOATTOM_VIEW_HEIGHT)];
    }
    return _subDetailViewController;
}

- (UIView *)showDetailOrMoreView {
    if (!_showDetailOrMoreView) {
        _showDetailOrMoreView = [[UIView alloc] initWithFrame:CGRectMake(0,NAV_HEIGHT, SCREEN_WIDTH, SCREEN_HEIGHT - NAV_HEIGHT -BOATTOM_VIEW_HEIGHT)];
        _showDetailOrMoreView.backgroundColor = [UIColor grayColor];
    }
    return _showDetailOrMoreView;
}

- (UIButton *)addToCartButton {
    if (!_addToCartButton) {
        _addToCartButton = [UIButton buttonWithType:UIButtonTypeCustom];
        _addToCartButton.frame = CGRectMake(0, SCREEN_HEIGHT -BOATTOM_VIEW_HEIGHT, SCREEN_WIDTH, BOATTOM_VIEW_HEIGHT);
        [_addToCartButton setTitle:@"Add To Cart" forState:UIControlStateNormal];
        [_addToCartButton setBackgroundColor:[UIColor orangeColor]];
        [_addToCartButton addTarget:self action:@selector(addToCartAction) forControlEvents:UIControlEventTouchUpInside];
    }
    return _addToCartButton;
}

@end

总的来说，以上是大致实现了效果，View 和 ViewController 各有其优缺点，可以根据自己的需求来定，建议用ViewController的吧。
当然有很多细节可以挖掘，例如用 ViewController 的时候那个滑动的效果，系统的默认几种并不符合，如果需要效果更好一点需要自定义的。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,705评论 25赞 709
  • 我算哪根葱？！
    又两天没记了，开始写的时候并没想过要怎样的人气，其实就想给自己一个任务，坚持每天去做，并养成一个习惯，以便让自己不...
    江汐汐阅读 235评论 0赞 0
  • 给更生写信（7）
    《给更生写信》 01总有一些存在让人不畏惧孤独 02深夜的平静中透着幸福 03是啊，发生什么都不会感到不可思议 0...
    古树蚂蚁阅读 1,075评论 1赞 9
  • 2017.9.3
    今天上直落，等等大客户，来个大单砸我吧，早餐吃饼干，中午吃河粉，晚上吃炒饭，等了一整天，大客户都没有来，呜呜……欺...
    慧蘭阅读 168评论 0赞 0
  • 谈古
    泛泛银河星云史，浩浩河川柴薪人。 碧血黄沙青云甲，霜颜奇笔贤儒冠。
    冶心阅读 155评论 0赞 0