iOS OurChoice折叠特效实现

OurChoice这款应用带给了大家革命性的交互体验，app store地址：https://itunes.apple.com/cn/app/al-gore-our-choice-plan-to/id432753658?mt=8

本文将对OurChoice中的折叠特效实现进行说明。

实现折叠特效的主要思路为在UIView中添加UIPinchGestureRecognizer、UITapGestureRecognizer和UIPanGestureRecognizer，以响应特效中的捏合、轻拍和移动。

初始化时，获取当前UIView的快照以UImage的形式渲染在两个layer上，一个layer占图片的一半。初始化代码如下：

- (void)initFoldLayer {
    if (!_foldLayer) {
        UIGraphicsBeginImageContext(self.frame.size);
        [self.layer renderInContext:UIGraphicsGetCurrentContext()];
        UIImage *viewSnapShot = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        
        CATransform3D transform = CATransform3DIdentity;
        transform.m34 = -1.0/1200.0;
        
        _shadowLayer = [[CALayer layer] retain];
        _shadowLayer.frame = self.bounds;
        _shadowLayer.shadowColor = [UIColor blackColor].CGColor;
        _shadowLayer.shadowOpacity = 0.5;
        _shadowLayer.shadowOffset = CGSizeMake(0, 0);
        _shadowLayer.shadowRadius = 2.0f;
        //阴影位置
        _shadowLayer.shadowPath = [UIBezierPath bezierPathWithRect:[self getShowRect]].CGPath;
        
        [self.layer addSublayer:_shadowLayer];
        [_shadowLayer setHidden:YES];
        
        _foldLayer = [[CALayer layer] retain];
        _foldLayer.frame = self.bounds;
        _foldLayer.backgroundColor = [UIColor clearColor].CGColor;
        _foldLayer.sublayerTransform = transform;
        [_foldLayer setHidden:YES];
        [self.layer addSublayer:_foldLayer];
        
        for (int i = 0; i < 2; i++) {
            CGRect frame;
            //不同方向截取图片的区域不同
            if (_foldViewType == TSFoldViewTypeUp || _foldViewType == TSFoldViewTypeDown) {
                frame = CGRectMake(0, i * self.frame.size.height/2, self.frame.size.width, self.frame.size.height/2);
            }else {
                frame = CGRectMake(i * self.frame.size.width/2, 0, self.frame.size.width/2, self.frame.size.height);
            }
            CGImageRef imageCrop = CGImageCreateWithImageInRect(viewSnapShot.CGImage, frame);
            CALayer *imageCroppedLayer = [CALayer layer];
            imageCroppedLayer.frame = frame;
            //不同方向锚点不同
            if (_foldViewType == TSFoldViewTypeUp || _foldViewType == TSFoldViewTypeDown) {
                imageCroppedLayer.anchorPoint = CGPointMake(0.5, !i);
            }else {
                imageCroppedLayer.anchorPoint = CGPointMake(!i, 0.5);
            }
            imageCroppedLayer.position = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);
            imageCroppedLayer.contents = (id)imageCrop;
            imageCroppedLayer.backgroundColor = [UIColor clearColor].CGColor;
            [_foldLayer addSublayer:imageCroppedLayer];
            
            //不同方向摆放次序不同
            if (_foldViewType == TSFoldViewTypeLeft || _foldViewType == TSFoldViewTypeUp) {
                [_foldLayer insertSublayer:imageCroppedLayer atIndex:0];
            }
            //设置标识符
            if (i == 0) {
                imageCroppedLayer.name = @"first";
            }else {
                imageCroppedLayer.name = @"second";
            }
            //设置初始的角度
            if (_foldViewType == TSFoldViewTypeLeft && i == 1) {
                imageCroppedLayer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
            }else if (_foldViewType == TSFoldViewTypeRight && i == 0) {
                imageCroppedLayer.transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
            }else if (_foldViewType == TSFoldViewTypeUp && i == 1) {
                imageCroppedLayer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);
            }else if (_foldViewType == TSFoldViewTypeDown && i == 0) {
                imageCroppedLayer.transform = CATransform3DMakeRotation(M_PI, 1, 0, 0);
            }
            
            CAGradientLayer *shadowLayer = [CAGradientLayer layer];
            shadowLayer.frame = imageCroppedLayer.bounds;
            shadowLayer.opacity = 0;
            shadowLayer.colors = [NSArray arrayWithObjects:(id)[UIColor blackColor].CGColor, (id)[UIColor colorWithRed:1/3.0f green:1/3.0f blue:1/3.0f alpha:0.5f].CGColor, nil];
            //设置渐变的位置
            if (_foldViewType == TSFoldViewTypeLeft || _foldViewType == TSFoldViewTypeRight) {
                if (i == 0) {
                    shadowLayer.startPoint = CGPointMake(0, 0.5);
                    shadowLayer.endPoint = CGPointMake(1, 0.5);
                }
                else {
                    shadowLayer.startPoint = CGPointMake(1, 0.5);
                    shadowLayer.endPoint = CGPointMake(0, 0.5);
                }
            }else {
                if (i == 0) {
                    shadowLayer.startPoint = CGPointMake(0.5, 0);
                    shadowLayer.endPoint = CGPointMake(0.5, 1);
                }
                else {
                    shadowLayer.startPoint = CGPointMake(0.5, 1);
                    shadowLayer.endPoint = CGPointMake(0.5, 0);
                }
            }
            
            [imageCroppedLayer addSublayer:shadowLayer];
        }
        [self setFoldLayerHidden:NO];
    }
}

