IOS Core Animation Advanced Techniques的学习笔记(四)

时间:2023-03-08 16:19:11
IOS Core Animation Advanced Techniques的学习笔记(四)

第五章:Transforms

Affine Transforms
CGAffineTransform是二维的
IOS Core Animation Advanced Techniques的学习笔记(四)
IOS Core Animation Advanced Techniques的学习笔记(四)
Creating a CGAffineTransform
主要有三种变化方法
旋转:
CGAffineTransformMakeRotation(CGFloat angle)
IOS Core Animation Advanced Techniques的学习笔记(四)IOS Core Animation Advanced Techniques的学习笔记(四)
缩放:
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
IOS Core Animation Advanced Techniques的学习笔记(四)IOS Core Animation Advanced Techniques的学习笔记(四)
移动:
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
IOS Core Animation Advanced Techniques的学习笔记(四)IOS Core Animation Advanced Techniques的学习笔记(四)

例子5.1 CGAffineTransformMakeRotation

源码在这里下载:http://www.informit.com/title/9780133440751

  1. @interface ViewController ()
  2. @property (nonatomic, weak) IBOutlet UIView *layerView;
  3. @end
  4. @implementation ViewController
  5. - (void)viewDidLoad
  6. {
  7. [super viewDidLoad];
  8. //rotate the layer 45 degrees
  9. CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);
  10. self.layerView.layer.affineTransform = transform;
  11. }
  12. @end

IOS Core Animation Advanced Techniques的学习笔记(四)

修改 CGAffineTransformMakeScale
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. //rotate the layer 45 degrees
  5. CGAffineTransform transform = CGAffineTransformMakeScale(0.5, 0.5);
  6. self.layerView.layer.affineTransform = transform;
  7. }

IOS Core Animation Advanced Techniques的学习笔记(四)

修改   CGAffineTransformMakeTranslation
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. //rotate the layer 45 degrees
  5. CGAffineTransform transform = CGAffineTransformMakeTranslation(-50.0, 30.0);
  6. self.layerView.layer.affineTransform = transform;
  7. }

IOS Core Animation Advanced Techniques的学习笔记(四)

Combining Transforms
方法1:使用CGAffineTransformConcat
继续修改例子5.1
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. //rotate the layer 45 degrees
  5. CGAffineTransform transform1 = CGAffineTransformMakeRotation(M_PI_4);
  6. CGAffineTransform transform2 = CGAffineTransformMakeScale(0.5, 0.5);
  7. CGAffineTransform transform = CGAffineTransformConcat(transform1, transform2);
  8. self.layerView.layer.affineTransform = transform;
  9. }

IOS Core Animation Advanced Techniques的学习笔记(四)

方法2:
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
和前面的CGAffineTransformMakeRotation函数相同,也可以混用
CGAffineTransform t可以使用CGAffineTransformIdentity函数初始化
例子5.2
  1. @interface ViewController ()
  2. @property (nonatomic, weak) IBOutlet UIView *layerView;
  3. @end
  4. @implementation ViewController
  5. - (void)viewDidLoad
  6. {
  7. [super viewDidLoad];
  8. //create a new transform
  9. CGAffineTransform transform = CGAffineTransformIdentity;
  10. //scale by 50%
  11. transform = CGAffineTransformScale(transform, 0.5, 0.5);
  12. //rotate by 30 degrees
  13. transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0);
  14. //translate by 200 points
  15. transform = CGAffineTransformTranslate(transform, 200, 0);
  16. //apply transform to layer
  17. self.layerView.layer.affineTransform = transform;
  18. }
  19. @end

IOS Core Animation Advanced Techniques的学习笔记(四)

下面记几个特殊值
1. 首先要知道函数 CGAffineTransformIdentity 初始化的结果
          IOS Core Animation Advanced Techniques的学习笔记(四)
2. 左右翻转
    CGAffineTransformMake(-1,0,0,1,0,0);
IOS Core Animation Advanced Techniques的学习笔记(四)
3. 以右边为轴向右翻转
    CGAffineTransformMake(-1,0,0,1,self.layerView.frame.size.width,0);
