iOS 动画专题（UIView二维形变动画与CAAnimation核心动画）

---

1. iOS动画

总的来说，从涉及类的形式来看，iOS动画有：基于UIView的仿射形变动画，基于CAAnimation及其子类的动画，基于CG的动画。这篇文章着重总结前两种动画。

2. UIView动画

设置UIView形变动画有两种常见用到的属性，.frame，.transform，所以有的人也可以分别称之为：

① frame动画
② transform动画

这两种动画只需要在动画语法中适当的位置，基于UIView和CALayer的属性设置变化值即可。这种动画，不需要 调用核心动画CAAnimation里面的专用类和API。

其中，frame动画设置方式有限，必须确切地制定形变前后的frame，平移还好，特别是 旋转 的时候，只能通过数学知识计算出新的frame。这就得不偿失了。所以，更多的时候，当涉及一些frame，bounds，center的改变或是形变的时候可以用transform来取代frame。

2.1 设置UIView动画的两种语法形式

begin — commit

//偏移动画
  [UIView beginAnimations:@"move" context:nil];  
  [UIView setAnimationDuration:2];  
  [UIView setAnimationDelegate:self];  
  imageContainView.frame = CGRectMake(80, 80, 200, 200);  
  [label1 setBackgroundColor:[UIColor yellowColor]];  
  [label1 setTextColor:[UIColor redColor]];  
  [UIView commitAnimations]; 

animations block

//缩放动画
  view.transform = CGAffineTransformIdentity;
  [UIView animateWithDuration:1.0f animations:^{
     view.transform = CGAffineTransformMakeScale(2.0f, 2.0f);
  }];

2.2 设置属性形变动画的两种类型

UIView的 CGAffineTransform 类型属性：animatedView.transform
一般是View的旋转，拉伸移动等属性，是二维的，通常使用都是前缀CGAffineTransform的类。

CGAffineTransform transform = CGAffineTransformScale(imageContainView.transform, 1.2, 1.2); 
[UIView beginAnimations: @"scale"context: nil]; 
[UIView setAnimationDuration: 2];
[UIView setAnimationDelegate: self];
[imageView setTransform: transform]; 
[UIView commitAnimations];

CALayer的CATransform3D 类型属性：animaView.layer.transform
通过 .layer.transform 可以在3D模式下面的变化，通常使用的都是前缀为CATransform3D的类。

imageView.layer.transform =  CATransform3DIdentity;
[UIView animateWithDuration:1.0f animations:^{
      imageView.layer.transform = CATransform3DMakeScale(2.0, 2.0, 1.0);
}];

2.3 与动画相关的属性

2.3.1 UIView与动画相关的属性–与CGAffineTransform对应

下面是UIView的一些属性介绍

@property(nonatomic) CGRect            frame;
@property(nonatomic) CGRect            bounds;      // default bounds is zero origin, frame size. animatable
@property(nonatomic) CGPoint           center;      // center is center of frame. animatable
@property(nonatomic) CGAffineTransform transform;   // default is CGAffineTransformIdentity. animatable
@property(nonatomic) CGFloat           contentScaleFactor NS_AVAILABLE_IOS(4_0);

@property(nonatomic,getter=isMultipleTouchEnabled) BOOL multipleTouchEnabled __TVOS_PROHIBITED;   // default is NO
@property(nonatomic,getter=isExclusiveTouch) BOOL       exclusiveTouch __TVOS_PROHIBITED;         // default is NO

在实际开发中，使用场景：

(1) 当涉及一些frame, bounds, center的改变或是形变的时候可以用 transform 来取代 frame。
(2) 一般在实际开发中都是平移，旋转，缩放组合使用。

######2.3.2 CALayer与动画相关的属性–与CATransform3D对应
下面是CALayer的一些属性介绍

//宽度和高度
@property CGRect bounds;

//位置(默认指中点，具体由anchorPoint决定)
@property CGPoint position;

//锚点(x,y的范围都是0-1)，决定了position的含义
@property CGPoint anchorPoint;

//背景颜色(CGColorRef类型)
@property CGColorRef backgroundColor;

//形变属性
@property CATransform3D transform;

//边框颜色(CGColorRef类型)
@property CGColorRef  borderColor;

//边框宽度
@property CGFloat borderWidth;

//圆角半径
@property CGFloat cornerRadius;

//内容(比如设置为图片CGImageRef)
@property(retain) id contents;

2.4 管理二维形变和三维形变的封装类：CGAffineTransform与CATransform3D

2.4.1 CGAffineTransform操作API

CGAffineTransform结构体定义

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

它其实表示的是一个矩阵：

因为最后一列总是是(0,0,1)，所以有用的信息就是前面两列。对一个view进行仿射变化就相当于对view上的每个点做一个乘法，结果就是：

a表示x水平方向的缩放，tx表示x水平方向的偏移
d表示y垂直方向的缩放，ty表示y垂直方向的偏移
如果b和c不为零的话，那么视图肯定发生了旋转，旋转角度这样计算：tan(angle) = b / a

如果这样：

这个就是没有变化的最初的样子。

CGAffineTransform操作API

//还原
CGAffineTransformIdentity

//位移仿射  ---- 理解为平移 (CGFloat tx,CGFloat ty) 
CGAffineTransformMakeTranslation 
CGAffineTransformTranslate 
//旋转仿射 ---- 理解为旋转 (CGFloat angle)
CGAffineTransformMakeRotation
CGAffineTransformRotate 
//缩放仿射  --- 理解缩放