前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >用CATransform3D实现3D效果和制作简单3D动画

用CATransform3D实现3D效果和制作简单3D动画

作者头像
周希
发布2019-10-15 01:14:07
7480
发布2019-10-15 01:14:07
举报
文章被收录于专栏:APP自动化测试

我们先来看下CATransform3D的头文件

代码语言:javascript
复制
struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

typedef struct CATransform3D CATransform3D;

可以看到CATransform3D是一个4 * 4结构体, 另外它还有一个弟弟CGAffineTransform是 3 * 3结构体

他们的区别看名字就很明显,

CATransform3D是做3D坐标变换, 经常适用于CALayer

CGAffineTransform是做2D坐标变换, 经常适用于UIView

CATransform3D这个结构体中, 我们使用最多的是m34 后面我们再来说这个, 先知道就好了

我们继续看下CATransform3D头文件中的其他内容

代码语言:javascript
复制
CA_EXTERN const CATransform3D CATransform3DIdentity;
//一个无任何变换的默认矩阵常量,可用于使变换后的Layer恢复初始状态

CA_EXTERN bool CATransform3DIsIdentity (CATransform3D t);
//判断是否为默认矩阵

CA_EXTERN bool CATransform3DEqualToTransform (CATransform3D a,
    CATransform3D b);
//判断两个矩阵是否相同

CA_EXTERN CATransform3D CATransform3DMakeTranslation (CGFloat tx,
    CGFloat ty, CGFloat tz);
//生成一个依照参数平移转换后的矩阵

CA_EXTERN CATransform3D CATransform3DMakeScale (CGFloat sx, CGFloat sy,
    CGFloat sz);
//生成一个依照参数缩放后的CA_EXTERN CATransform3D CATransform3DMakeRotation (CGFloat angle, CGFloat x,    CGFloat y, CGFloat z);//生成一个依照参数旋转后的矩

我们先看一个简单的例子, 实现一个矩形向内翻转

上代码:

代码语言:javascript
复制
#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    //创建CALayer
    CALayer * staticLayerA       = [CALayer layer];
    staticLayerA.bounds          = CGRectMake(0, 0, 100, 100);
    staticLayerA.position        = self.view.center;
    staticLayerA.backgroundColor = [UIColor redColor].CGColor;
    
    //添加到主界面
    [self.view.layer addSublayer:staticLayerA];
    
    //创建CATransform3D默认变换矩阵
    CATransform3D transA = CATransform3DIdentity;
    
    //调整m34, 向里偏500个单位
    transA.m34           = - 1.0 / 500;
    
    //设置沿x轴偏转60度
    transA               = CATransform3DRotate(transA, M_PI / 3, 1, 0, 0);
    
    //设置Layer3D偏转
    staticLayerA.transform = transA;
}

代码里M34 = - 1.0 / 500 的意思就是图层距离屏幕向里500的单位。如果向外则是M34 = 1.0 / 500。这个距离至一般掌握至500~1000这个范围会取得不错的效果。

这里需要注意的是M34的赋值一定要写在矩阵变换前面

可以再用BasicAnimation来实现3D动画, 用关键字: Transform

代码语言:javascript
复制
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform"];
    animation.duration     = 2;
    animation.repeatCount  = 100;
    animation.autoreverses = YES;
    animation.toValue      = [NSValue valueWithCATransform3D:transA];
    
    [staticLayerA addAnimation:animation forKey:nil];

大家可以试试看效果

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017-01-12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
图像处理
图像处理基于腾讯云深度学习等人工智能技术,提供综合性的图像优化处理服务,包括图像质量评估、图像清晰度增强、图像智能裁剪等。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档