本文是投稿文章，作者：Resory

在網(wǎng)上能找到挺多圖片折疊效果的教程，但大多數(shù)是一層折疊，在他們的教程的基礎(chǔ)上，我試著實(shí)現(xiàn)了一下多層折疊的效果。操作如下~

效果

Demo

Demo地址：https://github.com/Resory/RYMutipleFoldImageView

如果官人喜歡的話不妨給個(gè)星星吧。

邏輯

• 在做圖片折疊效果的時(shí)候，我們可以理解為把圖片分成幾部分，然后分別對各部分做動(dòng)效來實(shí)現(xiàn)折疊效果。

• 根據(jù)動(dòng)態(tài)圖,可以看到這是一張大圖'分成'4個(gè)小imageView。從上至下，我們分別命名為one,two,three,four

• 對one,two,three,four這四個(gè)小imageView進(jìn)行旋轉(zhuǎn) 移動(dòng)。旋轉(zhuǎn)的時(shí)候，關(guān)鍵是看各個(gè)imageView的anchorPoint是多少.而我們這里,可看p1圖中的紅點(diǎn)。

   1.a1代表one的anchorPoint為(0.5,0.0)

   2.a2代表two的anchorPoint為(0.5,1.0)

   3.a3代表three的anchorPoint為(0.5,0.0)

   4.a4代表four的anchorPoint為(0.5,1.0)

• 旋轉(zhuǎn)：我們這里的imageView都是旋轉(zhuǎn)45°或者是-45°,這個(gè)用CATransform3DRotate即可完成。

• 移動(dòng)（關(guān)鍵）：

   1.旋轉(zhuǎn)后，各個(gè)imageView都會(huì)變形并且都一樣大小，只有位置不一樣，我們要根據(jù)這個(gè)旋轉(zhuǎn)后的imageView高度來進(jìn)行移動(dòng)。

   2.比如two要和one對接。根據(jù)動(dòng)態(tài)圖,one只有旋轉(zhuǎn)，沒有移動(dòng)。而two則旋轉(zhuǎn)和移動(dòng)了。那么移動(dòng)了多少呢。在沒有折疊前，所有的imageView高度都是50px。也就是one和two總共加起來是100px。而折疊后。one和two都變小了。就是因?yàn)樗麄儍蓚€(gè)都變小了。所以中間就出現(xiàn)了縫隙，這個(gè)縫隙就是我們要移動(dòng)的距離。而我們知道在二維空間中，總長度是100px,one,two的高度在旋轉(zhuǎn)后是可以算出來的,也就是說縫隙的二維空間距離是:100-2*(one.frame.size.height)。,然后再經(jīng)過CATransform3DMakeAffineTransform方法的轉(zhuǎn)換得到真實(shí)地三維空間移動(dòng)的距離。

實(shí)現(xiàn)

• 初始化4個(gè)小imageView(contentsRect的運(yùn)用)

- (void)configFourFoldImage
{
    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(10, 100, 300, IMAGE_PER_HEIGIT*4)];
    [self.view addSubview:bgView];
    
    // 把kiluya這張圖，分成平均分成4個(gè)部分的imageview
    _one = [[UIImageView alloc] init];
    _one.image = [UIImage imageNamed:@'Kiluya.jpg'];
    _one.layer.contentsRect = CGRectMake(0, 0, 1, 0.25);
    _one.layer.anchorPoint = CGPointMake(0.5, 0.0);
    _one.frame = CGRectMake(0, 0, 300, IMAGE_PER_HEIGIT);
    
    _two = [[UIImageView alloc] init];
    _two.image = [UIImage imageNamed:@'Kiluya.jpg'];
    _two.layer.contentsRect = CGRectMake(0, 0.25, 1, 0.25);
    _two.layer.anchorPoint = CGPointMake(0.5, 1.0);
    _two.frame = CGRectMake(0, IMAGE_PER_HEIGIT, 300, IMAGE_PER_HEIGIT);
    
    _three = [[UIImageView alloc] init];
    _three.image = [UIImage imageNamed:@'Kiluya.jpg'];
    _three.layer.contentsRect = CGRectMake(0, 0.5, 1, 0.25);
    _three.layer.anchorPoint = CGPointMake(0.5, 0.0);
    _three.frame = CGRectMake(0, IMAGE_PER_HEIGIT*2, 300, IMAGE_PER_HEIGIT);
    
    _four = [[UIImageView alloc] init];
    _four.image = [UIImage imageNamed:@'Kiluya.jpg'];
    _four.layer.contentsRect = CGRectMake(0, 0.75, 1, 0.25);
    _four.layer.anchorPoint = CGPointMake(0.5, 1.0);
    _four.frame = CGRectMake(0, IMAGE_PER_HEIGIT*3, 300, IMAGE_PER_HEIGIT);
    
    [bgView addSubview:_one];
    [bgView addSubview:_two];
    [bgView addSubview:_three];
    [bgView addSubview:_four];
    
    // 給第一張和第三張?zhí)砑雨幱?    _oneShadowView = [[UIView alloc] initWithFrame:_one.bounds];
    _oneShadowView.backgroundColor = [UIColor blackColor];
    _oneShadowView.alpha = 0.0;
    
    _threeShadowView = [[UIView alloc] initWithFrame:_three.bounds];
    _threeShadowView.backgroundColor = [UIColor blackColor];
    
    _threeShadowView.alpha = 0.0;
    [_one addSubview:_oneShadowView];
    [_three addSubview:_threeShadowView];
}

生成折疊動(dòng)效需要的CATransform3D

- (CATransform3D)config3DTransformWithRotateAngle:(double)angle andPositionY:(double)y
{
    CATransform3D transform = CATransform3DIdentity;
    // 立體
    transform.m34 = -1/1000.0;
    // 旋轉(zhuǎn)
    CATransform3D rotateTransform = CATransform3DRotate(transform, M_PI*angle/180, 1, 0, 0);
    // 移動(dòng)(這里的y坐標(biāo)是平面移動(dòng)的的距離,我們要把他轉(zhuǎn)換成3D移動(dòng)的距離.這是關(guān)鍵,沒有它,圖片就沒辦法很好地對接。)
    CATransform3D moveTransform = CATransform3DMakeAffineTransform(CGAffineTransformMakeTranslation(0, y));
    // 合并
    CATransform3D concatTransform = CATransform3DConcat(rotateTransform, moveTransform);
    return concatTransform;
}

• 折疊

// 動(dòng)效是否執(zhí)行中
static bool isFolding = NO;

- (IBAction)fold:(id)sender
{
    if(!isFolding)
    {
        isFolding = YES;
        
        [UIView animateWithDuration:1.0
                              delay:0
             usingSpringWithDamping:1.0
              initialSpringVelocity:0
                            options:UIViewAnimationOptionCurveLinear
                         animations:^{
                         
            // 陰影顯示
            _oneShadowView.alpha = 0.2;
            _threeShadowView.alpha = 0.2;
            
            // 折疊
            _one.layer.transform = [self config3DTransformWithRotateAngle:-45.0
                                                             andPositionY:0];
            _two.layer.transform = [self config3DTransformWithRotateAngle:45.0
                                                             andPositionY:-100 2*_one.frame.size.height];
            _three.layer.transform = [self config3DTransformWithRotateAngle:-45.0
                                                               andPositionY:-100 2*_one.frame.size.height];
            _four.layer.transform = [self config3DTransformWithRotateAngle:45.0
                                                              andPositionY:-200 4*_one.frame.size.height];
        } completion:^(BOOL finished) {
            if(finished)
            {
                isFolding = NO;
            }
        }];
    }
}

• 恢復(fù)

- (IBAction)reset:(id)sender
{
    isFolding = NO;
    [UIView animateWithDuration:1.0
                          delay:0
         usingSpringWithDamping:1.0
          initialSpringVelocity:0
                        options:UIViewAnimationOptionCurveLinear
                     animations:^{
                     
        // 陰影隱藏
        _oneShadowView.alpha = 0.0;
        _threeShadowView.alpha = 0.0;
        
        // 圖片恢復(fù)原樣
        _one.layer.transform = CATransform3DIdentity;
        _two.layer.transform = CATransform3DIdentity;
        _three.layer.transform = CATransform3DIdentity;
        _four.layer.transform = CATransform3DIdentity;
        
    } completion:^(BOOL finished) {
    
    }];
}

末

這里關(guān)鍵是縫隙的計(jì)算，這個(gè)想明白了。其他就沒什么了。

如果你有疑問或者發(fā)現(xiàn)錯(cuò)誤請留言給我，喜歡就點(diǎn)個(gè)贊吧！3Q