iOS開發UI篇—transframe屬性（形變）

標籤：

 

iOS開發UI篇—transframe屬性（形變）

1. transform屬性

在OC中，通過transform屬性可以修改對象的平移、縮放比例和旋轉角度

常用的建立transform結構體方法分兩大類

（1） 建立“基於控制項初始位置”的形變

CGAffineTransformMakeTranslation（平移）

CGAffineTransformMakeScale（縮放）

CGAffineTransformMakeRotation（旋轉）

 

（2） 建立“基於transform參數”的形變

CGAffineTransformTranslate

CGAffineTransformScale

CGAffineTransformRotate

 

補充：

在OC中，所有跟角度相關的數值，都是弧度值，180° = M_PI

正數表示順時針旋轉

負數表示逆時針旋轉

 

提示：由於transform屬性可以基於控制項的上一次的狀態進行疊加形變，例如，先旋轉再平移。因此在實際動畫開發中，當涉及位置、尺寸形變效果時，大多修改控制項的transform屬性，而不是frame、bounds、center 。

2.程式碼範例

  1 //  2 //  YYViewController.m  3 //  01-練習使用按鈕的frame和center屬性  4 //  5 //  Created by apple on 14-5-21.  6 //  Copyright (c) 2014年 itcase. All rights reserved.  7 //  8   9 #import "YYViewController.h" 10  11 //私人擴充 12 @interface YYViewController () 13  14 @property(nonatomic,weak)IBOutlet UIButton *headImageView; 15 @end 16  17 @implementation YYViewController 18  19 //枚舉類型，從1開始 20 //枚舉類型有一個很大的作用，就是用來代替程式中的魔法數字 21 typedef enum 22 { 23     ktopbtntag=1, 24     kdownbtntag, 25     krightbtntag, 26     kleftbtntag 27 }btntag; 28  29 //viewDidLoad是視圖載入完成後調用的方法，通常在此方法中執行視圖控制器的初始化工作 30 - (void)viewDidLoad 31 { 32      33     //在viewDidLoad方法中，不要忘記調用父類的方法實現 34     [super viewDidLoad]; 35  36      37     //手寫控制項代碼 38     //一、寫一個按鈕控制項，上面有一張圖片 39      40     //1.使用類建立一個按鈕對象 41    // UIButton *headbtn=[[UIButton alloc] initWithFrame:CGRectMake(100 ,100, 100, 100)]; 42     //設定按鈕對象為自訂型 43     UIButton *headbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 44      45     //2.設定對象的各項屬性 46      47     //(1)位置等通用屬性設定 48     headbtn.frame=CGRectMake(100, 100, 100, 100); 49      50     //(2)設定普通狀態下按鈕的屬性 51     [headbtn setBackgroundImage:[UIImage imageNamed:@"i"] forState:UIControlStateNormal]; 52     [headbtn setTitle:@"點我！" forState:UIControlStateNormal]; 53     [headbtn setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; 54      55     //(3)設定高亮狀態下按鈕的屬性 56     [headbtn setBackgroundImage:[UIImage imageNamed:@"a"] forState:UIControlStateHighlighted]; 57     [headbtn setTitle:@"還行吧~" forState:UIControlStateHighlighted]; 58     [headbtn setTitleColor:[UIColor blueColor] forState:UIControlStateHighlighted]; 59      60     //3.把對象添加到視圖中展現出來 61     [self.view addSubview:headbtn]; 62     //注意點！ 63     self.headImageView=headbtn; 64  65      66     //二、寫四個控製圖片左右上下移動方向的按鈕控制項 67      68     /**================向上的按鈕=====================*/ 69     //1.建立按鈕對象 70     UIButton *topbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 71      72     //2.設定對象的屬性 73     topbtn.frame=CGRectMake(100, 250, 40, 40); 74     [topbtn setBackgroundImage:[UIImage imageNamed:@"top_normal"] forState:UIControlStateNormal]; 75     [topbtn setBackgroundImage:[UIImage imageNamed:@"top_highlighted"] forState:UIControlStateHighlighted]; 76     [topbtn setTag:1]; 77     //3.把控制項添加到視圖中 78     [self.view addSubview:topbtn]; 79      80     //4.按鈕的單擊控制事件 81     [topbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside]; 82      83      84       /**================向下的按鈕=====================*/ 85     //1.建立按鈕對象 86     UIButton *downbtn=[UIButton buttonWithType:UIButtonTypeCustom]; 87     //2.設定對象的屬性 88     downbtn.frame=CGRectMake(100, 350, 40, 40); 89     [downbtn setBackgroundImage:[UIImage imageNamed:@"bottom_normal"] forState:UIControlStateNormal]; 90     [downbtn setBackgroundImage:[UIImage imageNamed:@"bottom_highlighted"] forState:UIControlStateHighlighted]; 91     [downbtn setTag:2]; 92     //3.把控制項添加到視圖中 93     [self.view addSubview:downbtn]; 94      95     //4.按鈕的單擊控制事件 96     [downbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside]; 97  98      99      /**================向左的按鈕=====================*/100     //1.建立按鈕對象101     UIButton *leftbtn=[UIButton buttonWithType:UIButtonTypeCustom];102     //2.設定對象的屬性103     leftbtn.frame=CGRectMake(50, 300, 40, 40);104     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:UIControlStateNormal];105     [leftbtn setBackgroundImage:[UIImage imageNamed:@"left_highlighted"] forState:UIControlStateHighlighted];106     [leftbtn setTag:4];107     //3.把控制項添加到視圖中108     [self.view addSubview:leftbtn];109     110     //4.按鈕的單擊控制事件111     [leftbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];112     113     114     115     /**================向右的按鈕=====================*/116     //1.建立按鈕對象117     UIButton *rightbtn=[UIButton buttonWithType:UIButtonTypeCustom];118     //2.設定對象的屬性119     rightbtn.frame=CGRectMake(150, 300, 40, 40);120     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:UIControlStateNormal];121     [rightbtn setBackgroundImage:[UIImage imageNamed:@"right_highlighted"] forState:UIControlStateHighlighted];122     [rightbtn setTag:3];123     //3.把控制項添加到視圖中124     [self.view addSubview:rightbtn];125     126     //4.按鈕的單擊控制事件127     [rightbtn addTarget:self action:@selector(Click:) forControlEvents:UIControlEventTouchUpInside];128     129       //三、寫兩個縮放按鈕130        /**================放大的按鈕=====================*/131     //1.建立對象132     UIButton *plusbtn=[UIButton buttonWithType:UIButtonTypeCustom];133     //2.設定屬性134     plusbtn.frame=CGRectMake(75, 400, 40, 40);135     [plusbtn setBackgroundImage:[UIImage imageNamed:@"plus_normal"] forState:UIControlStateNormal];136     [plusbtn setBackgroundImage:[UIImage imageNamed:@"plus_highlighted"] forState:UIControlStateHighlighted];137     [plusbtn setTag:1];138     //3.添加到視圖139     [self.view addSubview:plusbtn];140     //4.單擊事件141     [plusbtn addTarget:self action:@selector(Zoom:) forControlEvents:UIControlEventTouchUpInside];142     143     144     /**================縮小的按鈕=====================*/145     UIButton *minusbtn=[UIButton buttonWithType:UIButtonTypeCustom];146     minusbtn.frame=CGRectMake(125, 400, 40, 40);147     [minusbtn setBackgroundImage:[UIImage imageNamed:@"minus_normal"] forState:UIControlStateNormal];148     [minusbtn setBackgroundImage:[UIImage imageNamed:@"minus_highlighted"] forState:UIControlStateHighlighted];149     [minusbtn setTag:0];150     [self.view addSubview:minusbtn];151     [minusbtn addTarget:self action:@selector(Zoom:) forControlEvents:UIControlEventTouchUpInside];152     153     /**================向左旋轉按鈕=====================*/154     UIButton *leftrotatebtn=[UIButton buttonWithType:UIButtonTypeCustom];155     [leftrotatebtn setFrame:CGRectMake(175, 400, 40, 40)];156     [leftrotatebtn setBackgroundImage:[UIImage imageNamed:@"left_rotate_normal"] forState:UIControlStateNormal];157     [leftrotatebtn setBackgroundImage:[UIImage imageNamed:@"left_rotate_highlighted"] forState:UIControlStateHighlighted];158     [leftrotatebtn setTag:1];159     [self.view addSubview:leftrotatebtn];160     [leftrotatebtn addTarget:self action:@selector(Rotate:) forControlEvents:UIControlEventTouchUpInside];161     162     /**================向右旋轉按鈕=====================*/163     UIButton *rightrotatebtn=[UIButton buttonWithType:UIButtonTypeCustom];164     [rightrotatebtn setFrame:CGRectMake(225, 400, 40, 40)];165     [rightrotatebtn setBackgroundImage:[UIImage imageNamed:@"right_rotate_normal"] forState:UIControlStateNormal];166     [rightrotatebtn setBackgroundImage:[UIImage imageNamed:@"right_rotate_highlighted"] forState:UIControlStateHighlighted];167     [rightbtn setTag:0];168     [self.view addSubview:rightrotatebtn];169     [rightrotatebtn addTarget:self action:@selector(Rotate:) forControlEvents:UIControlEventTouchUpInside];170 }171 172 //控制方向的多個按鈕調用同一個方法173 -(void)Click:(UIButton *)button174 {175 176     //練習使用frame屬性177     //CGRect frame=self.headImageView.frame;178     179     /**注意，這裡如果控制位置的兩個屬性frame和center同時使用的話，會出現很好玩的效果，注意分析*/180     //練習使用center屬性181     CGPoint center=self.headImageView.center;182     switch (button.tag) {183         case ktopbtntag:184             center.y-=30;185             break;186         case kdownbtntag:187             center.y+=30;188             break;189         case kleftbtntag:190             //發現一個bug,之前的問題是因為少寫了break,造成了它們的順序執行，sorry191            //center.x=center.x-30;192             center.x-=50;193             break;194         case krightbtntag:195             center.x+=50;196             break;197     }198     199  //  self.headImageView.frame=frame;200     201     //首尾式設定動畫效果202     [UIView beginAnimations:nil context:nil];203     self.headImageView.center=center;204     //設定時間205     [UIView setAnimationDuration:2.0];206     [UIView commitAnimations];207     NSLog(@"移動!");208     209 }210 -(void)Zoom:(UIButton *)btn211 {212     //使用bounds，以中心點位原點進行縮放213     CGRect bounds = self.headImageView.bounds;214     if (btn.tag) {215         bounds.size.height+=30;216         bounds.size.width+=30;217     }218     else219     {220         bounds.size.height-=50;221         bounds.size.width-=50;222     }223     224     //設定首尾動畫225     [UIView beginAnimations:nil context:nil];226     self.headImageView.bounds=bounds;227     [UIView setAnimationDuration:2.0];228     [UIView commitAnimations];229 }230 231 -(void)Rotate:(UIButton *)rotate232 {233     //位移（不累加）234     //self.headImageView.transform=CGAffineTransformMakeTranslation(50, 200);235     //縮放236     //self.headImageView.transform=CGAffineTransformMakeScale(1.2, 10);237     //在原有的基礎上位移（是累加的）238     //self.headImageView.transform=CGAffineTransformTranslate(self.headImageView.transform, 50, 50);239     //在原有的基礎上進行縮放240     //self.headImageView.transform=CGAffineTransformScale(self.headImageView.transform, 1.5, 1.6);241     242     //在原有的基礎上進行旋轉243     if (rotate.tag) {244         //旋轉角度為1/pi，逆時針245         self.headImageView.transform=CGAffineTransformRotate(self.headImageView.transform, -M_1_PI);246     }247     else248     {249         //旋轉的角度為pi/2，順時針250     self.headImageView.transform=CGAffineTransformRotate(self.headImageView.transform, M_PI_2);251     }252     253 }254 @end

實現效果：

3.viewDidLoad

viewDidLoad是視圖載入完成後調用的方法，通常在此方法中執行視圖控制器的初始化工作

在viewDidLoad方法中，一定不要忘記調用父類的方法實現

[super viewDidLoad];

iOS開發UI篇—transframe屬性（形變）