IOS learning 02 simple animation, ios learning 02

IOS learning 02 simple animation, ios learning 02

The second day of IOS learning, today I am doing a simple animation program!

The procedure is as follows:

1. When you click the four buttons at the bottom left of the screen, the picture above will automatically move up, down, and left.

2. When you click the button on the right side of the screen to increase or decrease, the image above will grow and decrease.

The following describes the interface and code.

2.1 First, create a project and design interface, and import the corresponding images to the project images. xcassets. As follows:

2.2 UI images and arrow keys. Here I use buttons. Of course, you can also use other buttons.

On the 2.3 page, I have Highlighted all the buttons that can be clicked. In this case, I need to modify the State Config = Highlighted of the buttons, and then set the background image to be displayed at a high level, at the same time, you also need to set the attribute Type = Custom, so that when you click the button, it will be highlighted. Set attributes such:

2.4 click the right button on the left-side interface, and then the right side shows the corresponding attributes. You can clearly see that all the key settings are the same for the corresponding attribute settings.

2.5 when we want to set the tag attribute of the next four direction keys, in fact, this is equivalent to setting a unique ID for each key. In asp.net, each control automatically generates a unique ID.

However, it is not automatically generated in IOS, so you need to set it in attributes. In this way, you can write only one event Method in the background code to control four Button buttons, for example:

2.6 In the background code, we can use the Tag value to determine which key value is clicked for processing.

2.7 After the interface design is complete, the background code is written as follows:

//// ViewController. m // animation-1 // Created by Xu Zhou on 15-5-27. // Copyright (c) 2015 ___ FULLUSERNAME ___. all rights reserved. // # import "ViewController. h "@ interface ViewController () // defines a click event, this event includes four buttons on the connection interface: Up, down, left, and right. // This method is used to implement the Click Event of the four direction keys on the Interface-(IBAction) top :( UIButton *) btn; // define a major event and an associated key-(IBAction) big; // define a small event and an associated key-(IBAction) small; // define image attributes, to control image attributes @ property (weak, nonatomic) IBOutlet UIButton * head; @ end @ I Mplementation ViewController // you can specify the UIButton value of the currently clicked button to determine which direction key to click. -(IBAction) top :( UIButton *) btn {// find the frame of the interface piece, because the frame attribute cannot be set directly // It can only be assigned to CGRect first to save CGRect tempFrame = self. head. frame; // set the distance of the image to be moved. Set this parameter to 10, that is, the direction key is set every time, and the int btns is changed to 10; // determine the tag value of the currently clicked button to know which direction key is being clicked // 10, 20 left, 30 right, 40, bottom // tempFrame. origin. y: The Y coordinate of the current image. In IOS, Y and X are used to indicate the coordinates. // In this way, we can find the Y and X coordinates of the current image. If we set Y coordinates-10, the image will be moved to 10 points on the interface. // Similarly, both the top, bottom, and left are the same. Switch (btn. tag) {case 10: tempFrame. origin. y-= btns; break; case 20: tempFrame. origin. x-= btns; break; case 30: tempFrame. origin. x + = btns; break; case 40: tempFrame. origin. y + = btns; default: break;} // After the coordinates of the image are set, assign the empFrame variable of CGRect to the image. In this way, the position of the image on the interface has changed. Self. head. frame = tempFrame;} // The larger key-(IBAction) big {// Similarly, you can only assign a value to CGRect to save CGRect temFrame = self. head. frame; // set the size because it is larger. width and size. height attribute, // I think developers should know the role of these two attributes temFrame. size. width + = 20; temFrame. size. height + = 20; // At the same time, we also need to set the coordinate of the slice, because if the Y and X coordinates do not change, the program will keep moving down and right to become larger // This is because the Y and X coordinates of our image have not been moved, so the image can only change down and right, so in order to look like, the Y and X coordinate temFrame of the current property must be set at the same time. origin. x-= 10; temFrame. origin. y-= 10; self. head. frame = temFrame;} // reduce the key, the Code is the same as above, needless to say-(IBAction) small {CGRect temFrome = self. head. frame; temFrome. size. width-= 20; temFrome. size. height-= 20; temFrome. origin. x + = 10; temFrome. origin. y + = 10; self. head. frame = temFrome;} @ endView Code

3. After all these steps are completed, run the program and move it up, down, and left. Click the zoom-in button and press the button to increase or decrease.

But one problem is that the buttons can only be changed once, but they are not reflected. This actually has nothing to do with the Code. This is because IOS comes with an attribute "Use Auto Layout" to control the control attributes Widtht and heigth that do not allow the interface to automatically change. This attribute is automatically checked. Just remove the check box. For example:

3.1 now the check box for the Use Auto Layout attribute has been removed. Run the program again and the program becomes larger and smaller. OK. Pay attention to many minor IOS learning issues step by step.