QQ20180714-233355-HD.gif
現(xiàn)在的任務(wù)一直都是搞h5，導(dǎo)致ios寫的不順手了，畢竟ios才是老本行，搞了個(gè)卡片效果。
卡片效果，主要需要注意的地方是副卡的形變，這個(gè)拿CGAffineTransformMakeScale搞。
創(chuàng)建 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;
}
初始化數(shù)據(jù)源
-(void)initCard:(NSArray *)cardArr{ //數(shù)據(jù)源
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);
}
滾動(dòng)方法 副卡形變
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{//滑動(dòng)
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); //當(dāng)前選中的是哪個(gè)。
NSLog(@"%lf",offset);
NSLog(@"%lf",viewWidth+space/4);
if (a - (int)a > 0.5) {
_currentIndex = (int)a + 1;
} else {
_currentIndex = (int)a;
}
}
優(yōu)化主卡居中
- (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];//
}
看完上面可能會(huì)有寫疑惑.這里是算比例的地方。
CGFloat y = index *width;
CGFloat value = (offset-y)/width;
CGFloat scale = fabs(cos(fabs(value)*M_PI/4));
這里是這樣的。width我們比作三角形中最長(zhǎng)的那條邊比作c，offset-y我們比作三角形小角度旁邊的那條邊b.那么我們要的比例就是b/c。
1537155088521.jpg
我們以index == 1來(lái)舉例，隨著offset越來(lái)越大，value越來(lái)越小，但是我們需要第二個(gè)卡片scale越來(lái)越大，所以我們用cos來(lái)做這個(gè)事情。
