美文网首页Marked Articles动画
view.transform属性实战

view.transform属性实战

作者: SmallWhiteMouse | 来源:发表于2018-04-24 23:33 被阅读37次

    transform:形变属性。能完成的功能:平移、缩放、旋转。本质上这些属性就是操纵UIView的frame。一般配合animateWithDuration做动画效果。

    1.初始化方法

    self.view.transform = CGAffineTransformMake(1, 1, 1, 1, 10, 10);
    
    • CGAffineTransform是一个结构体,类似我们常见的CGRect、size,创建是利用CG....Make(),CGAffineTransform同样也是如此。

    • CGAffineTransformMake(a,b,c,d,tx,ty) ad缩放bc旋转tx,ty位移,基础的2D矩阵 公式 x=ax+cy+tx y=bx+dy+ty 1.矩阵的基本知识:structCGAffineTransform{ CGFloata,b,c,d; CGFloattx,ty;};CGAffineTransformCGAffineTransformMake

    • CGAffineTransformMake()深入理解请点击

    2、基本使用

    transform的使用其实就是将一个控件的位置、大小、角度进行改变

    ①平移Translation
       //这句话代表:tempView 水平方向平移100,垂直方向平移50.
       self.tempView.transform = CGAffineTransformMakeTranslation(100, 50);
    
    ②缩放Scale
       //宽度缩放0.5倍,高度缩放0.3倍
        self.tempView.transform = CGAffineTransformMakeScale(0.5, 0.3);
    
    • 缩放是绕着中心点进行缩放
    ③旋转Rotation
       //顺时针旋转180度
        self.tempView.transform = CGAffineTransformMakeRotation(M_PI_2);
    
    • 选转是旋转多少角度。iOS中 180°M_PI,90°M_PI_2,45°M_PI_4
    • 正数是顺时针旋转,负数是逆时针方向旋转

    3.多种形变嵌套使用

    形变的嵌套使用其实就是同时对View进行缩放、平移、旋转。例如边旋转边平移

    ①错误写法

        //错误示范
        [UIView animateWithDuration:2.f animations:^{
            self.tempView.transform = CGAffineTransformMakeTranslation(100, 50);
            self.tempView.transform = CGAffineTransformMakeRotation(M_PI_2);
            self.tempView.transform = CGAffineTransformMakeScale(0.5, 0.3);
        }];
    
    • 这样达不到同时对View缩放、平移、旋转的效果
      原因:view. transform归根结底也是个属性,对属性依次进行赋值,你对frame赋值三次,系统最后选择的是你最后依次赋值的一个值。所以上边错误示范里边只会执行宽度缩放0.5倍,高度缩放0.3倍的效果
    ②正确使用: 对transform对象进行形变操作
        //正确思路
        [UIView animateWithDuration:2.f animations:^{
            //1.首先创建一个CGAffineTransform平移对象
            CGAffineTransform  translation = CGAffineTransformMakeTranslation(100, 50);
            //2.将平移对象嵌套到缩放形变中
            CGAffineTransform  scale = CGAffineTransformScale(translation, 0.5, 0.3);
            
            //3.将上边的形变再嵌套
            self.tempView.transform = CGAffineTransformRotate(scale, M_PI_2);
        }];
    
    • 嵌套顺序是随意的,不要拘泥于示例代码。读者可以自己试一试

    4.形变叠加

    形变叠加就是如果在上一次的形变基础上再叠加一个同样的效果。 比如说我要做出这样一种效果点击一下屏幕,tempView选转45度,再点击再旋转45度,以此类推。

    ①错误写法
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
        
        [UIView animateWithDuration:1.0 animations:^{
           
            self.tempView.transform = CGAffineTransformMakeRotation(M_PI_4);
        }];
    }
    
    • 这样书写的效果仅仅就是第一次点击旋转了45度,第二次及之后的点击都没有效果。
      原因:CGAffineTransformMake....做出的三种形变都是相对于控件没有做任何形变最初的状态做的形变。
    ②正确写法
    第一种:对形变传入的参数每次累加
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
        [UIView animateWithDuration:1.0 animations:^{
            
            static double angle = 0;
            angle += M_PI_4;
            self.tempView.transform = CGAffineTransformMakeRotation(angle);
        }];
    }
    
    • angle你可以定义为全局变量,每次累加变量即可
    • 当static关键字修饰局部变量时,该局部变量只会初始化一次,在系统中只有一份内存 。static关键字不可以改变局部变量的作用域,但是可延长局部变量的生命周期,该变量直到整个项目结束的时候才会被销毁。(笔者这样写只是为了和下边第二种正确写法做比较)
    第二种:利用形变嵌套
    - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{
    
        [UIView animateWithDuration:1.0 animations:^{
        
            self.tempView.transform = CGAffineTransformRotate(self.tempView.transform, M_PI_4));
        }];
    }
    
    • 这样写我是对上一次的形变对象进行了改变,所以也是可以达到效果。
    • 和上一种比较不用定义全局变量,不用考虑内存。

    5、清除形变

    ①单一形变清空
    self.tempView.transform = CGAffineTransformMakeRotation(0);
    
    • 比如你在开始只做了旋转形变,那么只要将旋转形变参数传0。就回归旋转之前的状态
    • 局限:多种形变嵌套就没办法用这种方式清除了
    ②清空控件所有形变属性
     self.tempView.transform = CGAffineTransformIdentity;
    
    • 清空控件所有transform,以前的平移、缩放、旋转都消失,回归控件未做形变之前的状态。
    • 应用拓展:你已经利用transform做了嵌套效果了,过一段时间又想让他慢慢回到初始状态。这个就可以做出开头和结尾对应的效果。就按照原来的效果回去。

    如果您有什么疑问或者发现书写歧义,非常感激您能留言~

    相关文章

      网友评论

        本文标题:view.transform属性实战

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