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

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

       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




发布了32 篇原创文章 · 获赞 6 · 访问量 10万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览