来自 电脑系统 2019-09-11 14:01 的文章
当前位置: 金沙澳门官网网址 > 电脑系统 > 正文

金沙澳门官网网址:高档动画学习心得笔记,图

项目中有做视频导入的功能,有些经过软件处理后的视频在判断视频方向上会出现一些问题。这个特殊视频的 CGAffineTransform为 {a = 0 , b = 1.0 , c =1.0 , d =0 }

5.1 仿射变换

5.1.1 仿射变换基础

UIView的transform属性是一个CGAffineTransform类型,用于在二维空间做旋转,缩放和平移。CGAffineTransform是一个可以和二维空间向量(例如CGPoint)做乘法的3X3的矩阵

金沙澳门官网网址 1

用矩阵表示的CGAffineTransform和CGPoint

如图所示,通过矩形的相乘运算,得到一个新的CGPoint类型的结果。图中的灰色元素是为了矩形做乘法而添加的辅助标志值,因为他并不改变结果,所以得到的新值中不会保存它,它的用处就是做矩形相乘运算。

当对图层应用变换矩阵,图层矩形内的每一个点都被响应地做变换,从而形成一个新的四边形的形状。CGAffineTransform中的”仿射”的意思是无论变换举证用什么值,图层中平行的两条线在变换之后仍然保持平行,CGAffineTransform可以做出任意符合上述标注的变换。

由矩阵的乘法规则,可得:

x’ = a*x + c*y + tx;

y’ = b*x + d*y + ty;

(1) 让a、d=1 其余均为0,得到 x’ = x , y’ = y。这就是CGAffineTransformIdentity(未发生变换,单位矩阵)

(2) 平移: 让a、d=1,b、c=0,得到x’ = x + tx,y’ = y + ty,可以知道tx代表视图沿x轴方向的位移,ty代表视图沿y轴方向的位移,代码如下:

CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty)

所以平移矩阵为

金沙澳门官网网址 2

平移矩阵

(3) 旋转的公式比较复杂,涉及到平面向量的旋转,这里是讲解:平面向量旋转

2D旋转的公式如下:

x’ = x*cos(a) - y*sina(a);

y’ = x*sina(a) - y*cos(a);

可以反推导出旋转的矩阵:

金沙澳门官网网址 3

旋转矩阵

代码如下:

CGAffineTransformMakeRotation(CGFloat angle);

参数只有一个角度,而不是旋转公式里面的cosa,sina,原因就是不管正弦还是余弦,变化的量只是角度a,所以这里的变换函数就提供一个角度了,调用之后系统在函数里就把角度angle转化成相对应的正弦余弦值,再把计算后的矩阵(也就是CGAffineTransform结构体)返回给你了.

angle参数为弧度值,而不是角度值,弧度用数学常量PI的倍数表示,一个PI表示180°。C的数学函数库中提供了弧度的一些简便的换算,如果对换算不太清楚的话,可以用如下的宏做换算:

//将弧度值转化为角度值,参数x为弧度值

#define RADIANS_TO_DEGREES(x) ((x)/M_PI*180.0)

//将角度值转化为弧度制,参数x为角度值

#define DEGREES_TO_RADIANS(x) ((x)/180.0*M_PI)

(4)放缩:让除了a、d外,其它参数都等于0,则得到放缩公式:

x’ = a*x;

y’ = d*y;

所以缩放矩阵为:

金沙澳门官网网址 4

缩放矩阵

代码如下:

CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)

其它用法:

//检查是否有做过仿射效果

CGAffineTransformIsIdentity(transform)

//检查2个仿射效果是否相同

CGAffineTransformEqualToTransform(transform1,transform2)

//仿射效果反转(反效果,比如原来扩大,就变成缩小)

CGAffineTransformInvert(transform)

总结

CGAffineTransform本质就是一个结构体,这个结构体代表一个3*3的矩阵.由于矩阵第三列始终是固定的(0,0,1),所以这个结构体只有6个元素.

