动画| 魔性形变之CGAffineTransform的使用
前言
在介绍UIView的2D、3D形变之前需要知道一个概念，那就是锚点，各种变换就会按照这个点来运动。所以想达到特殊的效果，可以通过修改锚点的位置来达到。
锚点的位置：默认为（0.5，0.5）。在对图像进行变换时，都是按照这个点来进行缩放，偏移等空间变换的。 一旦修改锚点的位置为：（0，0），那么图像的形变就会基于这个新锚点产生对应的效果。
CGAffineTransform
UIView的transform属性是一个CGAffineTransform类型，用于在二维空间做旋转，缩放和平移。CGAffineTransform是一个可以和二维空间向量（例如CGPoint）做乘法的3X2的矩阵。称为仿射变换，“仿射”的意思是无论变换矩阵用什么值，图层中平行的两条线在变换之后任然保持平行”。
官方定义：
struct CGAffineTransform {
CGFloat a, b, c, d;
CGFloat tx, ty;
};虽然结构体中只有a,b,c,d,tx,ty 6个参数，但其实还有3个固定的参数[0,0,1]来组成3x3的矩阵。如下图所示：
[图片上传失败...(image-1b6485-1522132215759)]
x' = ax + cy + tx y' = xb + yd + ty
常规应用
恢复原状
self.myView.transform = CGAffineTransformIdentity;平移
self.myView.transform = CGAffineTransformIdentity;
[UIView animateWithDuration:0.3 animations:^{
self.myView.transform = CGAffineTransformMakeTranslation(100, 100);
}];
或者 ************************************
在某个transform变换的基础上平移
CGAffineTransform transform = CGAffineTransformIdentity;
transform =CGAffineTransformTranslate(transform, 100, 100);
或者 ************************************
self.showView.transform = CGAffineTransformMake(1, 0, 0, 1, 100, 100);放缩
self.myView.transform = CGAffineTransformIdentity;
[UIView animateWithDuration:0.3 animations:^{
self.myView.transform = CGAffineTransformMakeScale(.5, .5);
}];
或者 ************************************
在某个transform变换的基础上放缩
CGAffineTransform transform = CGAffineTransformIdentity;
transform =CGAffineTransformScale(transform, .5, .5);
或者 ************************************
self.showView.transform = CGAffineTransformMake(.5, 0, 0, .5, 0, 0);旋转
self.myView.transform = CGAffineTransformIdentity;
[UIView animateWithDuration:0.3 animations:^{
self.myView.transform = CGAffineTransformMakeRotation(M_PI_4);
}];
或者 ************************************
在某个transform变换的基础上旋转
CGAffineTransform transform = CGAffineTransformIdentity;
transform = CGAffineTransformRotate(transform, M_PI_4);
反向旋转
self.showView.transform = CGAffineTransformInvert(transform);
或者 ************************************
self.showView.transform = CGAffineTransformMake(cos(M_PI_4), sin(M_PI_4), -sin(M_PI_4), cos(M_PI_4), 0, 0);其他有意思的方法
/* 反向旋转 */
CG_EXTERN CGAffineTransform CGAffineTransformInvert(CGAffineTransform t)
CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
/* 合并两个transform ：t' = t1 * t2 */
CG_EXTERN CGAffineTransform CGAffineTransformConcat(CGAffineTransform t1,
CGAffineTransform t2) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
/* 判读两个transform是否相等 */
CG_EXTERN bool CGAffineTransformEqualToTransform(CGAffineTransform t1,
CGAffineTransform t2) CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);
/* 得到新的中心:
p' = p * t
where p = [ x y 1 ]. */
CG_EXTERN CGPoint CGPointApplyAffineTransform(CGPoint point,
CGAffineTransform t) CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
/* 得到新的size:
s' = s * t
where s = [ width height 0 ]. */
CG_EXTERN CGSize CGSizeApplyAffineTransform(CGSize size, CGAffineTransform t)
CG_AVAILABLE_STARTING(__MAC_10_0, __IPHONE_2_0);
/* 得到新的rect */
CG_EXTERN CGRect CGRectApplyAffineTransform(CGRect rect, CGAffineTransform t)
CG_AVAILABLE_STARTING(__MAC_10_4, __IPHONE_2_0);本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.03.26 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录