CGAffineTransform和CATransform3D

上周没有分享,因为上周放假,哈哈哈哈哈哈哈~~!!!!!! 这周本来是想分享CAShapeLayer CATextLayer CATransformLayer这些Layer的子类的,但是我发现后面做变化的时候可能会用到今天的这个东西,就先拿出来说一下.

一.CGAffineTransform 仿射变换

CG(CoreGraphics框架) Affine(仿射) Transform(变化) 可想而知CGAffineTransform是CoreGraphics框架提供的一个类.UIView有一个transform的属性,这个属性的类型就是CGAffineTransform类型,用于在二维空间做旋转,缩放和平移.而CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵,layer的affineTransform的属性也是CGAffineTransform.
1.1
如上图,用CGPoint的每一列和CGAffineTransform矩阵的每一行对应元素相乘再求和,就形成了一个新的CGPoint类型的结果.要解释一下图中显示的灰色元素,为了能让矩阵做乘法,左边矩阵的列数一定要和右边矩阵的行数个数相同,所以要给矩阵填充一些标志值,使得既可以让矩阵做乘法,又不改变运算结果,并且没必要存储这些添加的值,因为它们的值不会发生变化,但是要用来做运算.

简单的仿射变换:
CGAffineTransformMakeRotation(CGFloat angle)
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)

混合仿射变化:
CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

创建一个CGAffineTransform类型的空值,矩阵论中称作单位矩阵,Core Graphics同样提供了一个方便的常量:
CGAffineTransformIdentity

最后,如果需要混合两个已经存在的变换矩阵,就可以使用如下方法,在两个变换的基础上创建一个新的变换
CGAffineTransformConcat(CGAffineTransform t1, CGAffineTransform t2);

接下来上代码
/**
 *
 
 CGAffineTransform,属于CoreGraphics框架中的一个类.
 UIView有一个transform的属性,这个属性的类型就是CGAffineTransform类型,用于在二维空间做旋转,缩放和平移.CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X2的矩阵,layer的affineTransform的属性也是CGAffineTransform.
 
 简单仿射变化:
 CGAffineTransformMakeRotation(CGFloat angle)
 CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
 CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)
 
 混合仿射变化:
 CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)
 CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)
 CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)
 
 */

@interface ViewController ()

@end

@implementation ViewController

-(UIView *)getTest{
    
    UIView *view = [[UIView alloc]init];
    view = [[UIView alloc]init];
    view.backgroundColor = [UIColor cyanColor];
    return view;
}

- (void)viewDidLoad {
    
    [super viewDidLoad];

    //view简单仿射变换
    UIView *testV1 = [self getTest];
    testV1.frame = CGRectMake(100, 50, 100, 100);
    [self.view addSubview:testV1];
    testV1.transform = CGAffineTransformMakeRotation(M_PI_4);
    
    //layer简单仿射变换
    UIView *testV2 = [self getTest];
    testV2.frame = CGRectMake(100, 200, 100, 100);
    [self.view addSubview:testV2];
    testV2.layer.affineTransform = CGAffineTransformMakeRotation(M_PI_4);
    
    
    //混合仿射变化
    //创建一个CGAffineTransform类型的空值,矩阵论中称作单位矩阵,CoreGraphics同样提供了一个方便的常量 CGAffineTransformIdentity
    CGAffineTransform transform = CGAffineTransformIdentity;
    transform = CGAffineTransformScale(transform, 0.5, 0.5);
    transform = CGAffineTransformRotate(transform, M_PI / 180.0 * 30.0);
    transform = CGAffineTransformTranslate(transform, 200, 0);
    
    UIView *testV3 = [self getTest];
    testV3.frame = CGRectMake(100, 350, 100, 100);
    [self.view addSubview:testV3];
    testV3.transform = transform;
}

二. CATransform3D 3D变换

CATransform3D属于CoreAnimation框架的一个类.可以用来让图层靠近或者远离相机(用户视角),transform属性(CATransform3D类型)可以真正做到这点,即让图层在3D空间内移动或者旋转.和CGAffineTransform类似,CATransform3D也是一个矩阵,但是和2x3的矩阵不同,CATransform3D是一个可以在3维空间内做变换的4x4的矩阵.
2.1
和CGAffineTransform矩阵类似,Core Animation提供了一系列的方法用来创建和组合CATransform3D类型的矩阵,但是3D的平移和旋转多处了一个z参数,并且旋转函数除了angle之外多出了x,y,z三个参数,分别决定了每个坐标轴方向上的旋转

CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)
CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

m34

CATransform3D的m34元素,用来做透视m34的默认值是0,我们可以通过设置m34为-1.0 / d来应用透视效果,d代表了想象中视角相机和屏幕之间的距离,以像素为单位实际上并不需要,大概估算一个就好了.因为视角相机实际上并不存在,所以可以根据屏幕上的显示效果自由决定它的防止的位置.通常500-1000就已经很好了,但对于特定的图层有时候更小后者更大的值会看起来更舒服,减少距离的值会增强透视效果,所以一个非常微小的值会让它看起来更加失真,然而一个非常大的值会让它基本失去透视效果.

继续上代码

-(UIView *)getTest{
    
    UIView *view = [[UIView alloc]init];
    view = [[UIView alloc]init];
    view.backgroundColor = [UIColor cyanColor];
    return view;
}

- (void)viewDidLoad {
    
    [super viewDidLoad];

    UIView *test1 = [self getTest];
    test1.frame = CGRectMake(100, 100, 100, 100);
    [self.view addSubview:test1];
    CATransform3D transform = CATransform3DIdentity;
    transform.m34 = - 1.0 / 500.0;
    transform = CATransform3DRotate(transform, M_PI_4, 0, 1, 0);
    test1.layer.transform = transform;
}

OK 终于写完了~~~~ 希望各位客官多多提建议

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345