IOS Core Animation Advanced Techniques的学习笔记(四)

4. 上下翻转

CGAffineTransformMake(1,0,0, -1,0,0);

IOS Core Animation Advanced Techniques的学习笔记(四)

5. 以底边为轴向下翻转
    CGAffineTransformMake(1,0,0, -1,0,self.layerView.frame.size.height);
IOS Core Animation Advanced Techniques的学习笔记(四)
6. 转180°
    CGAffineTransformMake(-1,0,0, -1,0,0);
IOS Core Animation Advanced Techniques的学习笔记(四)
7. 例子5.3,向右斜拉
    CGAffineTransformMake(1,0, -1,1,0,0);
代码:
  1. @interface ViewController ()
  2. @property (nonatomic, weak) IBOutlet UIView *layerView;
  3. @end
  4. @implementation ViewController
  5. CGAffineTransform CGAffineTransformMakeShear(CGFloat x, CGFloat y)
  6. {
  7. CGAffineTransform transform = CGAffineTransformIdentity;
  8. transform.c = -x;
  9. transform.b = y;
  10. return transform;
  11. }
  12. - (void)viewDidLoad
  13. {
  14. [super viewDidLoad];
  15. //shear the layer at a 45-degree angle
  16. self.layerView.layer.affineTransform = CGAffineTransformMakeShear(1, 0);
  17. }
  18. @end

IOS Core Animation Advanced Techniques的学习笔记(四)

8. 例子5.3,向左斜拉
    CGAffineTransformMake(1, 0,1, 1, 0, 0);
IOS Core Animation Advanced Techniques的学习笔记(四)
3D Transforms
类似CGAffineTransform,CATransform3D是三维的
IOS Core Animation Advanced Techniques的学习笔记(四)

CATransform3D又是一个结构。他有自己的一个公式,可以进行套用。

struct CATransform3D

{

CGFloat     m11(x缩放),    m12(y切变),    m13(旋转),     m14( );

CGFloat     m21(x切变),    m22(y缩放),    m23( ),           m24( );

CGFloat     m31(旋转),      m32( ),           m33( ),            m34(透视效果,要操作的这个对象要有旋转的角度,否则没有效果。正直/负值都有意义);

CGFloat     m41(x平移),    m42(y平移),    m43(z平移),    m44( );

};

同样有三种变换方法
旋转:
CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
首先要先清楚x,y,z是什么
IOS Core Animation Advanced Techniques的学习笔记(四)
{x, y, z}组成的向量就是旋转要使用的轴,angle是旋转角度
IOS Core Animation Advanced Techniques的学习笔记(四)

例:原图

IOS Core Animation Advanced Techniques的学习笔记(四)

向X轴旋转45度。                               向Y轴旋转45度。                         向Z轴旋转45度。

IOS Core Animation Advanced Techniques的学习笔记(四)  IOS Core Animation Advanced Techniques的学习笔记(四)  IOS Core Animation Advanced Techniques的学习笔记(四)

向 X轴,Y轴都旋转45度,就是沿着对角线旋转。

IOS Core Animation Advanced Techniques的学习笔记(四)

缩放:
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)

sx:X轴缩放,代表一个缩放比例,一般都是0 ---1之间的数字。

sy:Y轴缩放。

sz:整体比例变换时,也就是m11(sx) == m22(sy)时,若m33(sz)>1,图形整体缩小,

若0 < m33(sz) < 1,图形整体放大,

若m33(sz) < 0,发生关于原点的对称等比变换。

当sx = 1,sy =1时。如图:

IOS Core Animation Advanced Techniques的学习笔记(四)

当sx = 0.5,sy =0.5时。如图:

IOS Core Animation Advanced Techniques的学习笔记(四)

变换:
CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

t' = [1 0 0 0; 0 1 0 0; 0 0 1 0; tx ty tz 1]

1    0    0    0

0    1    0    0

0    0    1    0

tx   ty    tz   1

竖起来看对应前面的数据结构就很明显了。

tx:X轴偏移位置,往下为正数。

ty:Y轴偏移位置,往右为正数。

tz:Z轴偏移位置,往外为正数。

