Transfrom3D旋转

最新推荐文章于 2022-11-14 10:53:38 发布

原创最新推荐文章于 2022-11-14 10:53:38 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#iOS transfrom3D 旋转动画

iOS transfrom3D 旋转动画专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍使用Core Animation实现3D旋转效果，并结合手势识别实现缩放与点击事件。通过CATransform3D方法设置旋转、缩放及偏移量，实现一个六面体的3D展示，并添加了拖动、缩放和点击的手势识别。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下，一个3D旋转支持缩放点击事件的效果

先简单介绍 Transfrom3D的一些方法

1.针对偏移量设置 CATransform3DMakeTranslation（x,y,z）

x ：x轴偏移位置向下正数

y ：y轴偏移位置向右正数

z ：z轴偏移位置向外正数

2.针对缩放设置 CATransform3DMakeScale（x,y,z）

x y z 分别对应方向的缩放

3.针对旋转设置

CATransfrom3DMakeRotation（angle,x,y,z）

angle 旋转弧度 iOS 中所有的都是指弧度（注意）

x,y,z 分别沿各轴方向旋转取值 -1 ------ 1

4.针对叠加设置

CATransfrom3DMakeRotate（transfrom3D,angle,x,y,z）

一个类似于叠加

transfrom3D 经过变换之后的上述几个返回的都是transfrom3D类型的

angle 旋转弧度

x,y,z 旋转

5.具体实现思路

1）构建正方体调整旋转偏移的位置

2）设置每个面显示的内容

     //正
    [self addCubeLayer:@[@0, @0, @(_side/2), @0, @0, @0, @0,@"hinata.jpg"]];
    //背
    [self addCubeLayer:@[@0, @0, @(-_side/2), @(M_PI), @0, @0, @0,@"konan.jpg"]];
    //左
    [self addCubeLayer:@[@(-_side/2), @0, @0, @(-M_PI_2), @0, @1, @0,@"sakula.jpg"]];
    //右
    [self addCubeLayer:@[@(_side/2), @0, @0, @(M_PI_2), @0, @1, @0,@"tenten.jpg"]];
    //上
    [self addCubeLayer:@[@0, @(-_side/2), @0, @(-M_PI_2), @1, @0, @0,@"konan.jpg"]];
    //下
    [self addCubeLayer:@[@0, @(_side/2), @0, @(M_PI_2), @1, @0, @0,@"konan.jpg"]];

    CATransform3D transform3D = CATransform3DIdentity;
    transform3D.m34 = -1.0/2000;
    _cubeLayer.sublayerTransform = transform3D;

    [self.layer addSublayer:_cubeLayer];

   //添加sublayers
- (void)addCubeLayer:(NSArray *)params
{
    CALayer *gradient = [CALayer layer];
    gradient.contentsScale = [UIScreen mainScreen].scale;
    gradient.bounds = CGRectMake(0, 0, _side, _side);
    gradient.position = self.center;
    gradient.contents = (id)[UIImage imageNamed:params[7]].CGImage;

    //抗锯齿
    gradient.shouldRasterize = YES;

    CATransform3D trans3D = CATransform3DMakeTranslation([params[0] floatValue], [params[1] floatValue], [params[2] floatValue]);
    CATransform3D rotate3D = CATransform3DRotate(trans3D , [params[3] floatValue], [params[4] floatValue], [params[5] floatValue], [params[6] floatValue]);
    CATransform3D transform3D = rotate3D;

    gradient.transform = transform3D;

    [_cubeLayer addSublayer:gradient];
}

3）添加手势

      [self addGestureRecognizer:[[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panRotate:)]];

        UIPinchGestureRecognizer *pinchRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(scale:)];
        [pinchRecognizer setDelegate:self];
        [self addGestureRecognizer: pinchRecognizer];

        UITapGestureRecognizer *tapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tapRecogn:)];
        [tapRecognizer setDelegate:self];
        [self addGestureRecognizer: tapRecognizer];

       #pragma mark - PanGesture
- (void)panRotate:(UIPanGestureRecognizer *)ges
{
    static CGPoint start;
    if (ges.state == UIGestureRecognizerStateBegan) {
        start = [ges locationInView:self];
    } else if (ges.state == UIGestureRecognizerStateChanged) {
        CATransform3D transform = _cubeLayer.sublayerTransform;
        _rotMatrix = GLKMatrix4MakeWithArray((void *)&transform);

        CGPoint loc = [ges locationInView:self];
        CGPoint diff = CGPointMake(start.x-loc.x, start.y-loc.y);

        float rotX = 1 * GLKMathDegreesToRadians(diff.y/2.0);
        float rotY = -1 * GLKMathDegreesToRadians(diff.x/2.0);

        bool isInvertible;
        GLKVector3 xAxis = GLKMatrix4MultiplyVector3(GLKMatrix4Invert(_rotMatrix, &isInvertible),
                                                     GLKVector3Make(1, 0, 0));
        _rotMatrix = GLKMatrix4Rotate(_rotMatrix, rotX, xAxis.x, xAxis.y, xAxis.z);
        GLKVector3 yAxis = GLKMatrix4MultiplyVector3(GLKMatrix4Invert(_rotMatrix, &isInvertible),
                                                     GLKVector3Make(0, 1, 0));
        _rotMatrix = GLKMatrix4Rotate(_rotMatrix, rotY, yAxis.x, yAxis.y, yAxis.z);

        _cubeLayer.sublayerTransform = *((CATransform3D *)&_rotMatrix);

        start = loc;
    }
}

-(void)scale:(id)sender {

    if([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateBegan) {

        _lastScale = 1.0;

    }

    if ([(UIPinchGestureRecognizer*)sender state] == UIGestureRecognizerStateChanged) {

        //Scale的仿射变换，只改变缩放比例，其他仿射变换底下会说

//        CGAffineTransform newTransform = CGAffineTransformScale(currentTransform, scale, scale);

        CATransform3D newTransform = CATransform3DMakeScale([(UIPinchGestureRecognizer*)sender scale], [(UIPinchGestureRecognizer*)sender scale], [(UIPinchGestureRecognizer*)sender scale]);

        _cubeLayer.sublayerTransform = newTransform;

        _lastScale = [(UIPinchGestureRecognizer*)sender scale];

    }

}
-(void)tapRecogn:(id)sender {

        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"描述" message:@"这是一张图片" preferredStyle:UIAlertControllerStyleAlert];
        UIAlertAction *action1 = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDefault handler:nil];
        UIAlertAction *action2 = [UIAlertAction actionWithTitle:@"取消" style:UIAlertActionStyleCancel handler:nil];
        [alert addAction:action1];
        [alert addAction:action2];

    [self.window.rootViewController presentViewController:alert animated:YES completion:nil];

}

至此完成