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

      如果覺得有幫助，我會不斷分享，你們的支援是我分享的最大動力！