學習動畫——變換CGAffineTransform和CATransform3D

來源:互聯網
上載者:User

學習動畫——變換CGAffineTransform和CATransform3D

CGAffineTransform 仿射變形
cg:Core Graphics核心圖形
Affine:仿射的;Transform:改變,使…變形;轉換。
~~~~這些東西你注意過麼~~~~~
NS:next step.一般是指資料,如NSObject、NSString。
CG:一般用於渲染,畫圖等。如CGAffine。
UI:一般用於普通的視圖和控制器,
在objective-c中,CF、CA、CG、UI各指的是core foundation(核心基礎) , core animation(核心動畫), core graphic(核心圖形) , user interface(使用者介面)的縮寫。
~~~~這些東西你注意過麼~~~~~

CGAffineTransform中涉及到了CGPoint和矩陣的內容,CGAffineTransform是一個可以和二維空間向量(例如CGPoint)做乘法的3X2的矩陣。CGAffineTransform是一個可以和二維空間向量(例如CGPoint)做乘法的3X2的矩陣。當對圖層應用變換矩陣,圖層矩形內的每一個點都被相應地做變換,從而形成一個新的四邊形的形狀。CGAffineTransform中的“仿射”的意思是無論變換矩陣用什麼值,圖層中平行的兩條線在變換之後任然保持平行,CGAffineTransform可以做出任意符合上述標註的變換。
~~~~~~~~@—@!我是分割線哈哈!@—@~~~~~~~~~~~
建立一個CGAffineTransform
如下幾個函數都建立了一個CGAffineTransform執行個體:CGAffineTransformMakeRotation(CGFloat angle)
CGAffineTransformMakeScale(CGFloat sx, CGFloat sy)
CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty);
CALayer同樣也有一個transform屬性,但它的類型是CATransform3D,而不是CGAffineTransform,本章後續將會詳細解釋。CALayer對應於UIView的transform屬性叫做affineTransform.

    UIView *trans = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 200, 200)];    [self.view addSubview:trans];    trans.backgroundColor = [UIColor lightGrayColor];    CALayer *lay = [CALayer layer];    lay.contents = (__bridge id _Nullable)([UIImage imageNamed:@"logo-60"].CGImage);    lay.frame = CGRectMake(25, 25, 150, 150);    [trans.layer addSublayer:lay];    //    trans.transform =  CGAffineTransformMakeRotation(M_PI_4);    trans.layer.affineTransform =CGAffineTransformMakeRotation(M_PI_4);//兩個一樣


混合變換<喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vc3Ryb25nPiA8YnI+Ctaux7DKx7Wl0rux5Luvo6zP1tTa0rK/ydLUu+y6z7Hku6+juyA8YnI+CiAgICAgICAgQ29yZSBHcmFwaGljc8zhuanBy9K7z7XB0LXEuq/K/b/J0tTU2tK7uPax5Lu7tcS7+bShyc/X9rj8ye6y47TOtcSx5Lu7o6zI57n71/bSu7j2vMjSqsv1t8XT1tKq0P3XqrXEseS7u6Os1eK+zbvht8ezo9PQ08PBy6GjwP3I58/Cw+a8uLj2uq/K/aO6Q0dBZmZpbmVUcmFuc2Zvcm1Sb3RhdGUoQ0dBZmZpbmVUcmFuc2Zvcm0gdCwgQ0dGbG9hdCBhbmdsZSkgPGJyPgpDR0FmZmluZVRyYW5zZm9ybVNjYWxlKENHQWZmaW5lVHJhbnNmb3JtIHQsIENHRmxvYXQgc3gsIENHRmxvYXQgc3kpIDxicj4KQ0dBZmZpbmVUcmFuc2Zvcm1UcmFuc2xhdGUoQ0dBZmZpbmVUcmFuc2Zvcm0gdCwgQ0dGbG9hdCB0eCwgQ0dGbG9hdCB0eSkgPGJyPgogICAgICAgILWxstnX3dK7uPax5Lu7tcTKsbryo6yz9cq8yfqzydK7uPbKssO0tryyu9f2tcSx5Lu7utzW2NKqqEPSsr7Nyse0tL2o0ru49kNHQWZmaW5lVHJhbnNmb3JtwODQzbXEv9XWtaOsvtjV88Lb1tCzxtf3taXOu77Y1fOjrENvcmUgR3JhcGhpY3PNrNH50rLM4bmpwcvSu7j2t72x47XEs6PBv6O6Q0dBZmZpbmVUcmFuc2Zvcm1JZGVudGl0eSA8YnI+CiAgICAgICAgvdPPwsC0ztLDx8/I0P3XqjMwINTZxr3SxravMTAwo6zU2cv10KE1MCU8L3A+CgoKCjxwcmUgY2xhc3M9"brush:java;"> CGAffineTransform affine = CGAffineTransformIdentity; affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f); affine = CGAffineTransformTranslate(affine, 100, 0); affine = CGAffineTransformScale(affine, 0.5, 0.5); trans.transform = affine;


很清楚的發現圖片往下方移動了,這就出現了一個問題,就是在混合變換的時候,改變的內容之前的一項匯影響到之後改變項,所以在先旋轉的時候那麼之後的平移也會先選擇30度,就相當於向斜下方移動,而且如果先進行縮放的話,移動的距離也會改變的。

//改變變換順序 affine = CGAffineTransformRotate(affine,M_PI / 180.0 * 30.f); affine = CGAffineTransformScale(affine, 0.5, 0.5); affine = CGAffineTransformTranslate(affine, 100, 0);

剪下變換
這個不是常用,CGAffineTransform沒有直接提供函數,它的效果叫傾斜更好,就是設定 CGAffineTransform 的 c 和d 屬性。

 CGAffineTransform affine = CGAffineTransformIdentity; affine.c = 1; affine.d = 1;

3D變化
CGAffineTransform僅僅對2D變換有效,為了在3D空間內移動或者旋轉,通過transform屬性(CATransform3D類型)可以真正做到這點。CATransform3D是一個可以在3維空間內做變換的4x4的矩陣。
3D的效果很簡單,就是多了個z軸的處理,所以之前的評議旋轉和縮放就變成了CATransform3DMakeRotation(CGFloat angle, CGFloat x, CGFloat y, CGFloat z)
CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz)
CATransform3DMakeTranslation(Gloat tx, CGFloat ty, CGFloat tz)

//簡單的一個旋轉效果 CATransform3D affine = CATransform3DMakeRotation(M_PI_4, 1, 1, 0); trans.layer.transform = affine;

透視投影
在真實世界中,當物體遠離我們的時候,由於視角的原因看起來會變小,理論上說遠離我們的視圖的邊要比靠近視角的邊跟短,但實際上並沒有發生,而我們當前的視角是等距離的,也就是在3D變換中任然保持平行,和之前提到的仿射變換類似。
在CATransform3D的透視效果通過一個矩陣中一個很簡單的元素來控制:m34。m34用於按比例縮放X和Y的值來計算到底要離視角多遠。m34的預設值是0,我們可以通過設定m34為-1.0 / d來應用透視效果,d代表了想象中視角相機和螢幕之間的距離,以像素為單位,通常500-1000。

 CATransform3D affine = CATransform3DIdentity; affine.m34 = -1.0 / 500.0; affine = CATransform3DRotate(affine, M_PI_4, 0, 1, 0); trans.layer.transform = affine;
 ![這裡寫圖片描述](http://img.blog.csdn.net/20160405145156397)

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.