CGAffineTransform

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

CGAffineTransform --view的2D变换

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

矩阵乘法

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

使用方法

矩阵具体使用

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);

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


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);

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

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);

效果有点怪,如下图

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轴方向上面的变化

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

推荐阅读更多精彩内容