Marked Articles动画

view.transform属性实战

2018-04-24  本文已影响37人  SmallWhiteMouse

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

1.初始化方法

self.view.transform = CGAffineTransformMake(1, 1, 1, 1, 10, 10);

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);

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);
    }];
②正确使用: 对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);
    }];
}
②正确写法
第一种:对形变传入的参数每次累加
- (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);
    }];
}
第二种:利用形变嵌套
- (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);
②清空控件所有形变属性
 self.tempView.transform = CGAffineTransformIdentity;

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

上一篇下一篇

猜你喜欢

热点阅读