UI基础 - CGAffineTransform | UIView动画

▶ CGAffineTransform

1 - CGAffineTransform 是一个用于处理形变的类，可以改变控件的平移、缩放、旋转等；它的坐标系统采用的是二维坐标系：向右为 x轴 正方向，向下为 y轴 正方向；它的形变是通过仿射变换矩阵来控制的：其中平移是矩阵相加；旋转与缩放则是矩阵相乘

2 - 为了合并矩阵运算中的加法和乘法，引入了齐次坐标的概念：它提供了用矩阵运算把二维、三维甚至高维空间中的一个点集从一个坐标系变换到另一个坐标系的有效方法！CGAffineTransform 形变就是把二维形变使用一个三维矩阵来表示，其中第三列总是 (0,0,1)，形变通过前两列来控制

CGAffineTransformMake(CGFloat a, CGFloat b, CGFloat c, CGFloat d, CGFloat tx, CGFloat ty)

通过变换矩阵左乘向量，将空间中的一个点集从一个坐标系变换到另一个坐标系中，计算方式如下

其中 tx 用来控制在 x轴 方向上的平移；ty 用来控制在 y轴 方向上的平移

a 用来控制在 x轴 方向上的缩放；d 用来控制在 y轴 方向上的缩放

abcd 共同控制旋转

3 - 代码示例：仿射变换的基本使用

#import "ViewController.h"
@implementation ViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor cyanColor];
    self.title = @"CGAffineTransform";

    // Btn 按钮
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
    btn.frame = CGRectMake(50, 90, self.view.frame.size.width - 100, 30);
    [btn setTitle:@"点我变换" forState:UIControlStateNormal];
    btn.layer.cornerRadius = 6;
    [btn setTitle:@"松开我" forState:UIControlStateHighlighted];
    btn.backgroundColor = [UIColor redColor];
    [btn addTarget:self action:@selector(doTransfrom) forControlEvents: UIControlEventTouchUpInside ];
    [self.view addSubview:btn];
    
    // 图片
    UILabel *lab = [[UILabel alloc] init];
    lab.frame = CGRectMake(80, 150, self.view.frame.size.width - 160, 220) ;
    lab.text = @"---我是背景文案---";
    lab.textAlignment = NSTextAlignmentCenter;
    lab.tag = 1000;
    lab.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:lab];
}

// 旋转
- (void)doTransfrom{
    UILabel *aView = (UILabel *)[self.view viewWithTag:1000];
    
//-------------  测试一：旋转  -------------
//    // 当弧度为正值时，顺时针旋转；反之逆时针旋转
//    // CGAffineTransformMakeRotation 以初始位置为基准
//    aView.transform = CGAffineTransformMakeRotation(M_PI / 4);
//
////    // CGAffineTransformRotate：以一个已经存在的形变为基准
////    aView.transform = CGAffineTransformRotate(aView.transform, M_PI_4);
//
//    // CGAffineTransformIdentity：可以在形变之后设置该值以还原到最初状态
//    // 开启动画：验证在形变后还原到初始状态
//    [UIView beginAnimations:nil context:nil];
//    [UIView setAnimationDuration:1.5];
//    aView.transform = CGAffineTransformIdentity;
//    // aView.transform = CGAffineTransformMake(1, 0, 0, 1, 0, 0);// 原始值
//    [UIView commitAnimations];

//-------------  测试二：缩放  -------------
//    // CGAffineTransformMakeScale
//    // 实现以初始位置为基准，在 x轴 方向上缩放 x 倍，在 y轴 方向上缩放 y 倍
//    // 当 x 为正值时，会在 x轴 方向上缩放 x 倍。反之，则在缩放的基础上沿着竖直线翻转
//    // 当 y 为正值时，会在 y轴 方向上缩放 y 倍。反之，则在缩放的基础上沿着水平线翻转
//    aView.transform = CGAffineTransformMakeScale(-0.8, -0.8);
//
////    // CGAffineTransformScale 以一个已经存在的形变为基准
////    aView.transform = CGAffineTransformScale(aView.transform, 0.9, 0.9);

//-------------  测试三：平移  -------------
    // CGAffineTransformMakeTranslation
    // 实现以初始位置为基准，在 x 轴方向上平移 x 单位，在 y 轴方向上平移 y 单位
    aView.transform = CGAffineTransformMakeTranslation(20,-30);// 右上
    
//    // CGAffineTransformTranslate 以一个已经存在的形变为基准
//    aView.transform = CGAffineTransformTranslate(aView.transform,20,-30);
}
@end