手指捏合时，根据手指之间的距离计算当前两个layer倾斜的角度，形成折叠的效果。响应捏合手势的代码如下：

- (void)modifiedGesture:(UIGestureRecognizer *)gesture {
    if (gesture.numberOfTouches < 2) {
        return;
    }
    
    CGPoint pos1 = [gesture locationOfTouch:0 inView:self];
    CGPoint pos2 = [gesture locationOfTouch:1 inView:self];
    CGPoint middlePos = CGPointMake((pos1.x + pos2.x)/2, (pos1.y + pos2.y)/2);
    CGFloat dis = [self getDisBetweenPoint1:pos1 point2:pos2];
    if ([gesture isKindOfClass:[UIPinchGestureRecognizer class]]) {
        if (dis > kMinDistance && dis < _maxDistance) {
            _currentAngle = M_PI_2 - ((dis / _maxDistance) * M_PI / 2);
            if (_foldViewType == TSFoldViewTypeLeft || _foldViewType == TSFoldViewTypeRight) {
                _shadowLayer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake((self.bounds.size.width - (dis / _maxDistance) * self.bounds.size.width)/2, 150, (dis / _maxDistance) * self.bounds.size.width, _shadowLayer.frame.size.height - 150)].CGPath;
                _pinchTransform = CATransform3DMakeRotation(_currentAngle, 0, 1, 0);
            }else {
                _shadowLayer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, (self.bounds.size.height - (dis / _maxDistance) * self.bounds.size.height)/2, _shadowLayer.frame.size.width, (dis / _maxDistance) * self.bounds.size.height)].CGPath;
                _pinchTransform = CATransform3DMakeRotation(-_currentAngle, 1, 0, 0);
            }
        }
    }else if ([gesture isKindOfClass:[UIPanGestureRecognizer class]]) {
        UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)gesture;
        CGPoint translation = [pan translationInView:self.superview];
        _panTransform = CATransform3DTranslate(_panTransform, translation.x, translation.y, 0);
        [pan setTranslation:CGPointZero inView:self.superview];
    }
    //根据位置和角度设置layer的阴影
    [CATransaction begin];
    [CATransaction setDisableActions:YES];
    [self setLayerShadow:middlePos distance:dis];
    [CATransaction commit];
    
    [CATransaction begin]; 
    [CATransaction setAnimationDuration:0.1];
    for (int i=0; i<[[_foldLayer sublayers] count]; i++) {
        CALayer *layer = [[_foldLayer sublayers] objectAtIndex:i];
        if ([layer.name isEqualToString:@"first"]) {
            layer.transform = CATransform3DConcat(CATransform3DConcat(CATransform3DInvert(_pinchTransform), _scaleTransform), _panTransform);
        }else if ([layer.name isEqualToString:@"second"]) {
            layer.transform = CATransform3DConcat(CATransform3DConcat(_pinchTransform, _scaleTransform), _panTransform);
        }
    }
    _shadowLayer.transform = _panTransform;
    [CATransaction commit];
}

最终实现效果如下：

Demo工程已上传至CSDN资源：http://download.csdn.net/detail/zhaoxy2850/5710433