用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 />