▶ UIView动画

1 - iOS 中动画主要分为 UIView动画 和 CALayer动画；UIView动画本质上也是 CALayer动画；UIView动画分为 UIView属性动画 和 UIViewTransition动画

2 - UIView属性动画：其动画属性有 frame、center、bounds、alpha、transform、backgroundColor... 

3 - 动画方法

// 如果两个动画发生在同一个 View 中，且前一个动画还未结束而后一个动画就开始进行的情况下
// 该方法会将动画运行的当前状态作为下一个状态的开始状态，这样就避免了动画跳跃的不连贯问题
[UIView setAnimationBeginsFromCurrentState:YES];

动画的实现除了可由动画块实现外，也可以使用 block

4 - UIViewTransition

过渡给 UIView动画块 添加了视觉表现力

// cache 参数告诉系统是否用 Cache 进行动画（与硬件相关），一般填 yes
+ (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache;
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^ __nullable)(BOOL finished))completion;
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^ __nullable)(void))animations completion:(void (^ __nullable)(BOOL finished))completion;

过渡效果在 UIKit 中封装了 4 种效果

typedef NS_ENUM(NSInteger, UIViewAnimationTransition) {
    UIViewAnimationTransitionNone,
    UIViewAnimationTransitionFlipFromLeft,  // 从左向右旋转
    UIViewAnimationTransitionFlipFromRight, // 从右向左旋转
    UIViewAnimationTransitionCurlUp,        // 向上翻页
    UIViewAnimationTransitionCurlDown,      // 向下翻页
};

5 - 代码示例

A. UIView动画块

// - ViewController.m

#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,strong)UILabel *animationView; // 要执行的动画 UI
@property(assign,nonatomic)CGRect frameDemo;       // 记录动画视图 初始frame
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 动画
    self.animationView = [[UILabel alloc] initWithFrame:CGRectMake(20, 50, 100, 40)];
    self.animationView.text = @"属性动画";
    self.animationView.textAlignment = NSTextAlignmentCenter;
    self.animationView.textColor = [UIColor blackColor];
    self.animationView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.animationView];
    self.frameDemo = self.animationView.frame;
    
    // 动画块：开启动画（beginAnimations）到提交动画（commitAnimations）之间的代码
    
    // 开启动画---------------------------
    [UIView beginAnimations:@"animation01" context:@"看看是啥"];
    [UIView setAnimationDelay:1.0];    // 延迟
    [UIView setAnimationDelegate:self];// 设置代理：可以监控动画的开始和结束
    
    // 也可以定义一个方法使其成为代理方法
    // 它会覆盖自身相应的代理方法
    //[UIView setAnimationDidStopSelector:@selector(animationFinished:)];
    
    [UIView setAnimationDuration:3.0]; // 动画时间：1 ~ 2 秒为宜
    [UIView setAnimationRepeatCount:2];// 重复次数
    [UIView setAnimationRepeatAutoreverses:YES];// 动画反弹
    [UIView setAnimationCurve:UIViewAnimationCurveEaseOut];// 过渡曲线
    
    // 影响动画的属性
    self.animationView.frame = CGRectMake(120, 350, 100, 40);
    self.animationView.alpha = 0.1;
    self.animationView.backgroundColor = [UIColor yellowColor];
    self.animationView.backgroundColor = [UIColor greenColor];
    self.animationView.transform = CGAffineTransformMakeRotation(M_PI);
    
    // 提交动画--------------------------------
    [UIView commitAnimations];
}

- (void)animationFinished:(id)sender{
    NSLog(@"animation01  DidEnd");
}

