就是首页切换的时候pageControl 小圆点 有那种拉扯的感觉,这种效果是怎么实现的啊?谁有类似的开源项目 能告诉我 来学习学习吗?
看了一下小圆点 简单实现了下
#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 稍微改动下就好了