拆析系列_使用CATransform3D实现翻页效果

说明:

拆析系列通过分析第三方的Demo, 本文重新整理Demo中涉及到的重点API并以知识点的方式进行分段, 以方便大家学习.

文章中尽量不使用或少使用封装, 目的是让大家清楚为了实现功能所需要的官方核心API是哪些(如果使用封装, 会在封装外面加以注释)

本拆析Demo源码地址: https://github.com/Neojoke/flippingPage
感谢Demo作者Neojoke

• 此文章由 @Scott 编写. 经 @春雨 审核. 若转载此文章,请注明出处和作者

<功能描述>

iOS实现3D翻页效果

核心API

CALayer的anchorPoint属性, CGImage, CAShapeLayer, UIRectConner, CIFilter, CAGradientLayer, CATransform3D

功能实现

Code:

1. CALayer属性 anchorPoint(锚点)

    /**     * 每一个UIView内部都默认关联着一个CALayer, UIView有frame、bounds和center三个属性，CALayer也有类似的属性，分别为frame、bounds、position、anchorPoint。frame和bounds比较好理解，bounds可以视为x坐标和y坐标都为0的frame，那position、anchorPoint是什么呢？先看看两者的原型，可知都是CGPoint点。     * @property CGPoint position     * @property CGPoint anchorPoint     *     * anchorPoint 介绍:     * 从一个例子开始入手吧，想象一下，把一张A4白纸用图钉订在书桌上，如果订得不是很紧的话，白纸就可以沿顺时针或逆时针方向围绕图钉旋转，这时候图钉就起着支点的作用。我们要解释的anchorPoint就相当于白纸上的图钉，它主要的作用就是用来作为变换的支点，旋转就是一种变换，类似的还有平移、缩放。       继续扩展，很明显，白纸的旋转形态随图钉的位置不同而不同，图钉订在白纸的正中间与左上角时分别造就了两种旋转形态，这是由图钉（anchorPoint）的位置决定的。如何衡量图钉（anchorPoint）在白纸中的位置呢？在iOS中，anchorPoint点的值是用一种相对bounds的比例值来确定的，在白纸的左上角、右下角，anchorPoint分为为(0,0), (1, 1)，也就是说anchorPoint是在单元坐标空间(同时也是左手坐标系)中定义的。类似地，可以得出在白纸的中心点、左下角和右上角的anchorPoint为(0.5,0.5), (0,1), (1,0)。     */    // 设置右边ImageView的锚点    self.imageViewForRight.layer.anchorPoint = CGPointMake(0, 0.5);

2: CGImage

- (UIImage *)clipImageWithImage:(UIImage *)image isLeftImage:(BOOL)isLeft {    CGRect imgRect = CGRectMake(0, 0, image.size.width / 2, image.size.height);    if (!isLeft) {        imgRect.origin.x = image.size.width / 2;    }    CGImageRef imgRef = CGImageCreateWithImageInRect(image.CGImage, imgRect);    UIImage *clipImage = [UIImage imageWithCGImage:imgRef];    return clipImage;}

3: CAShapeLayer, UIRectConner

- (CAShapeLayer *)getCornerRidusMashWithIsLeft:(BOOL)isLeft rect:(CGRect)rect {    //  创建CAShapeLayer对象.    CAShapeLayer *layer = [CAShapeLayer layer];    // 创建矩形圆角结构体    UIRectCorner corner = isLeft ? UIRectCornerTopLeft | UIRectCornerBottomLeft : UIRectCornerTopRight | UIRectCornerBottomRight;    // 通过贝塞尔曲线创建矩形圆角.    layer.path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:corner cornerRadii:CGSizeMake(10, 10)].CGPath;    return  layer;}

4: CIFilter (iOS 滤镜).

- (UIImage *)getBlurAndReversalImage:(UIImage *)image {    CIContext *context = [CIContext contextWithOptions:nil];    CIImage *inputImage = [CIImage imageWithCGImage:image.CGImage];    // 高斯滤镜.    CIFilter *filter = [CIFilter filterWithName:@"CIGaussianBlur"];    [filter setValue:inputImage forKey:kCIInputImageKey];    [filter setValue:@10.0 forKey:@"inputRadius"];    CIImage *result = [filter valueForKey:kCIOutputImageKey];    result = [result imageByApplyingTransform:CGAffineTransformMakeTranslation(-1, 1)];    CGImageRef ref = [context createCGImage:result fromRect:[inputImage extent]];    UIImage *returnImage = [UIImage imageWithCGImage:ref];    CGImageRelease(ref);    return returnImage;}

5: 渐变图层(CAGradientLayer)

- (void)gradientLayer {    // 渐变颜色    self.gradientForLeft = [CAGradientLayer layer];    self.gradientForLeft.opacity = 0; /**< 不透明度. */    self.gradientForLeft.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];    self.gradientForLeft.frame = self.imageViewForLeft.bounds;    self.gradientForLeft.startPoint = CGPointMake(1, 1);    self.gradientForLeft.startPoint = CGPointMake(0, 1);    [self.imageViewForLeft.layer addSublayer:self.gradientForLeft];    self.gradientForRight = [CAGradientLayer layer];    self.gradientForRight.opacity = 0;    self.gradientForRight.colors = @[(id)[UIColor clearColor].CGColor, (id)[UIColor blackColor].CGColor];    self.gradientForRight.frame = self.imageViewForRight.bounds;    self.gradientForRight.startPoint = CGPointMake(0, 1);    self.gradientForRight.startPoint = CGPointMake(1, 1);    [self.imageViewForRight.layer addSublayer:self.gradientForRight];}

6: CATransform3D

- (CATransform3D)getTransForm3DWithAngle:(CGFloat)angle {    CATransform3D transform = CATransform3DIdentity;    transform.m34 = 4.5 / 2000;    transform = CATransform3DRotate(transform, angle, 0, 1, 0);    return transform;}

完整Demo链接:https://github.com/yuancaoscott/CATransform3D