美文网首页
仿射动画

仿射动画

作者: Harely | 来源:发表于2019-12-24 12:26 被阅读0次

UIViewCGAffineTransform类型的属性`transform,它是定义在二维空间上完成View的平移,旋转,缩放等效果的实现。

  CGAffineTransform是一个映射转换3*3的矩阵,用来绘画2D图像。可以实现放大、缩小、平移。其结构体为:

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


  CGAffineTransform是一个结构体,里面有(a,b,c,d,tx,ty)六个参数,对应着一个3 * 3 的矩阵,有九个参数,默认值是[ 1 0 0 1 0 0 ]。如下图:


3*3 矩阵

参数的用处:

  • a: 用来控制在x轴方向上的缩放;
  • b: 旋转会用到,初始值0。
  • c: 旋转会用到,初始值0。
  • d: 用来控制在y轴方向上的缩放;
  • tx: 视图x轴平移,初始值0,没有平移。
  • ty: 视图y轴平移,初始值0,没有平移。

  为了把二维图形的旋转、缩放、平移变化统一在一个坐标系里,引入了齐次坐标的概念,即把一个图形用一个三维矩阵表示,其中第三列总是(0,0,1),用来作为坐标系的标准。所以所有的变化都由前两列完成.


公式计算

矩阵计算

设原坐标设为(x,y,1)

x轴、y轴方向上的平移量 计算后的x、y的值
上图中的tx 和ty 记做 t小x ,t小y

                  |a    b    0|
  [x,y,1]  *      |c    d    0|     =     [ax+cy+t小x   bx+dy+t小y  1] ;

通过矩阵运算后的坐标[ax+cy+t小x bx+dy+t小y 1]


CGAffineTransform

/*
CGAffineTransform transform  = CGAffineTransformMake(CGFloat a,CGFloat b,CGFloat c,CGFloa td,CGFloat tx,CGFloat ty)
*/

//CGAffineTransformIdentity是系统提供的一个常量,没有做任何的转换
//其值为:[ 1 0 0 1 0 0 ](和原图一样的transform)
CGAffineTransform  transform = CGAffineTransformIdentity;

默认的CGAffineTransformIdentity


示例


//1.先正常创建collectionview 
_collectionview=[[UICollectionView alloc]initWithFrame:CGRectMake(0,kScreenHeigth-100-SafeAreaBoHttomHeight, kScreenWidth, 100) 
collectionViewLayout:layout];
//2.相对移动 往下移动高的距离(本例为100),还有一种方法,创建时y的坐标就再加上高,达到同样的效果
   _collectionview.transform = CGAffineTransformMakeTranslation(0, 100);
//3.加个view的简单动画,设个觉得可以的动画时间
 [UIView animateWithDuration:0.4 animations:^{
            self.collectionview.transform = CGAffineTransformMakeTranslation(0, 0);
        }];

消失收回的效果

原理和推出一样,在动画结束后消失视图

//先移动试图到底部,动画结束,移除视图
  [UIView animateWithDuration:0.4 animations:^{
        self.collectionview.transform = CGAffineTransformMakeTranslation(0, 100);
    } completion:^(BOOL finished) {
         [self removeFromSuperview];
    }];

相关文章

网友评论

      本文标题:仿射动画

      本文链接:https://www.haomeiwen.com/subject/csnxoctx.html