核心动画-仿射变化

仿射变化

你要知道OpenGL矩阵变化你就轻松懂这个了, 知识铺垫

图形的变大，旋转等就是 矩阵变换导致，图形的每个位置都是一个有向的 向量 ，仿射变化就是 乘以一个矩阵

矩阵几何意义

案例1：围绕Y轴旋转

iOS 图层默认是没有开启投影视图的，只能看到正视图，需要开启投影视图

/// 让红色背景 开启透视投影， 也可以单独让layerView1， layerView2开启透视投影
/// 让红色背景 开启透视投影， 也可以单独让layerView1， layerView2开启透视投影 m34
    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = -1.0/500.0;
    self.containerView.layer.sublayerTransform = perspective;
    CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
    //CATransform3D transform2 = CATransform3DMakeRotation(M_PI_4, 0, -1, 0);
    CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);
    self.layerView1.layer.transform = transform1;
    self.layerView2.layer.transform = transform2;

效果：是不是有啥感觉，这个就可以实现读书器的翻页功能

特例：

    CATransform3D outer = CATransform3DIdentity;
    outer.m34 = -1.0/500.0;
    outer = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);
    self.outerView.layer.transform = outer;
    CATransform3D inner = CATransform3DIdentity;
    inner.m34 = -1.0/500.0;
    inner =  CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);
    self.innerView.layer.transform = inner;

案例2：立体盒子

步骤

• 1. 先开启3D透视投影 m34
• 2. 然后将6个视图添加在一个共同的父亲视图上, frame都是一样的
• 3. 然后 如图1，Z轴坐标加100， 图2 向X轴加100，然后围绕Y轴旋转90度，其他图层按坐标依次按例子变换
• 4. 将父视图围绕X,Y轴旋转-M_PI_4

@interface CCViewController ()
@property (weak, nonatomic) IBOutlet UIView *containerView;

@property (strong, nonatomic) IBOutlet UIView *view0;
@property (strong, nonatomic) IBOutlet UIView *view1;
@property (strong, nonatomic) IBOutlet UIView *view2;
@property (strong, nonatomic) IBOutlet UIView *view3;
@property (strong, nonatomic) IBOutlet UIView *view4;
@property (strong, nonatomic) IBOutlet UIView *view5;

@property(nonatomic,strong)NSArray *faces;

@end

@implementation CCViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.faces = @[_view0,_view1,_view2,_view3,_view4,_view5];
    
    //父View的layer图层
    CATransform3D perspective = CATransform3DIdentity;
    perspective.m34 = -1.0 / 500.0;
    perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);
    perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
    self.containerView.layer.sublayerTransform = perspective;
    
    //add cube face 1 view1 Z 轴往前移动 100
    CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);
    [self addFace:0 withTransform:transform];
    
    //add cube face 2 view2 X轴往前移动 100
    transform = CATransform3DMakeTranslation(100, 0, 0);
    transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
    [self addFace:1 withTransform:transform];
    
    //add cube face 3 view3 Y轴往前移动 -100
    transform = CATransform3DMakeTranslation(0, -100, 0);
    transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
    [self addFace:2 withTransform:transform];
    
    //add cube face 4 view4 Y轴往前移动 100
    transform = CATransform3DMakeTranslation(0, 100, 0);
    transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
    [self addFace:3 withTransform:transform];
    
    //add cube face 5 view5 X轴往前移动 -100
    transform = CATransform3DMakeTranslation(-100, 0, 0);
    transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
    [self addFace:4 withTransform:transform];
    
    //add cube face 6 view6 Z轴往前移动 -100
    transform = CATransform3DMakeTranslation(0, 0, -100);
    transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
    [self addFace:5 withTransform:transform];
    
}
- (void)addFace:(NSInteger)index withTransform:(CATransform3D)transform
{
    //获取face视图并将其添加到容器中
    UIView *face = self.faces[index];
    [self.containerView addSubview:face];
    
    //将face视图放在容器的中心
    CGSize containerSize = self.containerView.bounds.size;
    face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
    
    //添加transform
    face.layer.transform = transform;
}