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

最新推荐文章于 2024-07-28 21:49:31 发布

极光天轮

最新推荐文章于 2024-07-28 21:49:31 发布

阅读量5.2k

点赞数

分类专栏： iOS开发相关文章标签：动画 draggable card 卡片

本文链接：https://blog.csdn.net/w_x_p/article/details/50562501

版权

iOS开发相关专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

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、来看一下最终的效果

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