iOS Development UI Chapter-transframe properties (deform)

1. Transform Properties

In OC, you can modify the translation, scaling, and rotation angles of an object by using the Transform property

Common methods for creating transform structures are divided into two main categories

(1) Create a deformation based on the initial position of the control

Cgaffinetransformmaketranslation (PAN)

Cgaffinetransformmakescale (zoom)

Cgaffinetransformmakerotation (swivel)

(2) Create a "transform parameter-based" deformation

Cgaffinetransformtranslate

Cgaffinetransformscale

Cgaffinetransformrotate

Add:

In OC, all values associated with the angle are in radians, 180°= M_PI

Positive number indicates clockwise rotation

Negative number indicates counterclockwise rotation

Tip: Because the Transform property can be superimposed on the last state of the control, for example, rotate and pan again. Therefore, in the actual animation development, when it involves the position, the size deformation effect, mostly modifies the control's transform attribute, but is not frame, bounds, center.

2. Code examples

  1//2//YYVIEWCONTROLLER.M 3//01-Practice using the button's frame and Center Properties 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//Private extension @interface Yyviewcontroller () @property (nonatomic,weak) I Boutlet UIButton *headimageview; @end @implementation Yyviewcontroller 18 19//enumeration type, starting from 1 20//enumeration type has a big role to replace the magic number in the program. typedef enum 22 {2 3 ktopbtntag=1, Kdownbtntag, Krightbtntag, Kleftbtntag}btntag; //viewdidload is the method that is called after the view is loaded, typically performing the initialization of the view controller in this method (void) Viewdidload 31 {32 33//In the Viewdidload method, do not forget to call The method implementation of the parent class [Super Viewdidload]; 35 36 37//Handwriting Control Code 38//One, write a button control, there is a picture 39 40//1. Create a button object using a class//UIButton *headbtn=[[uibutto N alloc] Initwithframe:cgrectmake (100, 100, 100, 100)]; 42//Set button object to custom type UIButton *headbtn=[uibutton Buttonwithtype:uibuttontypecustom]; 44 45//2. Setting the properties of an object 46 47     (1) Position and other common properties set by Headbtn.frame=cgrectmake (100, 100, 100, 100); 49 50//(2) Set the properties of the button in the normal state [headbtn setbackgroundimage:[uiimage imagenamed:@ "I"] Forstate:uicontrolstatenorma L]; headbtn [settitle:@] dot me! [Forstate:uicontrolstatenormal]; [Headbtn Settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal]; 54 55//(3) Set the properties of the button in the highlight [headbtn setbackgroundimage:[uiimage imagenamed:@ "a"] Forstate:uicontrolstatehighl Ighted]; [Headbtn settitle:@] "OK ~" forstate:uicontrolstatehighlighted]; [Headbtn Settitlecolor:[uicolor Bluecolor] forstate:uicontrolstatehighlighted]; 59 60//3. Add objects to the view show it. [Self.view addsubview:headbtn]; 62//Attention POINT! SELF.HEADIMAGEVIEW=HEADBTN; 64 65 66//Two, write four control the picture up and down move direction of the button control 67 68/**================ up Button =====================*/69//1. Create button Objects: UIButton *topbtn=[uibutton Buttonwithtype:uibuttontypecustom]; 71 72//2. Setting properties of an object Topbtn.frame=cgrecTmake (100, 250, 40, 40); [Topbtn setbackgroundimage:[uiimage imagenamed:@ "Top_normal"] forstate:uicontrolstatenormal]; [Topbtn setbackgroundimage:[uiimage imagenamed:@ "top_highlighted"] forstate:uicontrolstatehighlighted]; [Topbtn settag:1]; 77//3. Add the control to the view. [Self.view addsubview:topbtn]; 79 80//4. Click Control event for the button Bayi [topbtn addtarget:self Action: @selector (click:) forcontrolevents:uicontroleventtouchup Inside]; 82 83 84/**================ down button =====================*/85//1. Create a Button object UIButton *downbtn=[uibut Ton Buttonwithtype:uibuttontypecustom]; 87//2. Setting properties of an object Downbtn.frame=cgrectmake (100, 350, 40, 40); [Downbtn setbackgroundimage:[uiimage imagenamed:@ "Bottom_normal"] forstate:uicontrolstatenormal]; [Downbtn setbackgroundimage:[uiimage imagenamed:@ "bottom_highlighted"] forstate:uicontrolstatehighlighted]; [Downbtn Settag:2]; 92//3. Adding controls to the view [Self.view addsubview:downbtn];      9495//4. Click Control event for the button [Downbtn addtarget:self Action: @selector (click:) forcontrolevents:uicontroleventtouchupinside] ; 97 98 99/**================ left button =====================*/100//1. Create a Button object 101 UIButton *leftbtn=[uibutton b uttonwithtype:uibuttontypecustom];102//2. Setting the properties of an object 103 Leftbtn.frame=cgrectmake ((), 104 [Leftbtn SE Tbackgroundimage:[uiimage imagenamed:@ "Left_normal"] forstate:uicontrolstatenormal];105 [leftbtn Setbackgroundimage:[uiimage imagenamed:@ "left_highlighted"] forstate:uicontrolstatehighlighted];106 [leftbtn settag:4];107//3. Add the control to the View 108 [Self.view addsubview:leftbtn];109 110//4. Click Control Events 111 [LEFTBTN Addtar Get:self Action: @selector (Click:) forcontrolevents:uicontroleventtouchupinside];112 113 114 115/**======= ========= right button =====================*/116//1. Create a Button object 117 UIButton *rightbtn=[uibutton Buttonwithtype:uibuttontypecus tom];118//2. Setting the properties of an object 119 Rightbtn.frame=cgrecTmake (rightbtn setbackgroundimage:[uiimage imagenamed:@ "Right_normal") [Forstate:uicontrolstate] normal];121 [rightbtn setbackgroundimage:[uiimage imagenamed:@ "right_highlighted"] forState:     uicontrolstatehighlighted];122 [rightbtn settag:3];123//3. Adding controls to the View 124 [Self.view addsubview:rightbtn];125 126//4. Click Control Event for Button 127 [Rightbtn addtarget:self Action: @selector (click:) forcontrolevents:uicontroleventtouchupins IDE];128 129//Three, write two zoom button 130/**================ Zoom in button =====================*/131//1. Create object. Uibutt On *plusbtn=[uibutton buttonwithtype:uibuttontypecustom];133//2. Setting Properties 134 Plusbtn.frame=cgrectmake (75, 400, 40, 40) ; 135 [plusbtn setbackgroundimage:[uiimage imagenamed:@ "Plus_normal"] forstate:uicontrolstatenormal];136 [plusbtn s Etbackgroundimage:[uiimage imagenamed:@ "plus_highlighted"] forstate:uicontrolstatehighlighted];137 [plusbtn setTag : 1];138//3. Add to view 139 [Self.view Addsubview:plusbtn];140//4. Click event 141 [plusbtn addtarget:self Action: @selector (Zoom:) forcontrolevents:uicontroleventtouchupinside] ; 142 143 144/**================ Reduced button =====================*/145 UIButton *minusbtn=[uibutton Buttonwithtyp e:uibuttontypecustom];146 Minusbtn.frame=cgrectmake (max, Max, Max), 147 [Minusbtn Setbackgroundimage:[uiimage im agenamed:@ "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/ **================ Rotate the button to the left =====================*/154 UIButton *leftrotatebtn=[uibutton buttonwithtype: uibuttontypecustom];155 [leftrotatebtn setframe:cgrectmake (175, +, +)];156 [leftrotatebtn SetBackgroundImag E:[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/**= =============== Rotate the button to the right =====================*/163 UIButton *rightrotatebtn=[uibutton Buttonwithtype: uibuttontypecustom];164 [Rightrotatebtn Setframe:cgrectmake (225, +, +)];165 [rightrotatebtn setBackgroundIm Age:[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 (R Otate:) forcontrolevents:uicontroleventtouchupinside];170}171 172//control direction of multipleThe button calls the same method 173-(void) Click: (UIButton *) button174 {175 176//Practice using the Frame property 177//cgrect Frame=self.headimageview.frame; 178 179/** Note that if you control the position of the two properties of the frame and center at the same time, there will be a very interesting effect, pay attention to analysis */180//Practice using the Center property 181 Cgpoint Center=self.he adimageview.center;182 switch (button.tag) {183 case ktopbtntag:184 center.y-=30;185 b             reak;186 Case kdownbtntag:187 center.y+=30;188 break;189 case kleftbtntag:190             Found a bug, before the problem is because less write break, resulting in their sequential execution, 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//Set animation effect 202 [UIView beginanimations:nil context:nil];203 Self      . headimageview.center=center;204//Set time 205 [UIView setanimationduration:2.0];206 [UIView commitanimations];207 NSLog (@ "Move!");  208   209}210-(void) Zoom: (UIButton *) btn211 {212//using bounds, scaling with center point origin 213 CGRect bounds = Self.headImageView.bound     s;214 if (btn.tag) {215 bounds.size.height+=30;216 bounds.size.width+=30;217}218 else219 {bounds.size.height-=50;221 bounds.size.width-=50;222}223 224//Set animation 225 [UIView Beg Inanimations:nil context:nil];226 self.headimageview.bounds=bounds;227 [UIView setanimationduration:2.0];228 [ UIView commitanimations];229}230 231-(void) Rotate: (UIButton *) rotate232 {233//offset (not cumulative) 234//self.headimageview.t Ransform=cgaffinetransformmaketranslation (50, 200); 235//Zoom 236//self.headimageview.transform=cgaffinetransformma Kescale (1.2, 10); 237//Displacement (cumulative) on the original basis 238//self.headimageview.transform=cgaffinetransformtranslate (Self.headimag Eview.transform, 50, 50); 239//scaling on an original basis//self.headimageview.transform=cgaffinetransformscale (self.headimage View.transform, 1.5, 1.6);241 242//on the original basis for rotation 243 if (rotate.tag) {244///rotation angle is 1/pi, counterclockwise 245 self.headimageview.transform= Cgaffinetransformrotate (Self.headImageView.transform,-M_1_PI); 246}247 else248 {249//rotation angle is PI/2, clockwise 2 Self.headimageview.transform=cgaffinetransformrotate (Self.headImageView.transform, m_pi_2); 251}252 253}25 4 @end

Implementation results:

3.viewDidLoad

Viewdidload is the method that is called after the view is loaded, typically performing the initialization of the view controller in this method

In the Viewdidload method, be sure not to forget the method implementation that called the parent class

[Super Viewdidload];

iOS Development UI Chapter-transframe properties (deform)