学习动画——变换CGAffineTransform和CATransform3D

CGAffineTransform 仿射变形

cg：Core Graphics核心图形

Affine：仿射的；Transform：改变，使…变形；转换。

～～～～这些东西你注意过么～～～～～

NS:next step.一般是指数据，如NSObject、NSString。

CG：一般用于渲染，画图等。如CGAffine。

UI：一般用于普通的视图和控制器，

在objective－c中，CF、CA、CG、UI各指的是core foundation（核心基础） , core animation（核心动画）, core graphic（核心图形） , user interface（用户界面）的缩写。

～～～～这些东西你注意过么～～～～～

CGAffineTransform中涉及到了CGPoint和矩阵的内容，CGAffineTransform是一个可以和二维空间向量（例如CGPoint）做乘法的3X2的矩阵。CGAffineTransform是一个可以和二维空间向量（例如CGPoint）做乘法的3X2的矩阵。当对图层应用变换矩阵，图层矩形内的每一个点都被相应地做变换，从而形成一个新的四边形的形状。CGAffineTransform中的“仿射”的意思是无论变换矩阵用什么值，图层中平行的两条线在变换之后任然保持平行，CGAffineTransform可以做出任意符合上述标注的变换。

～～～～～～～～@—@！我是分割线哈哈！@—@～～～～～～～～～～～

创建一个CGAffineTransform

如下几个函数都创建了一个CGAffineTransform实例：CGAffineTransformMakeRotation(CGFloat angle)

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty);

CALayer同样也有一个transform属性，但它的类型是CATransform3D，而不是CGAffineTransform，本章后续将会详细解释。CALayer对应于UIView的transform属性叫做affineTransform.

UIView *trans = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];
[self.view addSubview:trans];
trans.backgroundColor = [UIColor lightGrayColor];

CALayer *lay = [CALayer layer];
lay.contents = (__bridge id _Nullable)([UIImage imageNamed:@"logo-60"].CGImage);
lay.frame = CGRectMake(25, 25, 150, 150);
[trans.layer addSublayer:lay];
//    trans.transform =  CGAffineTransformMakeRotation(M_PI_4);
trans.layer.affineTransform =CGAffineTransformMakeRotation(M_PI_4);//两个一样

混合变换

之前是单一变化，现在也可以混合变化；

Core Graphics提供了一系列的函数可以在一个变换的基础上做更深层次的变换，如果做一个既要缩放又要旋转的变换，这就会非常有用了。例如下面几个函数：CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)

CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)

CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

当操纵一个变换的时候，初始生成一个什么都不做的变换很重要–也就是创建一个CGAffineTransform类型的空值，矩阵论中称作单位矩阵，Core Graphics同样也提供了一个方便的常量：CGAffineTransformIdentity

接下来我们先旋转30 再平移动100，再缩小50%

CGAffineTransform affine = CGAffineTransformIdentity;
affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f);
affine = CGAffineTransformTranslate(affine, 100, 0);
affine = CGAffineTransformScale(affine, 0.5, 0.5);

trans.transform = affine;

很清楚的发现图片往下方移动了，这就出现了一个问题，就是在混合变换的时候，改变的内容之前的一项汇影响到之后改变项，所以在先旋转的时候那么之后的平移也会先选择30度，就相当于向斜下方移动，而且如果先进行缩放的话，移动的距离也会改变的。

//改变变换顺序
affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f);
affine = CGAffineTransformScale(affine, 0.5, 0.5);
affine = CGAffineTransformTranslate(affine, 100, 0);

剪切变换

这个不是常用，CGAffineTransform没有直接提供函数，它的效果叫倾斜更好，就是设置 CGAffineTransform 的 c 和d 属性。

CGAffineTransform affine = CGAffineTransformIdentity;
affine.c = 1;
affine.d = 1;

3D变化

CGAffineTransform仅仅对2D变换有效，为了在3D空间内移动或者旋转，通过transform属性（CATransform3D类型）可以真正做到这点。CATransform3D是一个可以在3维空间内做变换的4x4的矩阵。

3D的效果很简单，就是多了个z轴的处理，所以之前的评议旋转和缩放就变成了CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)

CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

//简单的一个旋转效果
CATransform3D affine = CATransform3DMakeRotation(M_PI_4, 1, 1, 0);
trans.layer.transform = affine;

透视投影

在真实世界中，当物体远离我们的时候，由于视角的原因看起来会变小，理论上说远离我们的视图的边要比靠近视角的边跟短，但实际上并没有发生，而我们当前的视角是等距离的，也就是在3D变换中任然保持平行，和之前提到的仿射变换类似。

在CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制：m34。m34用于按比例缩放X和Y的值来计算到底要离视角多远。m34的默认值是0，我们可以通过设置m34为-1.0 / d来应用透视效果，d代表了想象中视角相机和屏幕之间的距离，以像素为单位,通常500-1000。

CATransform3D  affine = CATransform3DIdentity;
affine.m34 = -1.0 / 500.0;

affine = CATransform3DRotate(affine, M_PI_4, 0, 1, 0);
trans.layer.transform = affine;

![这里写图片描述](http://img.blog.csdn.net/20160405145156397)