Basic iOS animation tutorial

Basic iOS animation tutorial

There are a variety of iOS animations, and the good apps made by the animations will be more attractive and more eye-catching. This article introduces several basic iOS animations for easy understanding, when combined, it looks more handsome. It depends on the specific application scenarios and imagination of everyone.

All basic animations give UIView a basic method: animateWithDuration. This method can contain a code block, which is used to set the things to be changed. During execution, iOS will automatically display the Code as an animation. The Code is as follows:

[UIView animateWithDuration: 1 animations: ^ {// action to be executed}];

The parameter "1" indicates that the animation is completed in one second.
Now we will explain the animation of position, transparency, size, color, and rotation respectively.

Position Animation

We place a square on the interface and want it to be moved to another position through animation. How can this problem be solved? It's easy to change the center of the block at the position of the above code block, as shown below:

[UIView animateWithDuration: 1 animations: ^ {// change the position of the blue box CGPoint blueCenter = self. blueSquare. center; // obtain the original center location blueCenter. x = self. view. bounds. size. width-self. blueSquare. center. x; // change the X coordinate of the center position self. blueSquare. center = blueCenter; // set the center position of the square to the new position}];

In this way, you can see the animation. It's easy.
In addition, you can also delay the animation execution time. For example, if you want to delay the animation execution after half a second, you can use the same method, but the parameters must be a little more:

[UIView animateWithDuration: 1 delay: 0.5 options: nil animations: ^ {// change the position of the blue square CGPoint blueCenter = self. blueSquare. center; // obtain the original center location blueCenter. x = self. view. bounds. size. width-self. blueSquare. center. x; // change the X coordinate of the center position self. blueSquare. center = blueCenter; // set the center position of the square to the new position} completion: nil];

The delay parameter indicates that the animation is delayed for 0.5 seconds, options can be left blank, and completion is the completed operation or not. This is achieved.

Transparency Animation

Let's assume that we want to adjust the transparency of a control through an animation, such as gradually becoming invisible, which is also very simple, or that method:

// Start the transparency animation (completed in one second) [UIView animateWithDuration: 1 animations: ^ {// The transparency is changed to 0.1 self. blueSquare. alpha = 0.1;}];

The square is transparent. Of course, the default value is 1. With this setting, the transparency can be gradually changed to 0.1 in one second. Is it very easy!

Size Animation

If you want to change the size of a widget, you need to use a function to change the size in the code block: CGAffineTransformMakeScale. The parameters of this function are respectively set length and width to the original number of times, for example, we can use an animation to enlarge the control to twice the original one:

// Animation for one second [UIView animateWithDuration: 1 animations: ^ {self. blueSquare. transform = CGAffineTransformMakeScale (2.0, 2.0); // change the length and width to twice the original width.}];

Here, the square is gradually zoomed twice as much as the original one-second animation. It must be clear that the center point of the Square remains unchanged during the enlargement process, that is, it is zoomed in from the center to the surrounding area. To reduce the number of parameters, you can change the number of parameters.
As you can imagine, we can combine the zoom-in animation and opacity animation to zoom in to the entire screen side gradient to invisible, isn't it like some of the previously seen animations ~

Color Animation

The gradient animation of colors is as simple as the following:

// Change the color [UIView animateWithDuration: 1 animations: ^ {self. blueSquare. backgroundColor = [UIColor redColor];}];

You can reset the color of the square in the code block to achieve the gradient effect. It's easy to cry...

Rotating Animation

The above animation operations are very simple. You can re-set them in the animation code block to achieve the animation effect, and the rotation is a little more complicated.
Suppose we have a wheel image, and we want to rotate it. We still need to use the CGAffineTransformMakeRotation method. Just now we used CGAffineTransformMakeScale, which looks similar and uses almost the same size. The parameter is the rotation angle, we can try to write it like this:

    [UIView animateWithDuration:1 animations:^{        self.wheelImg.transform = CGAffineTransformMakeRotation(M_PI);    }];

This can indeed achieve the purpose of rotation. According to the parameters, the semi-circle will be rotated during running, and then stopped. If you just want to rotate and stop, you can change the angle in this way. But if you want to rotate an entire circle, the first thought is to change the angle to an integral circle:

    [UIView animateWithDuration:1 animations:^{        self.wheelImg.transform = CGAffineTransformMakeRotation(2*M_PI);    }];

In this way, the operation is actually not dynamic. You can try it, because its final position, that is, after turning an entire circle, is still in the original position, so iOS does not choose to move. It is the same as changing the position. What should we do. In addition, the rotation here is all one-time. If you want to keep turning, how can we do it? Is it easy to think of a loop? It is actually a loop, but we can use an animation loop that is more elegant than the for loop. Remember the method when we were doing a delayed animation. The final parameter is completion, the function of this parameter is to provide the content to be executed when the animation ends. Can we call it here? Of course:

// Continuous rotation animation-(void) spin {// options attribute settings allow them to rotate cyclically smoothly, and completion allows them to call themselves after they are completed continuously [UIView animateWithDuration: 1 delay: 0 options: UIViewAnimationOptionCurveLinear animations: ^ {self. wheelImg. transform = CGAffineTransformRotate (self. wheelImg. transform, M_PI); // The first parameter is the starting rotation angle, and the second parameter is the Rotation Angle} completion: ^ (BOOL finished) {// continue executing [self spin];}] at the end;}

Here we place the animation in a function so that we can call it in completion, so that continuous rotation is realized. Of course, if you want to rotate only one round, you can use the for loop, all things lead to Rome.

The above is the basic iOS UIView animation, which is quite simple for a single view. In our actual use, of course, we should also pay attention to the combined use to make full use of our imagination, simple functions can also be combined to produce handsome results ~