十二 iOS之 折叠图片

这次开始，做一些好玩的效果

看一下折叠图片的效果

制作思路

1.如何制作图片折叠效果？

把上面的狗子图片分成两部分显示，上面一部分，下面一部分，折叠上面部分的内容。

2.如何把一张图片分成两部分显示。

• 搞两个控件，一个显示上半部分，一个显示下半部分，需要用到Layer(图层)的一个属性contentsRect,这个属性是可以控制图片显示的尺寸，可以让图片只显示上部分或者下部分，注意:取值范围是0~1.

• CGRectMake(0, 0, 1, 0.5) : 表示显示上半部分

• CGRectMake(0, 0.5, 1, 0.5) : 表示显示下半部分

• 如下图，我在storyBoard中拖入的控件，dragView在最底层，尺寸为400x400, topView和bottomView尺寸一样，为200x200，完全重合。为什么这样布局？请往下看
  

3.如何快速的把两部分拼接成一张完整的图片。

• 3.1 首先了解折叠，折叠其实就是旋转，既然需要旋转就需要明确锚点，因为默认都是绕着锚点旋转的。

• 3.2 上部分内容绕着底部中心旋转，所以设置上部分的锚点为（0.5，1）

• 3.3 锚点设置好了，就可以确定位置了.

• 3.4 可以把上下部分重合在一起，然后分别设置上下部分的锚点，
  上部分的锚点为（0.5，1），下部分的锚点为（0.5，0）,就能快速重叠了。

定位点和锚点不清楚的，请移步第四篇文章做研究

4.如何折叠上部分内容。

• 在拖动视图的时候，旋转上部分控件。修改transform属性。
• 可以在上部分和下部分底部添加一个拖动控件（拖动控件尺寸就是完整的图片尺寸），给这个控件添加一个pan手势，就能制造一个假象，拖动控件的时候，折叠图片。
• 计算Y轴每偏移一点，需要旋转多少角度，假设完整图片尺寸高度为200，当y = 200时，上部分图片应该刚好旋转180°，因此angle = offsetY * M_PI / 200;
• 上部分内容应该是绕着X轴旋转，逆时针旋转，因此角度需要为负数。

 //设置偏移量    CGPoint transP = [pan translationInView:_dragView];    //旋转角度，向下逆时针旋转    CGFloat angle = -transP.y / 200.0 * M_PI ;    CATransform3D transform = CATransform3DIdentity;    //增加旋转立体感，近大远小    transform.m34 = - 1 / 500.0;    //沿X轴旋转    _topView.layer.transform = CATransform3DRotate(transform, angle, 1, 0, 0);

• 为了让折叠效果更加有效果，更加具有立体感，可以给形变设置m34属性，就能添加立体感。

// 设置M34就有立体感(近大远小)。 -1 / z ,z表示观察者在z轴上的值,z越小，看起来离我们越近，东西越大。    transform.m34 = - 1 / 500.0;

反弹效果

当手指抬起的时候，应该把折叠图片还原，其实就是把形变清空。

  //手势结束时    if (pan.state == UIGestureRecognizerStateEnded) {        //弹簧效果动画        //SpringWithDamping：弹簧系数，越小，效果越明显    [UIView animateWithDuration:0.6 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{        _topView.layer.transform = CATransform3DIdentity;    } completion:^(BOOL finished) {    }];        //阴影消失        _gradLayer.opacity = 0;    }

阴影效果

当折叠图片的时候，底部应该有个阴影渐变过程。

• 利用CAGradientLayer（渐变图层）制作阴影效果，添加到底部视图上，并且一开始需要隐藏，在拖动的时候慢慢显示出来。
• 颜色应是由透明到黑色渐变,表示阴影从无到有。

 //渐变图层    CAGradientLayer * gradLayer = [CAGradientLayer layer];    //需要设置尺寸    gradLayer.frame = _bottomView.bounds;    // 设置不透明度 0    gradLayer.opacity = 0;    //从什么颜色渐变为什么颜色    gradLayer.colors = @[(id)[UIColor clearColor].CGColor,(id)[UIColor blackColor].CGColor];    _gradLayer = gradLayer;    [_bottomView.layer addSublayer:gradLayer];

• 在拖动的时候计算不透明度值，假设拖动200，阴影完全显示，不透明度应该为1，因此 opacity = y轴偏移量 * 1 / 200.0;

  //设置阴影效果，偏移量的二百分之一    _gradLayer.opacity = transP.y * 1 / 200.0;

• 在手指抬起的时候，需要把阴影设置隐藏，不透明度为0；

//手势结束时    if (pan.state == UIGestureRecognizerStateEnded) {        //弹簧效果动画        //SpringWithDamping：弹簧系数，越小，效果越明显    [UIView animateWithDuration:0.6 delay:0 usingSpringWithDamping:0.2 initialSpringVelocity:10 options:UIViewAnimationOptionCurveEaseInOut animations:^{        _topView.layer.transform = CATransform3DIdentity;    } completion:^(BOOL finished) {    }];        //阴影消失        _gradLayer.opacity = 0;    }

github demo : FoldPictureDemo