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

2022-11-22 17:18:13

第五章：Transforms

Affine Transforms

CGAffineTransform是二维的

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

Creating a CGAffineTransform

主要有三种变化方法

旋转：

CGAffineTransformMakeRotation(CGFloat angle)

缩放：

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

移动：

CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)

例子5.1 CGAffineTransformMakeRotation

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

@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees
CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4);
self.layerView.layer.affineTransform = transform;
}
@end

修改 CGAffineTransformMakeScale

- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees
CGAffineTransform transform = CGAffineTransformMakeScale(0.5, 0.5);
self.layerView.layer.affineTransform = transform;
}

修改 CGAffineTransformMakeTranslation

- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees
CGAffineTransform transform = CGAffineTransformMakeTranslation(-50.0, 30.0);
self.layerView.layer.affineTransform = transform;
}

Combining Transforms

方法1：使用CGAffineTransformConcat

继续修改例子5.1

- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees
CGAffineTransform transform1 = CGAffineTransformMakeRotation(M_PI_4);
CGAffineTransform transform2 = CGAffineTransformMakeScale(0.5, 0.5);
CGAffineTransform transform = CGAffineTransformConcat(transform1, transform2);
self.layerView.layer.affineTransform = transform;
}

方法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

@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//create a new transform
CGAffineTransform transform = CGAffineTransformIdentity;
//scale by 50%
transform = CGAffineTransformScale(transform, 0.5, 0.5);
//rotate by 30 degrees
transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0);
//translate by 200 points
transform = CGAffineTransformTranslate(transform, 200, 0);
//apply transform to layer
self.layerView.layer.affineTransform = transform;
}
@end

下面记几个特殊值

1. 首先要知道函数 CGAffineTransformIdentity 初始化的结果

2. 左右翻转

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

3. 以右边为轴向右翻转

CGAffineTransformMake(-1,0,0,1,self.layerView.frame.size.width,0);

4. 上下翻转

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

5. 以底边为轴向下翻转

CGAffineTransformMake(1,0,0, -1,0,self.layerView.frame.size.height);

6. 转180°

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

7. 例子5.3，向右斜拉

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

代码：

@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
CGAffineTransform CGAffineTransformMakeShear(CGFloat x, CGFloat y)
{
CGAffineTransform transform = CGAffineTransformIdentity;
transform.c = -x;
transform.b = y;
return transform;
}
- (void)viewDidLoad
{
[super viewDidLoad];
//shear the layer at a 45-degree angle
self.layerView.layer.affineTransform = CGAffineTransformMakeShear(1, 0);
}
@end

8. 例子5.3，向左斜拉

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

3D Transforms

类似CGAffineTransform，CATransform3D是三维的

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是什么

{x, y, z}组成的向量就是旋转要使用的轴，angle是旋转角度

例：原图

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

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

缩放：

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时。如图：

当sx = 0.5，sy =0.5时。如图：

变换：

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；

}

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

或者修改键值

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

例子5.4

@interface ViewController ()
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
//rotate the layer 45 degrees along the Y axis
CATransform3D transform = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
self.layerView.layer.transform = transform;
}
@end

修改例子5.4，修改自http://lepetit-prince.net/ios/?p=451

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>
@interface ViewController ()
{
BOOL front;
}
@property (nonatomic, weak) IBOutlet UIView *layerView;
@end
@implementation ViewController
- (void)viewDidLoad
{
[super viewDidLoad];
front = YES;
self.layerView.layer.contents = (__bridge id)([UIImage imageNamed:@"front.png"].CGImage);
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[UIView animateWithDuration:0.5 animations:^{
self.layerView.layer.transform = CATransform3DMakeRotation(M_PI * 0.5, 0.0f, 1.0f, 0.0f);
} completion:^(BOOL finished) {
self.layerView.layer.transform = CATransform3DMakeRotation(M_PI * 1.5, 0.0f, 1.0f, 0.0f);
self.layerView.layer.contents = front ? (__bridge id)([UIImage imageNamed:@"back.png"].CGImage) : (__bridge id)([UIImage imageNamed:@"front.png"].CGImage);
[UIView animateWithDuration:0.5 animations:^{
self.layerView.layer.transform = CATransform3DMakeRotation(M_PI * 2, 0.0f, 1.0f, 0.0f);
} completion:^(BOOL finished) {
front = !front;
}];
}];
}
@end