可以通过直接修改数据结构,来设置变换效果

struct CATransform3D

{

CGFloat m11, m12, m13, m14;

CGFloat m21, m22, m23, m24;

CGFloat m31, m32, m33, m34;

CGFloat m41, m42, m43, m44;

}

  1. CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
  2. transform.m11 = 2;

或者修改键值

  1. [myLayer setValue:[NSNumber numberWithInt:0] forKeyPath:@"transform.rotation.x"];

IOS Core Animation Advanced Techniques的学习笔记(四)

例子5.4
  1. @interface ViewController ()
  2. @property (nonatomic, weak) IBOutlet UIView *layerView;
  3. @end
  4. @implementation ViewController
  5. - (void)viewDidLoad
  6. {
  7. [super viewDidLoad];
  8. //rotate the layer 45 degrees along the Y axis
  9. CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
  10. self.layerView.layer.transform = transform;
  11. }
  12. @end

IOS Core Animation Advanced Techniques的学习笔记(四)

修改例子5.4,修改自http://lepetit-prince.net/ios/?p=451
  1. #import "ViewController.h"
  2. #import <QuartzCore/QuartzCore.h>
  3. @interface ViewController ()
  4. {
  5. BOOL front;
  6. }
  7. @property (nonatomic, weak) IBOutlet UIView *layerView;
  8. @end
  9. @implementation ViewController
  10. - (void)viewDidLoad
  11. {
  12. [super viewDidLoad];
  13. front = YES;
  14. self.layerView.layer.contents = (__bridge id)([UIImage imageNamed:@"front.png"].CGImage);
  15. }
  16. - (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
  17. {
  18. [UIView animateWithDuration:0.5 animations:^{
  19. self.layerView.layer.transform = CATransform3DMakeRotation(M_PI * 0.5, 0.0f, 1.0f, 0.0f);
  20. } completion:^(BOOL finished) {
  21. self.layerView.layer.transform = CATransform3DMakeRotation(M_PI * 1.5, 0.0f, 1.0f, 0.0f);
  22. self.layerView.layer.contents = front ? (__bridge id)([UIImage imageNamed:@"back.png"].CGImage) : (__bridge id)([UIImage imageNamed:@"front.png"].CGImage);
  23. [UIView animateWithDuration:0.5 animations:^{
  24. self.layerView.layer.transform = CATransform3DMakeRotation(M_PI * 2, 0.0f, 1.0f, 0.0f);
  25. } completion:^(BOOL finished) {
  26. front = !front;
  27. }];
  28. }];
  29. }
  30. @end

资源文件 front.png   back.png

IOS Core Animation Advanced Techniques的学习笔记(四)
Perspective Projection
前面提到过m34(透视效果,要操作的这个对象要有旋转的角度,否则没有效果。正直/负值都有意义)
例子5.5
  1. @interface ViewController ()
  2. @property (nonatomic, weak) IBOutlet UIView *layerView;
  3. @end
  4. @implementation ViewController
  5. - (void)viewDidLoad
  6. {
  7. [super viewDidLoad];
  8. //create a new transform
  9. CATransform3D transform = CATransform3DIdentity;
  10. //apply perspective
  11. transform.m34 = - 1.0 / 500.0;
  12. //rotate by 45 degrees along the Y axis
  13. transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);
  14. //apply to layer
  15. self.layerView.layer.transform = transform;
  16. }
  17. @end

IOS Core Animation Advanced Techniques的学习笔记(四)

如果修改注释掉旋转,看看会有什么结果
  1. //rotate by 45 degrees along the Y axis
  2. //transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);

例子是用的透视场景是±1.0/d,d镜头到景物的距离,取值500~1000效果最好,±代表方向

The Vanishing Point
当景物慢慢远离镜头时,随着越来越小最终聚集到一点就是Vanishing Point(灭点)
通常情况灭点是在视图的正中心,或者在包含所有景物范围的中心。
IOS Core Animation Advanced Techniques的学习笔记(四)
Core Animation把灭点定义在anchorPoint,所以在变换前需要确定anchorPoint,
尤其需要注意,3D变换时最好确保同一视图内的所有layey有相同的灭点
The sublayerTransform Property
如果你有多个View或Layer有相同的3D变换,就可以使用sublayerTransform,

