『ios』动画篇-卡片效果

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来做这个事情。

DEMO地址 https://github.com/Butteryflyyer/XHCardScoll

ios自习室欢迎进入，一起学习一起进步。

IMG_7291.JPG