#pragma mark - 代理方法
// 开始
-(void)animationWillStart:(NSString *)animationID context:(void *)context{
    if ([animationID isEqualToString:@"animation01"]) {
        NSLog(@"animation01 will start--%@",context);
    }
}

// 结束：finished 参数很重要，我们可以用来判断动画是否是正常结束（正常返回 1，否则返回 0）
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{
    
    // UIView动画：如果 frame 发生改变，动画结束后它不会恢复倒初始位置
    // 恢复原来的 frame
    self.animationView.frame = self.frameDemo;
    self.animationView.alpha = 1.0f;
}

@end

过渡曲线有四种方式

 UIViewAnimationCurveEaseInOut // 淡入淡出效果最为自然，也是默认效果
 UIViewAnimationCurveEaseIn          
 UIViewAnimationCurveEaseOut    
 UIViewAnimationCurveLinear

B. block动画

// - ViewController.m

#import "ViewController.h"
@interface ViewController ()
@property(nonatomic,strong)UILabel *animationView;
@property(assign,nonatomic)CGRect frame;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 动画视图
    self.animationView = [[UILabel alloc] initWithFrame:CGRectMake(100, 120, 40, 200)];
    self.animationView.text = @"block动画";
    self.animationView.textAlignment = NSTextAlignmentCenter;
    self.animationView.textColor = [UIColor blackColor];
    self.animationView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.animationView];
    self.frame = self.animationView.frame;
    
//--------------------  UIView动画：缩放
//    [UIView beginAnimations:nil context:nil];
//    [UIView setAnimationDuration:2.0f];
//    self.animationView.transform = CGAffineTransformMakeScale(1.2, 1.2);
//    // catch：第二次翻转时会从内存中取，效率较高
//    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.animationView cache:YES];
//    [UIView commitAnimations];
    
//--------------------------- Block动画
//    [UIView animateWithDuration:5.0 animations:^{
//        [UIView setAnimationRepeatCount:2];
//        [UIView setAnimationRepeatAutoreverses:YES];
//        self.animationView.frame = CGRectMake(120, 400, 100, 80);
//        self.animationView.backgroundColor = [UIColor blackColor];
//    }];
    
//--------------------------- Block动画：弹簧效果
//    // usingSpringWithDamping：弹簧力度，值越小越弹动越快
//    [UIView animateWithDuration:1.0 delay:0 usingSpringWithDamping:0.1f initialSpringVelocity:0 options:UIViewAnimationOptionCurveEaseInOut animations:^{
//        CGRect rect = self.animationView.frame;
//        rect.origin.y += 150;
//        self.animationView.frame = rect;
//    } completion:^(BOOL finished){
//        self.animationView.backgroundColor = [UIColor yellowColor];
//    }];
    
    
//--------------------------- Block动画：动画嵌套
//    // 第一层
//    [UIView animateWithDuration:2.0 animations:^{
//        self.animationView.frame = CGRectMake(120, 400, 80, 80);
//        self.animationView.backgroundColor = [UIColor blackColor];
//    } completion:^(BOOL finished){
//
//        NSLog(@"%@",finished ? @"YES" : @"NO");
//        self.animationView.frame = self.frame;
//        self.animationView.backgroundColor = [UIColor greenColor];
//
//        // 第二层
//        [UIView animateWithDuration:2.0 animations:^{
//            self.animationView.transform =CGAffineTransformRotate(self.animationView.transform, M_PI);
//        } completion:^(BOOL finished) {
//            [UIView animateWithDuration:2.0 animations:^{
//                self.animationView.alpha = 0.3;
//            }];
//        }];
//    }];
    
//--------------------------- 动画嵌套
    // 第一层
    [UIView transitionWithView:self.animationView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{
        // y 下移 100
        CGRect rect = self.animationView.frame;
        rect.origin.y += 100;
        self.animationView.frame = rect;
    } completion:^(BOOL finished) {
        
        // 第二层：UIView动画块
        [UIView beginAnimations:nil context:nil];
        CGRect rect = self.animationView.frame;
        [UIView setAnimationDuration:2.0];
        // y 上移 100
        rect.origin.y -= 100;
        self.animationView.frame = rect;
        [UIView commitAnimations];
    }];
}

@end