Draggable Card-可拖动层叠卡片轮播的实现

来源：互联网发布：json.js 编辑：程序博客网时间：2024/05/21 07:11

今天分享一个层叠卡片的拖动效果，好，现在开始一步一步来看是怎么实现的，定的是三张图片。

1、第一步当然是创建三个图片，首先从最小的一张开始创建到顶部最大一张。来看一下效果图：

代码也很简单，实现一个for循环创建便可。

    for (int i = 0; i < DEFAULT_NUMBER; i++) {        SwipeImageView *swipeV = [[SwipeImageView alloc] initWithFrame:CGRectMake(((kDeviceWidth - Width)/2 + 20*(DEFAULT_NUMBER-i)), ((kDeviceHeight - Height)/2 - 20*(DEFAULT_NUMBER-i)), Width - 20*(DEFAULT_NUMBER-i)*2, Height - 20*(DEFAULT_NUMBER-i)*2)];        swipeV.showImageV.backgroundColor = [UIColor randomColor];        swipeV.tag = i;        swipeV.alpha = (i+1)*0.3<=0.9?(i+1)*0.3+0.1:(i+1)*0.3;        [self.view addSubview:swipeV];                //用户只可以划动第一个，其余各个禁止划动        if (i == 2) {            swipeV.userInteractionEnabled = YES;        }        else        {            swipeV.userInteractionEnabled = NO;        }                [_viewArr addObject:swipeV];}

效果如下：

2、为View添加下拉手势，下拉时将View放在视图框的下部分，从而从视图中消失；然后再放置在视图外的上部分。下面来看一下原理图：

嗯~，明白了原理就好办了，实现代码：

//手势动画- (void) swipeDown:(UISwipeGestureRecognizer *)swipeG{    [UIView animateWithDuration:0.5 animations:^{        //拖动后使view往下掉，从视图中消失        self.center = CGPointMake(kDeviceWidth/2, kDeviceHeight+150);    } completion:^(BOOL finished) {        //使view放在视图的顶部        self.center = CGPointMake(kDeviceWidth/2, -60);        if (self.block) {            self.block(self);        }    }];}

3、最顶部的一张图片离开视图时，接下来需要放在最后一张后面，这一部分可以通过block来实现，当然还有其他的方法，这里就不举例了。来看一下代码是怎么实现的，需要调用sendSubviewToBack:方法。

swipeV.block = ^(SwipeImageView *theImageV)        {            //第一张放到最后面            [UIView animateWithDuration:0.5 delay:0.1 options:UIViewAnimationOptionCurveEaseOut animations:^{                SwipeImageView *changeV = [[SwipeImageView alloc] init];                changeV = _viewArr[2];                changeV.frame = CGRectMake(((kDeviceWidth - Width)/2 + 60), ((kDeviceHeight - Height)/2 - 60), (Width - 20*(DEFAULT_NUMBER-0)*2), (Height - 20*(DEFAULT_NUMBER-0)*2));                changeV.viewFrame = CGRectMake(0, 0, (Width - 20*(DEFAULT_NUMBER-0)*2), (Height - 20*(DEFAULT_NUMBER-0)*2));                [self.view sendSubviewToBack:changeV];                [_viewArr removeLastObject];                changeV.tag = 0;                changeV.alpha = (0+1)*0.3;                changeV.userInteractionEnabled = NO;                [_viewArr insertObject:changeV atIndex:0];            } completion:^(BOOL finished) {                            }];        };

4、接下来就需要将第二、三张图片往前推，使得能够不断轮播。

//往前推时改变frame- (void) changeViewFrame:(NSInteger)index withEnabled:(BOOL)b{    SwipeImageView *changeV = [[SwipeImageView alloc] init];    changeV = _viewArr[index];    changeV.frame = CGRectMake(((kDeviceWidth - Width)/2 + 20*(DEFAULT_NUMBER-index)), ((kDeviceHeight - Height)/2 - 20*(DEFAULT_NUMBER-index)), (Width - 20*(DEFAULT_NUMBER-index)*2), (Height - 20*(DEFAULT_NUMBER-index)*2));    changeV.viewFrame = CGRectMake(0, 0, (Width - 20*(DEFAULT_NUMBER-index)*2), (Height - 20*(DEFAULT_NUMBER-index)*2));    changeV.tag = index;    changeV.alpha = (index+1)*0.3<=0.9?(index+1)*0.3+0.1:(index+1)*0.3;    changeV.userInteractionEnabled = b;    [_viewArr replaceObjectAtIndex:index withObject:changeV];}

5、来看一下最终的效果

如果觉得有帮助，我会不断分享，你们的支持是我分享的最大动力！

github地址：https://github.com/wxp2012/SwipeViewAnimation

0 0