sublayerTransform也是CATransform3D,只有sublayers才会响应。

默认值是Identity Transform(CATransform3DIdentity)

例子5.6
  1. @interface ViewController ()
  2. @property (nonatomic, weak) IBOutlet UIView *containerView;
  3. @property (nonatomic, weak) IBOutlet UIView *layerView1;
  4. @property (nonatomic, weak) IBOutlet UIView *layerView2;
  5. @end
  6. @implementation ViewController
  7. - (void)viewDidLoad
  8. {
  9. [super viewDidLoad];
  10. //apply perspective transform to container
  11. CATransform3D perspective = CATransform3DIdentity;
  12. perspective.m34 = - 1.0 / 500.0;
  13. self.containerView.layer.sublayerTransform = perspective;
  14. //rotate layerView1 by 45 degrees along the Y axis
  15. CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
  16. self.layerView1.layer.transform = transform1;
  17. //rotate layerView2 by 45 degrees along the Y axis
  18. CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);
  19. self.layerView2.layer.transform = transform2;
  20. }
  21. @end

IOS Core Animation Advanced Techniques的学习笔记(四)

我们挪动一下xib里的图片位置:
IOS Core Animation Advanced Techniques的学习笔记(四)
再看结果
IOS Core Animation Advanced Techniques的学习笔记(四)
恢复xib文件,并修改代码
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. //apply perspective transform to container
  5. //    CATransform3D perspective = CATransform3DIdentity;
  6. //    perspective.m34 = - 1.0 / 500.0;
  7. //    self.containerView.layer.sublayerTransform = perspective;
  8. //apply perspective
  9. CATransform3D transform1 = CATransform3DIdentity;
  10. transform1.m34 = - 1.0 / 500.0;
  11. transform1 = CATransform3DRotate(transform1, M_PI_4, 0, 1, 0);
  12. self.layerView1.layer.transform = transform1;
  13. //rotate layerView2 by 45 degrees along the Y axis
  14. CATransform3D transform2 = CATransform3DIdentity;
  15. transform2.m34 = - 1.0 / 500.0;
  16. transform2 = CATransform3DRotate(transform2, -M_PI_4, 0, 1, 0);
  17. self.layerView2.layer.transform = transform2;
  18. }

IOS Core Animation Advanced Techniques的学习笔记(四)

结果和最初一样,但再次修改xib文件,挪动图片看结果,比较未改代码时的效果
IOS Core Animation Advanced Techniques的学习笔记(四)
大家发现设置sublayerTransform的好处了吗
1. 可以一次设置所有subLayer的变换效果
2. Vanishing Point(灭点)被同时设置在container layer即父图层的中心,这就意味着无论你怎么
    修改subLayer的position或frame,它们都会保持一个相同的灭点。
Backfaces
例子5.4,我们设置的是旋转M_PI_4(45°),改为M_PI(180°)
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. //rotate the layer 45 degrees along the Y axis
  5. CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
  6. self.layerView.layer.transform = transform;
  7. }

IOS Core Animation Advanced Techniques的学习笔记(四)

翻到了layer背面,显示的是原图像的镜像图。由此可见layer是双面的,并且两面都被描绘了。
因此我们会想到,为什么要浪费GPU去描绘我们看不见的部分呢。CALayer的另外一个属性
doubleSided可以解决这个问题。
在刚才修改过的例子5.4的代码中增加doubleSided设置
  1. - (void)viewDidLoad
  2. {
  3. [super viewDidLoad];
  4. //rotate the layer 45 degrees along the Y axis
  5. CATransform3D transform = CATransform3DMakeRotation(M_PI, 0, 1, 0);
  6. self.layerView.layer.transform = transform;
  7. self.layerView.layer.doubleSided = NO;
  8. }

IOS Core Animation Advanced Techniques的学习笔记(四)
图像没有了

Layer Flattening
自己看例子吧,例子5.7和5.8
Solid Objects
也自己看例子吧,例子5.9和5.10