将一个代表2D变换的矩阵CGAffineTransform设置给view.transform,系统就会在内部让[x,y,1]和这个矩阵进行乘法运算,最终得到变换后的座标x’,y’,从而实现2D变换.

2D图像变换也称2D仿射变换,主要就是放大,缩小,平移,旋转,这几种变换的参数只涉及到矩阵的1,2列的数据,第三列始终都是0,0,1.

5.1.2 ios与安卓的transform图形变换矩阵之间的快速转换方法

首先,为了实现快速的转换,我们必须了解两者之间的异同。 iOS: IOS的Transform matrix 形式是这样的:

a    b    0

c    d    0

tx  ty  1

其中,

a :缩放X    b :错切Y    0

c :错切X    d :缩放Y    0

tx:位移X    ty:位移Y    0

当进行位图片操作的时候,假设元像素点坐标为(x,y,1) 则:

|a    b    0|

(x,y,1)*|c    d    0| =(ax + by +tx,bx + dy + ty,1)

|tx  ty  1|

当进行变换时,根据具体需求,分别改动对应矩阵的对应值,就可以实现想要的效果了,这些实现都被IOS封装到了Transform类方法之中了

Android Android的Transform matrix 形式是这样的:

a    c    tx

b    d    ty

0    0    1

其中,

a :缩放X    c :错切X    tx:位移X

b :错切Y    d :缩放Y    ty:位移Y

0          0            1

当进行位图片操作的时候,假设元像素点坐标为(x,y,1) 则:

|a    c    tx|  |x|

|b    d    ty|* |y|=(ax + by +tx,bx + dy + ty,1)

|0    0    1 |  |1|

由此不难看出,IOS和Android的Transformation Matrix 是互为转置矩阵关系。所以我们有算法:

for( int k = 0; k < 9; k++){

int n = (k % 3) * 3 + k / 3;

matrix[k] = matrix[k] + matrix[n];

matrix[n] = matrix[k] - matrix[n];

matrix[k] = matrix[金沙澳门官网网址 ,k] - matrix[n];

}

来实现两者之间的转换。 使用时,将此算法嵌入到程序中即可。

5.1.3 图层的仿射变换

CALayer同样也有一个transform属性,但它的类型是CATransform3D,而不是CGAffineTransform。CALayer对应于UIView的transform属性叫做affineTransform。

5.1.4 混合变换

Core Graphics提供了一系列的函数可以在一个变换的基础上做更深层次的变换,如果做一个多次的变换的话,这就会非常有用。

多次变换要使用这些函数:

CGAffineTransformRotate(CGAffineTransform t, CGFloat angle)

CGAffineTransformScale(CGAffineTransform t, CGFloat sx, CGFloat sy)

CGAffineTransformTranslate(CGAffineTransform t, CGFloat tx, CGFloat ty)

当操纵一个变换的时候,初始生成一个什么也不做的变换很重要,也就是创建一个CGAffineTransform类型的控制,矩阵中称作单位矩阵,Core Graphics同样也提供了一个方便的常量: CGAffineTransformIdentity

注意:在混合变换中,多次的变换如果其中的顺序改变,可能会改变最终的结果,也就是说,上一个变换的结果将会影响以后的变换,所以,在混合变换中,对顺序的控制是很重要的

+ (AVAssetTrack *)videoTrackWithAsset:(AVAsset *)asset{ return [[asset tracksWithMediaType:AVMediaTypeVideo] objectAtIndex:0];}

5.2 3D变换

5.2.1 3D变换

CGAffineTransform类型属于Core Graphics框架,它是一个严格意义上的2D绘图API,并且CGAffineTransform仅仅对2D变换有效。

CALayer有一个zPosition属性,它的transform属性可以做到让图层靠近或者原理相机,即让图层在3D控件内移动或者旋转。

金沙澳门官网网址 5

对一个3D像素点做CATransform3D矩阵变换

