iOS 核心动画的变换.pdf

iOS 核⼼动画的变换 很不幸，没人能告诉你母体是什么，你只能自己体会 -- 骇客帝国 在第四章“可视效果” ，我们研究了一些增强图层和它的内容显示效果的一些技术， 在这一章 ，我们将要研究可以用来对图层旋转，摆放或者扭曲的 CGAffineTransform，以及可以将扁平物体转换成三维空间对象的 CATransform3D （而不是仅仅对圆角矩形添加下沉阴影）。 仿射变换 在第三章“图层几何学” ，我们使用了UIView的transform属性旋转了钟的指针，但 并没有解释背后运作的原理，实际上UIView的transform属性是一 个CGAffineTransform类型，用于在二维空间做旋转，缩放和平 移。CGAffineTransform是一个可以和二维空间向量 （例如CGPoint ）做乘法的3X2 的矩阵 （见图5.1）。 图5.1 用矩阵表示的CGAffineTransform和CGPoint 用CGPoint的每一列和CGAffineTransform矩阵的每一行对应元素相乘再求和，就 形成了一个新的CGPoint类型的结果。要解释一下图 显示的灰色元素，为了能让矩 阵做乘法，左边矩阵的列数一定要和右边矩阵的行数个数相同，所以要给矩阵填充一 些标志值，使得既可以让矩阵做乘法，又不改变运算结果，并且没必要存储这些添加 的值，因为它们的值不会发生变化，但是要用来做运算。 因此，通常会用3×3 （而不是2×3）的矩阵来做二维变换，你可能会见到3行2列格 式的矩阵，这是所谓的以列为主的格式，图5.1所示的是以行为主的格式，只要能保 持一致，用哪种格式都无所谓。 当对图层应用变换矩阵，图层矩形内的每一个点都被相应地做变换，从而形成一个新 的四边形的形状。CGAffineTransform 的“仿射”的意思是无论变换矩阵用什么 值，图层 平行的两条线在变换之后任然保持平行，CGAffineTransform可以做出 任意符合上述标注的变换，图5.2显示了一些仿射的和非仿射的变换： 图5.2 仿射和非仿射变换 创建一个CGAffineTransform 对矩阵数学做一个全面的阐述就超出本书的讨论范围了，不过如果你对矩阵完全不熟 悉的话，矩阵变换可能会使你感到畏惧。幸运的是，Core Graphics提供了一系列函 数，对完全没有数学基础的开发者也能够简单地做一些变换。如下几个函数都创建了 一个CGAffineTransform实例： CGAffineTransformMakeRotation(CGFloat angle) CGAffineTransformMakeScale(CGFloat sx, CGFloat sy) CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) 旋转和缩放变换都可以很好解释--分别旋转或者缩放一个向量的值。平移变换是指每 个点都移动了向量指定的x或者y值--所以如果向量代表了一个点，那它就平移了这个 点的距离。 我们用一个很简单的项目来做个demo，把一个原始视图旋转45度角度 （图5.3） 图5.3 使用仿射变换旋转45度角之后的视图 UIView可以通过设置transform属性做变换，但实际上它只是封装了内部图层的变 换。 CALayer同样也有一个transform属性，但它的类型是CATransform3D，而不 是CGAffineTransform，本章后续将会详细解释。CALayer对应于UIView的 transform属性叫做affineTransform，清单5.1的例子就是使 用affineTransform对图层做了45度顺时针旋转。 清单5.1 使用affineTransform对图层旋转45度 @interface ViewController () @ ro erty (nonatomic, weak) IBOutlet UIView *layerView; @end @im lementation ViewController - (void)viewDidLoad { [su er viewDidLoad]; //rotate the layer 45 degrees CGAffineTransform transform = CGAffineTransformMakeRotation(M_PI_4) self .layerView.layer.affineTransform = transform;