仿射改变

你要知道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
    1. 然后将6个视图添加在一个共同的父亲视图上, frame都是相同的
    1. 然后 如图1,Z轴坐标加100, 图2 向X轴加100,然后环绕Y轴旋转90度,其他图层按坐标依次按比如改换
    1. 将父视图环绕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;
}