你好,歡迎來到IOS教程網

 Ios教程網 >> IOS編程開發 >> IOS開發綜合 >> 學習動畫——變換CGAffineTransform和CATransform3D

學習動畫——變換CGAffineTransform和CATransform3D

編輯:IOS開發綜合

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);//兩個一樣

選擇45度
混合變換<喎?/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 再平移動100,再縮小50%
很清楚的發現圖片往下方移動了,這就出現了一個問題,就是在混合變換的時候,改變的內容之前的一項匯影響到之後改變項,所以在先旋轉的時候那麼之後的平移也會先選擇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)
3D方向選擇圖

//簡單的一個旋轉效果
    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)
  1. 上一頁:
  2. 下一頁:
Copyright © Ios教程網 All Rights Reserved