和CGAffineTransform矩阵类似,Core Animation提供了一系列的方法用来创建和组合CATransform3D类型的矩阵,和Core Graphics的函数类似,但是3D的平移和旋转多出了一个z参数,并且旋转函数除了angle之外多出了x,y,z三个参数,分别决定了每个坐标轴方向上的旋转。

CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)

CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)

CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

我们对X轴和Y轴比较熟悉了,分别以右和下为正方向(在Mac OS上,Y轴向上为正方向),Z轴和这两个轴分别垂直,指向视图外为正方形。

金沙澳门官网网址 6

X,Y,Z轴,以及围绕它们旋转的方向

由图所见,绕Z轴旋转等同于之前二维空间的仿射旋转,但是绕X轴和Y轴的旋转就突破了屏幕的二维空间,并且在用户视角看来发生了倾斜。

如果我们通过代码使得图层绕着X轴或者Y轴旋转,看起来图层并没有被旋转,而是仅仅在垂直/水平方向上产生了压缩,其实这是没错的,视图看起来更窄实际上是因为我们在用一个斜向的视角看它,而不是透视。

5.2.2 透视投影

真实世界中,当物体远离我们的时候,由于视角的原因看起来会变小,理论上说远离我们的视图的边要比靠近视角的边更短,但实际上并不一定,而我们当前的视角是等距离的,也就是在3D变换中仍然保持平行,和之前提到的仿射变换类似。

在等距投影中,远处的物体和近处的物体保持同样的缩放比例,这种投影也有它自己的用处,但当前我们并不需要。

为了做一些修正,我们需要引入投影变换(又称作z变换)来对除了旋转之外的变换矩阵做一些修改,Core Animation并没有给我们提供设置透视变换的函数,因此我们需要手动修改矩阵值,幸运的是,很简单:

CATransform3D的透视效果通过一个矩阵中一个很简单的元素来控制:m34。m34用于按比例缩放X和Y的值来计算到底要离视角多远。

金沙澳门官网网址 7

CATransform3D的m34元素,用来做透视

m34的默认值是0,我们可以通过设置m34为-1.0/d来应用透视效果,d代表了想象中视角相机和屏幕之间的距离,以像素为单位,那应该如何计算这个距离呢?实际上并不需要,大概估算一个就好了。

因为视角相机实际上并不存在,所以可以根据屏幕上的显示效果自由决定它放置的位置。通常500-1000就已经很好了,但对于特定的图层有时候更小或者更大的值会看起来更舒服,减少距离的值会增强透视效果,所以一个非常微小的值会让它看起来更加失真,然而一个非常大的值会让它基本失去透视效果。

5.2.3 灭点

当在透视角度绘图的时候,远离视角的物体会变小边缘,当远离到一个极限距离,他们可能就缩成了一个点,于是所有的物体最后都汇聚消失在同一个点。

在现实中,这个点通常是视图的中心,于是为了在应用中穿件拟真效果的透视,这个点应该聚在屏幕中点,或者至少是包含所有3D对象的视图中点。

金沙澳门官网网址 8

灭点

5.2.4 sublayerTransform属性

如果有多个视图或者图层,每个都做3D变换,那就需要分别设置相同的m34值,并且确保在变换之前都在屏幕中央共享同一个position,如果用一个函数封装这些操作的确会更加方便,但仍然有限制。

CALayer有一个属性叫做sublayerTransform,它也是CATransform3D类型,但和对一个图层的变换不同,它能影响所有的子图层。这意味着你可以一次性对包含这些图层的容器做变换,于是所有的子图层都自动继承了这个变换方法。

相比较而言,通过在一个地方设置透视变换会很方便,同时它会带来另一个显著的优势:灭点被设置在容器图层的中点,从而不需要再对子图层分别设置了。这意味着你可以随意使用position和frame来设置子图层,而不需要把它们放置在屏幕中点,然后为了保证统一的灭点用变换来做平移。

CATransform3D perspective = CATransform3DIdentity;

perspective.m34 = - 1.0 / 500.0;

