iOS 陌陌客户端 首页切换的那个 类似pageControl 小圆点 切换的动画 怎么实现的？

Question

就是首页切换的时候pageControl 小圆点 有那种拉扯的感觉，这种效果是怎么实现的啊？谁有类似的开源项目 能告诉我 来学习学习吗？

Answer 1

看了一下小圆点 简单实现了下

#import "ViewController.h"

#define ITEM_SIZE   10
#define DISTANCE    20

@interface ViewController ()<UIScrollViewDelegate>
@end

@implementation ViewController {
    UIView *_vCircle;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    UIScrollView *sv = [UIScrollView new];
    sv.delegate = self;
    [self.view addSubview:sv];

    [sv makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(self.view);
    }];

    UIView *vContain = [UIView new];
    vContain.backgroundColor = [UIColor grayColor];
    [sv addSubview:vContain];

    [vContain makeConstraints:^(MASConstraintMaker *make) {
        make.edges.equalTo(sv);
        make.height.equalTo(self.view.height);
        make.width.equalTo(self.view).multipliedBy(2);
    }];

    _vCircle = [UIView new];
    _vCircle.backgroundColor = [UIColor redColor];
    _vCircle.layer.masksToBounds = YES;
    _vCircle.layer.cornerRadius = ITEM_SIZE / 2.;
    [self.view addSubview:_vCircle];

    [_vCircle makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.equalTo(self.view);
        make.top.equalTo(20);
        make.size.equalTo(CGSizeMake(ITEM_SIZE, ITEM_SIZE));
    }];
}

///基本思路是在横向滑动过程中改变小圆点的宽和X坐标
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat percent = scrollView.contentOffset.x / scrollView.contentSize.width * 2;
    percent = MIN(1, MAX(0, percent));

///小圆点是先变宽 移动到一半后开始恢复
    CGFloat scalePercent = percent < .5 ? percent : 1 - percent;

    [_vCircle updateConstraints:^(MASConstraintMaker *make) {
        make.width.equalTo(ITEM_SIZE + ITEM_SIZE * scalePercent);
        make.centerX.equalTo(DISTANCE * percent);
    }];
    [_vCircle layoutIfNeeded];
}

@end

顺手写的 如果没有masonry 稍微改动下就好了