QQ20180714-233355-HD.gif
现在的任务一直都是搞h5，导致ios写的不顺手了，毕竟ios才是老本行，搞了个卡片效果。
卡片效果，主要需要注意的地方是副卡的形变，这个拿CGAffineTransformMakeScale搞。
创建 scrollview
-(instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
_XHScrollView = [[UIScrollView alloc]initWithFrame:frame];
_XHScrollView.backgroundColor = [UIColor clearColor];
_XHScrollView.delegate = self;
[self addSubview:_XHScrollView];
}
return self;
}
初始化数据源
-(void)initCard:(NSArray *)cardArr{ //数据源
CGFloat space = 0;
CGFloat width = 0;
CGFloat viewWidth = 0;
for (UIView *cardView in cardArr) {
NSInteger index = [cardArr indexOfObject:cardView];
if (index == 0) {
viewWidth = cardView.bounds.size.width;
}
space = self.frame.size.width - viewWidth;
width = space/4+viewWidth;
cardView.frame = CGRectMake(space/2 + (cardView.frame.size.width + space/4)*index, 0, viewWidth, cardView.frame.size.height);
//形变
CGFloat y = index *width;
CGFloat value = (0-y)/width;
CGFloat scale = fabs(cos(fabs(value)*M_PI/4));
cardView.transform = CGAffineTransformMakeScale(1.0, scale);
[_XHScrollView addSubview:cardView];
}
_XHScrollView.contentSize = CGSizeMake((space/2 + width*cardArr.count)+space/4, _XHScrollView.frame.size.height);
}
滚动方法 副卡形变
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{//滑动
CGFloat offset = scrollView.contentOffset.x;
if (offset < 0) {
return;
}
CGFloat space = 0;
CGFloat width = 0;
CGFloat viewWidth = 0;
for (UIView *cardView in _XHScrollView.subviews) {
NSInteger index = [_XHScrollView.subviews indexOfObject:cardView];
if (index == 0) {
viewWidth = cardView.bounds.size.width;
}
space = self.frame.size.width - viewWidth;
width = space/4+viewWidth;
//形变
CGFloat y = index *width;
CGFloat value = (offset-y)/width;
CGFloat scale = fabs(cos(fabs(value)*M_PI/4));
cardView.transform = CGAffineTransformMakeScale(1.0, scale);
}
float a = offset/(viewWidth + space/4); //当前选中的是哪个。
NSLog(@"%lf",offset);
NSLog(@"%lf",viewWidth+space/4);
if (a - (int)a > 0.5) {
_currentIndex = (int)a + 1;
} else {
_currentIndex = (int)a;
}
}
优化主卡居中
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
[self sendCardCenter];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
[self sendCardCenter];
}
- (void)sendCardCenter {
float space = 0;
float viewWidth = 0;
for (UIView *view in _XHScrollView.subviews) {
NSInteger index = [_XHScrollView.subviews indexOfObject:view];
if (index == 0) {
viewWidth = view.frame.size.width;
}
space = self.frame.size.width - viewWidth;
}
[_XHScrollView scrollRectToVisible:CGRectMake(_currentIndex*(viewWidth + space/4), 0, _XHScrollView.frame.size.width, _XHScrollView.frame.size.height) animated:YES];//
}
看完上面可能会有写疑惑.这里是算比例的地方。
CGFloat y = index *width;
CGFloat value = (offset-y)/width;
CGFloat scale = fabs(cos(fabs(value)*M_PI/4));
这里是这样的。width我们比作三角形中最长的那条边比作c，offset-y我们比作三角形小角度旁边的那条边b.那么我们要的比例就是b/c。
1537155088521.jpg
我们以index == 1来举例，随着offset越来越大，value越来越小，但是我们需要第二个卡片scale越来越大，所以我们用cos来做这个事情。