self.containerView.layer.sublayerTransform = perspective;

//rotate layerView1 by 45 degrees along the Y axis

CATransform3D transform1 = CATransform3DMakeRotation(M_PI_4, 0, 1, 0);

self.layerView1.layer.transform = transform1;

//rotate layerView2 by 45 degrees along the Y axis

CATransform3D transform2 = CATransform3DMakeRotation(-M_PI_4, 0, 1, 0);

self.layerView2.layer.transform = transform2;

金沙澳门官网网址 9

通过相同的透视效果分别对视图做变换

5.2.5 背面

我们既然可以在3D场景下旋转图层,那么也可以从背面去观察它。如果我们把相对y轴的旋转角度设置为M_PI(π,180°),那么将会把图层完全旋转一个半圈,于是图层完全背对了相机视角。

金沙澳门官网网址 10

视图的背面,一个镜像对称的图片

如图所示,图层是双面绘制的,反面显示的是正面的一个镜像图片。

CALayer有一个叫做doubleSided的属性来控制图层的背面是否要被绘制,这是一个BOOL类型,默认为YES,如果设置为NO,那么当图层正面从相机角度消失的时候,它将不会被绘制。(如果在不需要看到背面的时候,我们可以设置这个属性为NO,那么就不用浪费GPU来绘制它)

5.2.6 扁平化图层

Core Animation创建非常复杂的3D场景是非常困难的。你不能够使用图层树去创建一个3D结构的层级关系—在相同场景下的任何3D表面必须和同样的图层保持一致,这是因为每个的父视图都把它的子视图扁平化了。

至少当你用正常的CALayer的时候是这样,CALayer有一个叫做CATransformLayer的子类来解决这个问题。

5.3 固体对象

5.3.1 固体对象

现在你懂得了在3D空间的一些图层布局的基础,我们可以试着创建一个固态的3D对象(实际上是一个技术上所谓的空洞对象,但它以固态呈现)。我们用六个独立的视图来构建一个立方体的各个面。

Demo   

旋转这个立方体将会显得很笨重,因为我们要单独对每个面做旋转,另一个简单的方案是通过调整容器视图的sublayerTransform去旋转照相机。

perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);

perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);

金沙澳门官网网址 11

从一个边角观察的立方体

判断视频的方向方法一:

+ (UIImageOrientation)orientationWithAsset:(AVAsset *)asset{ AVAssetTrack *videoTrack = [self videoTrackWithAsset:asset]; CGSize size = [videoTrack naturalSize]; CGAffineTransform txf = [videoTrack preferredTransform]; if (size.width == txf.tx && size.height == txf.ty) return UIImageOrientationLeft; // return UIInterfaceOrientationLandscapeLeft; else if (txf.tx == 0 && txf.ty == 0) return UIImageOrientationRight; // return UIInterfaceOrientationLandscapeRight; else if (txf.tx == 0 && txf.ty == size.width) return UIImageOrientationDown; // return UIInterfaceOrientationPortraitUpsideDown; else return UIImageOrientationUp; // return UIInterfaceOrientationPortrait;}

方法二:

+ (UIImageOrientation)orientationWithAsset:(AVAsset *)asset{ AVAssetTrack *videoTrack = [self videoTrackWithAsset:asset]; CGAffineTransform t = videoTrack.preferredTransform; if (t.a == 0 && t.b == 1.0 && t.c == -1.0 && t.d == 0) { // Portrait return UIImageOrientationUp ; } else if (t.a == 0 && t.b == -1.0 && t.c == 1.0 && t.d == 0) { // PortraitUpsideDown return UIImageOrientationDown; } else if (t.a == 1.0 && t.b == 0 && t.c == 0 && t.d == 1.0) { // LandscapeRight return UIImageOrientationRight; } else { // LandscapeLeft return UIImageOrientationLeft; }}

本文由金沙澳门官网网址发布于电脑系统,转载请注明出处:金沙澳门官网网址:高档动画学习心得笔记,图

关键词: