用OC寫了一個(gè)小Demo, 模仿了淘寶和京東APP在選擇商品詳情時(shí), 折疊后面的視圖的效果.

<br />

<br />

效果圖:

<br />

Mou icon

<br />
<br />

關(guān)鍵思路:

• 背景視圖有一個(gè)距離屏幕遠(yuǎn)近變換的效果, 所以這里必須要用到Transform.m34這個(gè)屬性.
• 背景視圖旋轉(zhuǎn)時(shí), 分別繞頂部和底部旋轉(zhuǎn), 所以需要修改圖層的anchorPoint屬性.
• 點(diǎn)擊圖片時(shí), 由于子控件超出父控件, 所以子控件并不能響應(yīng)點(diǎn)擊事件, 這時(shí)響應(yīng)點(diǎn)擊事件的是背景視圖, 這里需要使用hitTest:方法來改變事件的響應(yīng)者.
  <br />
  <br />

核心代碼:

 //修改錨點(diǎn)
    self.behindV.layer.anchorPoint = CGPointMake(0.5, 0);
    self.behindV.layer.position = CGPointMake([UIScreen mainScreen].bounds.size.width*0.5, 0);

    CATransform3D transform = CATransform3DIdentity;
        
    //眼睛離屏幕的距離.(近大遠(yuǎn)小.)
    transform.m34 = 1 / 1000.0;
        
    self.behindV.layer.transform = CATransform3DRotate(transform, 7*M_PI/180.0, 1, 0, 0);

//如果當(dāng)前的點(diǎn)在imageV上, 就讓imageV處理事件.
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    CGPoint imageP = [self convertPoint:point toView:self.iconV];
    
    if ([self.iconV pointInside:imageP withEvent:event]) return self.iconV;
    
    else return [super hitTest:point withEvent:event];
}

<br />

代碼鏈接: https://github.com/EvanFisher/FoldBackgroundView
如果你喜歡這個(gè)效果, 請(qǐng)給我一顆星星哦...

<br />