美文网首页
OpenGL ES-05-案例03-CoreAnimation绘

OpenGL ES-05-案例03-CoreAnimation绘

作者: 宇宙那么大丶 | 来源:发表于2020-08-08 00:11 被阅读0次

    前言

    相比GLKit绘制正方体,我们来看一下CoreAnimation怎么做。

    一、效果图

    图片可能显示卡顿,模拟器没感觉


    二、分析流程

    image.png

    三、注意事项

    • 注意6个label要进行不同方向的平移+旋转
    • 在不开启定时旋转功能的时候,为了让我们直接看出来是一个3D正方体(更加严谨一些),我们可以先设置容器self.view.layer的放射变换

    四、代码

    -(void)createCube{
        
        //1、设置self.View的layer图层
        //这里把layer层通过放射变换,相当于换了一个角度,为了让我们更加清楚的看到一个正方体,而不是一个四边形
        CATransform3D perspective = CATransform3DIdentity;
        //核心动画设置透视投影
        perspective.m34 = -1.0 / 500.0;
        //围绕x、y轴分别旋转45度
        perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);
        perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
        self.view.layer.sublayerTransform = perspective;
        
        
        
        
        
        NSArray *textArr = @[@"1",@"2",@"3",@"4",@"5",@"6"];
        //2、循环创建6个label,每个label都进行不同方向的旋转平移,组成一个正方体
    
        for (int i = 0; i < textArr.count; i++) {
            
            UILabel *faceLab = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 200, 200)];
            faceLab.center = CGPointMake(self.view.frame.size.width/2, self.view.frame.size.height/2);
            faceLab.backgroundColor = [UIColor colorWithRed:arc4random() %255 /255.0f green:arc4random() %255 /255.0f blue:arc4random() %255 /255.0f alpha:1.0f];
            faceLab.text = textArr[i];
            faceLab.textAlignment = NSTextAlignmentCenter;
            faceLab.font = [UIFont fontWithName:@"Copperplate-Bold" size:50];
            faceLab.textColor = UIColor.whiteColor;
            
            [self.view addSubview:faceLab];
            
            CATransform3D transform;
            if (i == 0) {
                
                transform = CATransform3DMakeTranslation(0, 0, 100);
                
            }else if (i == 1) {
                
                transform = CATransform3DMakeTranslation(100, 0, 0);
                transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
                
            }else if (i == 2) {
                
                transform = CATransform3DMakeTranslation(0, -100, 0);
                transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
                
            }else if (i == 3) {
                
                transform = CATransform3DMakeTranslation(0, 100, 0);
                transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
                
            }else if (i == 4) {
                
                transform = CATransform3DMakeTranslation(-100, 0, 0);
                transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
                
            }else if (i == 5) {
                
                transform = CATransform3DMakeTranslation(0, 0, -100);
                transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
                
            }
            
            faceLab.layer.transform = transform;
            
            
        }
        
    }
    
    
    -(void) addCADisplayLink{
        
        self.angle = 0;
        self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
        [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];
        
    }
    
    
    - (void)update {
        
        //1、计算旋转角度
        self.angle = (self.angle + 5) % 360;
        //2、转成弧度
        float deg = self.angle * (M_PI / 180);
        //3、设置旋转矩阵
        CATransform3D temp = CATransform3DIdentity;
        //围绕(0.3,1,0.7)进行旋转
        temp = CATransform3DRotate(temp, deg, 0.3, 1, 0.7);
        self.view.layer.sublayerTransform = temp;
    }
    
    
    

    相关文章

      网友评论

          本文标题:OpenGL ES-05-案例03-CoreAnimation绘

          本文链接:https://www.haomeiwen.com/subject/yhhqdktx.html