iOS Learning 02 Simple animations

iOS learning the next day, make a simple animated applet today!

The procedure is as follows:

1 This program, when you click on the bottom left 4 direction of the button, the picture above will follow the automatic up and down movement.

2 When you click on the screen to the right of the larger and smaller buttons, the image above will become larger and smaller.

The second function is here, the following start interface and code description.

2.1 First or first to create the project and design interface, of course, the corresponding picture should be imported into the project Images.xcassets. As follows:

2.2 Interface picture and arrow keys, I do it here with a button, of course, with other can also.

2.3 Interface so you can click on the button, I have done a highlight, this will modify the key state config=highlighted, and then set to the background image of the display, but also set the property Type=custom, This will only be highlighted when you click on the button. Set properties such as:

2.4 The left side of the interface I point to the right button, and then the right side is the corresponding property, this can be clearly seen, the corresponding property settings, all the key settings are the same.

2.5 Here we also set the next 4 arrow key Tag property, in fact, this is quite give each key set a unique ID, in ASP. NET, each control will automatically generate a unique ID.

However, iOS does not automatically generate, so you have to set the property itself, so that we in the background code, can write only one event method to control 4 button buttons, such as:

2.6 So in the background code we can use the value of the tag to determine which button is clicked, to do the processing.

2.7 After the interface design is complete, the following code is started to write the background code as follows:

////VIEWCONTROLLER.M//Animation-1////Created by Xu Zhou on 15-5-27.//Copyright (c) 2015 ___fullusername___. All rights reserved.//#import "ViewController.h"@interfaceViewcontroller ()//Define a Click event, this event colleague connection interface 4 up and down buttons//This means that the click events of the 4 arrow keys on the interface are implemented in this way.-(Ibaction) Top: (UIButton *) btn;//define the event, connect to the big button-(ibaction) big;//define a small event, a small key to the connection-(ibaction) small;//define picture properties to control picture Properties@property (weak,nonatomic) iboutlet UIButton *head;@end@implementationViewcontroller//Click on the direction of the event, the current click on the UIButton value of the button to determine which direction to click on the key. -(Ibaction) Top: (UIButton *) btn{//find the frame of the interface slice because the frame property cannot be set directly//You can only assign a value to CGRect to saveCGRect tempframe=Self.head.frame; //set the distance of the picture to move, here set to 10, that is, each point of the direction of the key, the change of 10 points    intbtns=Ten; //The value of the tag of the currently clicked Key can be used to know which direction key is currently clicked .//10 on, 20 left, 30 right, 40, lower//TEMPFRAME.ORIGIN.Y, here refers to the current picture y-coordinate, the country for iOS in the interface is to use Y and x to named coordinates. //so that we can find the current picture y and x coordinates is good, we set the y-coordinate-10, then the picture will move to the top of the interface 10 points//Similarly, the upper and lower sides are the same.     Switch(Btn.tag) { Case Ten: Tempframe.origin.y-=Btns;  Break;  Case  -: tempframe.origin.x-=Btns;  Break;  Case  -: tempframe.origin.x+=Btns;  Break;  Case  +: Tempframe.origin.y+=Btns; default:             Break; }    //after setting the coordinates of the picture, we then assign the CGRect variable empframe to the picture. In this way, the position of the picture in the interface has changed. Self.head.frame=Tempframe;}//Big Button-(ibaction) big{//the same as above, can only be assigned to CGRect to saveCGRect temframe=Self.head.frame; //because this is getting bigger, the change is setting the Size.width and Size.Height properties,//I want to be a developer and I should know what these two properties do.temframe.size.width+= -; TemFrame.size.height+= -; //at the same time we have to set the coordinates of the piece, because if the Y and x coordinates do not change, the program will move up and down and to the right .//this is because the Y and x coordinates of our picture have not been moved, so the picture can only be changed downward and right, so in order to look like, to set the Y and x coordinates of the current property at the same timetemframe.origin.x-=Ten; TEMFRAME.ORIGIN.Y-=Ten; Self.head.frame=Temframe;}//Change the button, the code ibid .-(ibaction) small{cgrect temfrome=Self.head.frame; TemFrome.size.width-= -; TemFrome.size.height-= -; Temfrome.origin.x+=Ten; TEMFROME.ORIGIN.Y+=Ten; Self.head.frame=Temfrome;}@end

View Code

Three when these are done, run the program, and then move up or down, click to enlarge and place the small button can be larger and smaller.

But one problem is that getting bigger and smaller buttons can only change once, not reflected. This is actually not related to the code, this is because iOS comes with an attribute use auto layout to control the control properties widtht and heigth that do not allow the interface to change automatically. This property is automatically ticked. Let's just remove the tick. Such as:

3.1 Now use Auto Layout This property tick has been removed, run the program again, become larger and smaller is no problem. OK, learning iOS a lot of small problems to note, step by step.

iOS Learning 02 Simple animations