CGAffineTransform

写在最前
良好的用户体验,离不开好的动画效果,作为一个码农每次看到好的动画总会去想想到底是怎么实现的,虽然之前也做过些动画,但是都没怎么去分析过,最近有空,就简单研究了下,以此分享

CGAffineTransform --view的2D变换

CGAffineTransform是作用于View的主要为2D变换,而CATransform3D主要作用于Layer,为3D变换使用,先简单了解下CGAffineTransform这个2D变换

矩阵乘法

A B矩阵相乘,需要A的列数等于B的行数才可行,结果则为A行B列的矩阵C,C的每个元素值为A对应的行与B对应的列的元素乘积的和
如以下矩阵:

CGAffineTransform_第1张图片
使用方法

矩阵具体使用

CGAffineTransform原理

其结构为

struct CGAffineTransform {
  CGFloat a, b, c, d;
  CGFloat tx, ty;
};

其实是一个矩阵


因为该矩阵的最后一列总是(0,0,1),所以对我们而言,有用的信息就是前面两列

对一个view进行变换,可以看做对这个view的每个点做一个乘法,起结果大概就是如下:

结果.png

计算结果为

[x' y' 1] = [ax + cy + tx   bx + dy + ty  1] ;
x' =  ax + cy + tx;(tx为有下标的tx,为一个常数,而非x的倍数)
y' =  bx + dy + ty;

假设 b = c = 0
那么可以有下面两个情况:

a表示x水平方向的缩放,tx表示x水平方向的偏移
d表示y垂直方向的缩放,ty表示y垂直方向的偏移
如果b和c不为零的话,那么视图肯定发生了旋转

下面我们就api提供的几种变换看看

1.CGAffineTransformIdentity
/* The identity transform: [ 1 0 0 1 0 0 ]. */

CG_EXTERN const CGAffineTransform CGAffineTransformIdentity
  CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

分析:这里我们将a b c d tx ty 分别对应上面的结果矩阵[ 1 0 0 1 0 0 ]
那么可以得到identity矩阵

CGAffineTransformIdentity.jpeg

通过上面的 a b c d tx ty所代表的意思,我们可以发现,这就是没有变化的最初的样子

2. CGAffineTransformMakeTranslation
/* Return a transform which translates by `(tx, ty)':
     t' = [ 1 0 0 1 tx ty ] */

CG_EXTERN CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx,
  CGFloat ty) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

根据注释中的结果,我们可以得到下面的矩阵

CGAffineTransformMakeTranslation.jpeg

同样的道理,我们可以得知,这其实就是在x ,y方向的一个平移

3.CGAffineTransformMakeScale
/* Return a transform which scales by `(sx, sy)':
     t' = [ sx 0 0 sy 0 0 ] */

CG_EXTERN CGAffineTransform CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
  CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

根据注释中的结果,我们可以得到下面的矩阵


CGAffineTransform_第2张图片
CGAffineTransformMakeScale.jpeg

同样的道理,我们可以得知,这是一个缩放,针对x,y缩放

4.CGAffineTransformMakeRotation
/* Return a transform which rotates by `angle' radians:
     t' = [ cos(angle) sin(angle) -sin(angle) cos(angle) 0 0 ] */

CG_EXTERN CGAffineTransform CGAffineTransformMakeRotation(CGFloat angle)
  CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

将注释中的结果带入矩阵可以得到以下矩阵

CGAffineTransform_第3张图片
CGAffineTransformMakeRotation.jpeg

因为b,c不为0,所以图形是发生了旋转的

5.CGAffineTransformMake
/* Return the transform [ a b c d tx ty ]. */

CG_EXTERN CGAffineTransform CGAffineTransformMake(CGFloat a, CGFloat b,
  CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)
  CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);

之所以将这个函数放在最后,是以为有了前面的基础,我们就可以更好的理解,这个可以将三种动画同时执行
我自己测试了一个简单的例子

self.view.transform = CGAffineTransformMake(0.8, 0.1, 0.1, 0.8, 10, 10);

效果有点怪,如下图

CGAffineTransform_第4张图片
1.gif

组合动画(暂时这么定义)

CGAffineTransformTranslate(CGAffineTransform t,
  CGFloat tx, CGFloat ty)

CGAffineTransformScale(CGAffineTransform t,
  CGFloat sx, CGFloat sy)

CGAffineTransformRotate(CGAffineTransform t,
  CGFloat angle)

CGAffineTransformConcat(CGAffineTransform t1,
  CGAffineTransform t2)


//反向的仿射矩阵比如(x,y)通过矩阵t得到了(x',y')那么通过这个函数生成的t'作用与(x',y')就能得到原始的(x,y)
CG_EXTERN CGAffineTransform CGAffineTransformInvert(CGAffineTransform t)

上面的几个API,通过参数CGAffineTransform t我们可以看出,这应该是类型组合性质的,
比如CGAffineTransformTranslate  可以理解为原始的基础上加上偏移,CGAffineTransform t也可以是多个进行组合而成。
CGAffineTransformConcat 有点类似CAAnimationGroup,可以将一些动画进行组合

CGAffineTransformInvert有点特殊,下面是我进行的一个简单测试
CGAffineTransform trans = CGAffineTransformScale(CGAffineTransformMakeRotation(M_PI/4),0.5,0.5);
 self.view.transform = CGAffineTransformInvert(trans);
根据其效果,可以大概理解为,反向变换,安常理 trans 应该是顺时针45度并且缩小0.5,
然而执行CGAffineTransformInvert后,效果为逆时针45度并且当大1倍

其余的矩阵变换

//得到新的点
CGPointApplyAffineTransform(CGPoint point,CGAffineTransform t)

//得到新的size
CGSizeApplyAffineTransform(CGSize size, CGAffineTransform t)

//得到新的rect
CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t)

写在最后,若有什么写的不好的地方,请各位大神高抬贵手,多多指教,知识就是在不断的探讨中进步,关于CATransform3D 其实和这个大同小异,只是多了一个Z轴方向上面的变化

你可能感兴趣的:(CGAffineTransform)