用OC寫了一個小Demo, 模仿了淘寶和京東APP在選擇商品詳情時, 折疊后面的視圖的效果.
<br />
<br />
效果圖:
<br />
Mou icon
<br />
<br />
關鍵思路:
- 背景視圖有一個距離屏幕遠近變換的效果, 所以這里必須要用到Transform.m34這個屬性.
- 背景視圖旋轉時, 分別繞頂部和底部旋轉, 所以需要修改圖層的anchorPoint屬性.
- 點擊圖片時, 由于子控件超出父控件, 所以子控件并不能響應點擊事件, 這時響應點擊事件的是背景視圖, 這里需要使用hitTest:方法來改變事件的響應者.
<br />
<br />
核心代碼:
//修改錨點
self.behindV.layer.anchorPoint = CGPointMake(0.5, 0);
self.behindV.layer.position = CGPointMake([UIScreen mainScreen].bounds.size.width*0.5, 0);
CATransform3D transform = CATransform3DIdentity;
//眼睛離屏幕的距離.(近大遠小.)
transform.m34 = 1 / 1000.0;
self.behindV.layer.transform = CATransform3DRotate(transform, 7*M_PI/180.0, 1, 0, 0);
//如果當前的點在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
如果你喜歡這個效果, 請給我一顆星星哦...
<br />
