Text top-top iOS Development UI Chapter-transframe properties (deformation)

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.m3//01-Practice using the button's Frame and center properties4//5//Created by Apple on 14-5-21.6//Copyright (c) 2014 itcase. All rights reserved.7//89#import"YYViewController.h"1011//Private extension12@interfaceYyviewcontroller ()13@property (nonatomic,weak) iboutlet UIButton *Headimageview;15@end1617@implementationYyviewcontroller1819//Enumeration type, starting from 120//Enumeration types have a big role to play in replacing the magic numbers in the program.typedefEnum22{ktopbtntag=1,24Kdownbtntag,25Krightbtntag,26Kleftbtntag27}btntag;2829//Viewdidload is the method that is called after the view is loaded, typically performing the initialization of the view controller in this method30-(void) Viewdidload31{3233//In the Viewdidload method, do not forget to invoke the method implementation of the parent class34[Super Viewdidload];353637//Handwriting Control Code38//One, write a button control, there is a picture3940//1. Creating a Button object using a class41//UIButton *headbtn=[[uibutton Alloc] initwithframe:cgrectmake (100, 100, 100, 100)];42//Set button object to custom typeUIButton *headbtn=[UIButton Buttonwithtype:uibuttontypecustom];4445//2. Set the properties of an object4647//(1) General property settings such as positionHeadbtn.frame=cgrectmake (100,100,100,100);4950//(2) Set the properties of the button in the normal stateWuyi [headbtn setbackgroundimage:[uiimage imagenamed:@"I"] Forstate:uicontrolstatenormal];[Headbtn Settitle:@"Dot me!"Forstate:uicontrolstatenormal];53[Headbtn Settitlecolor:[uicolor Redcolor] forstate:uicontrolstatenormal];5455//(3) Set the properties of the button in the highlighted state[Headbtn setbackgroundimage:[uiimage imagenamed:@"A"] forstate:uicontrolstatehighlighted];[Headbtn Settitle:@"It's OK ~"Forstate:uicontrolstatehighlighted];58[Headbtn Settitlecolor:[uicolor Bluecolor] forstate:uicontrolstatehighlighted];5960//3. Add the object to the view to show it61[Self.view ADDSUBVIEW:HEADBTN];62//Watch out!self.headimageview=HEADBTN;646566//Two, write four control the picture left and right up and down the direction of the button control6768/**================ Push-up button =====================*/69//1. Create a Button objectUIButton *topbtn=[UIButton Buttonwithtype:uibuttontypecustom];7172//2. Setting the properties of an objectTopbtn.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. Adding controls to the view78 [Self.view ADDSUBVIEW:TOPBTN]; 79 80//4. Click Control event for the button Bayi [topbtn addtarget:self Action: @selector (click:) forcontrolevents:uicontroleventtouchupinside]; 82 83 84/**================ down button =====================*/85//1. Create a Button object UIButton *downbtn=[uibutton 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]; 94 95//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 Buttonwithtype: uibuttontypecustom];102//2. Setting the properties of an object 103 Leftbtn.frame=cgrectmake ((), 104 [Leftbtn setbackgroundimage:[ UIImage imagenamed:@ "Left_normal"] forstate:uicontrolstatenormal];105 [leftbtn setbackgroundimage:[uiimage imageNamed:@ "Left_ Highlighted "] forstate:uicontrolstatehighlighted];106 [leftbtn settag:4];107//3. Adding controls to the View 108 [Self.view AddSubview: LEFTBTN];109 110//4. Click Control Event for button 111 [Leftbtn addtarget:self Action: @selector (click:) forcontrolevents: UICONTROLEVENTTOUCHUPINSIDE];112 113 114 115/**================ right button =====================*/116//1. Creating a Button Object 117 UIButton *rightbtn=[uibutton buttonwithtype:uibuttontypecustom];118//2. Set the properties of an object 119 Rightbtn.frame=cgrectmake (150, [Rightbtn setbackgroundimage:[uiimage imagenamed:@ "Right_normal"] forstate:uicontrolstatenormal]; 121 [rightbtn setbackgroundimage:[uiimage imagenamed:@ "right_highlighted"] forstate:uicontrolstatehighlighted];122 [Rightbtn settag:3];123//3. Add the control to the View 124 [Self.view addsubview:rightbtn];125 126//4. Click Control Events 127 [RIGHTBTN AddTarget: Self action: @selector (Click:) forcontrolevents:uicontroleventtouchupinside];128 129//Three, write two zoom button 130/**================ enlarged button =====================*/131//1. Creating Objects UIButton *plusbtn=[uibutton Buttonwithtype: uibuttontypecustom];133//2. Setting Properties 134 Plusbtn.frame=cgrectmake (max, +, +) 135 [plusbtn setbackgroundimage:[ UIImage imagenamed:@ "Plus_normal"] forstate:uicontrolstatenormal];136 [plusbtn setbackgroundimage:[uiimage imagenamed:@ "plus_highlighted"] forstate:uicontrolstatehighlighted];137 [plusbtn settag:1];138//3. Adding 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 buttonwithtype:uibuttontypecustom];146 minusbtn.frame=cgrectmake (max, Max, Max); 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/**================ Rotate Left button =====================*/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/**================ Rotate the button to the right =====================*/163 UIButton *rightrotatebtn=[uibutton buttonwithtype:uibuttontypecustom];164 [ Rightrotatebtn Setframe:cgrectmake (225, +, ())];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// Multiple buttons that control the direction call 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 frame and center at the same time, there will be a very interesting effect, pay attention to the analysis */180//Practice using the Center property 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-kleftbtntag:190//found a bug, before the problem was 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.bounds;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 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//displacement (not cumulative) 234//self.headimageview.transform=cgaffinetransformmaketranslation (50, 200); 235//Zoom 236// Self.headimageview.transform=cgaffinetransformmakescale (1.2, 10); 237//Displacement on original basis (is cumulative) 238// Self.headimageview.transform=cgaffinetransformtranslate (Self.headImageView.transform, 50, 50); 239// Scaling on the original basis//self.headimageview.transform=cgaffinetransformscale (Self.headImageView.transform, 1.5, 1.6); 241 242//On the basis of the original 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 self.headimageview.transform= Cgaffinetransformrotate (Self.headImageView.transform, m_pi_2); 251}252 253}254 @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];

Text top-top iOS Development UI Chapter-transframe properties (deformation)