写在最前
良好的用户体验,离不开好的动画效果,作为一个码农每次看到好的动画总会去想想到底是怎么实现的,虽然之前也做过些动画,但是都没怎么去分析过,最近有空,就简单研究了下,以此分享
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的每个点做一个乘法,起结果大概就是如下:
计算结果为
[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矩阵
通过上面的 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);
根据注释中的结果,我们可以得到下面的矩阵
同样的道理,我们可以得知,这其实就是在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);
根据注释中的结果,我们可以得到下面的矩阵
同样的道理,我们可以得知,这是一个缩放,针对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);
将注释中的结果带入矩阵可以得到以下矩阵
因为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);
效果有点怪,如下图
组合动画(暂时这么定义)
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轴方向上面的变化