iOS Basic Animation Tutorial Sharing

There are many kinds of animations in iOS, and the good application of animation will be more attractive and more dazzling to use. This paper introduces several basic animations of iOS, which are easy to understand by single explanation, but when used in practice, they will look more handsome when combined, depending on the specific application scenarios and everyone's imagination.

All basic animations give UIView1 a basic method: animateWithDuration. This method can contain a code block, which sets the things to be changed. When iOS is executed, it will be automatically displayed in the form of animation. The code is as follows:

[UIView animateWithDuration:1 animations:^{
    //  Action to perform 
}];

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

Position animation

We put a square on the interface, and then we want it to move to another position through animation. What should we do? Quite simply, just change the center of the box in the position of the above code block, as follows:

  [UIView animateWithDuration:1 animations:^{
    //  Change the position of the blue square 
    CGPoint blueCenter = self.blueSquare.center;//  Gets the original square center position 
    blueCenter.x = self.view.bounds.size.width - self.blueSquare.center.x;//  Changing the center position X Coordinates 
    self.blueSquare.center = blueCenter;//  Set the center position of the box to the new position 
  }];

In this way, you can see the animation, which is very simple.
In addition, you can also delay the execution time of animation. For example, if you want to delay the execution after half a second, it is the same method, but the parameters need one more point:

  [UIView animateWithDuration:1 delay:0.5 options:nil animations:^{
    //  Change the position of the blue square 
    CGPoint blueCenter = self.blueSquare.center;//  Gets the original square center position 
    blueCenter.x = self.view.bounds.size.width - self.blueSquare.center.x;//  Changing the center position X Coordinates 
    self.blueSquare.center = blueCenter;//  Set the center position of the box to the new position 
  } completion:nil];

The delay parameter indicates that the animation is delayed by 0.5 seconds, options can be left unfilled, and completion can be left unfilled after completion. This is realized.

Transparency animation

Suppose we want to gradient the transparency of a control through animation, such as slowly becoming basically invisible, which is also very simple, or the same method:

  //  Start the transparency animation ( 1 Seconds complete) 
  [UIView animateWithDuration:1 animations:^{
    //  Transparency becomes 0.1
    self.blueSquare.alpha = 0.1;
  }];

The original box has transparency, of course, the default is 1, through this setting, you can let it slowly in 1 second to become 0.1 transparency, is it very simple!

Size animation

If you want to change the size of a control, you need to use a function to change the size in the code block: CGAffineTransformMakeScale. The parameters of this function are how many times the length and width are set to be the original. For example, we enlarge the control to twice the original through animation:

  //  Go on 1 Second animation 
  [UIView animateWithDuration:1 animations:^{
    self.blueSquare.transform = CGAffineTransformMakeScale(2.0, 2.0);//  The length and width are doubled respectively 
  }];

Here, the square is slowly enlarged to twice the original one-second animation. What should be made clear here is that during the enlargement process, the center point of the square remains unchanged, that is to say, it is enlarged from the center to 4 weeks. You can also change the multiple of the parameters to reduce them.
Here you can imagine a little, we will zoom in animation and transparency animation combined into 1, change zoom in to the whole screen edge gradually to be invisible, is it very much like 1 some seen animation

Color animation

Now come to the color gradient animation, which is also very simple:

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

Reset the color of the block below 1 in the code block, and you can realize the gradient effect, which is as simple as crying. . .

Rotating animation

The above animation operation is very simple, are in the animation code block reset under 1 can achieve the animation effect, and the rotation is slightly more complex 1 point.
Suppose we have a picture of a wheel wheelImg. To rotate it, we still need to use the method CGAffineTransformMakeRotation. Just now, we used CGAffineTransformMakeScale to expand and contract the size, which looks similar and uses similar. 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 really achieve the purpose of rotation. According to the parameters, when running, it will rotate the semicircle and then stop. If you just want to rotate 1 and stop, write this way and change the angle, but if you want to rotate 1 full circle, the first thought may be to change the angle to full circle:

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

In this way, it will not move when running. You can try it once, because its final position, that is, after turning a whole circle, is still in its original position, so iOS chooses not to move. Just like changing the position, when the position is still the original position, it will not move 1. What can I do. In addition, the rotation here is quadratic. If you want to turn straight, how to do it? Is it easy to think of circulation? In fact, it is a loop, but we can use a more elegant animation loop than for loop. Remember the method of delaying animation just now. Finally, there is a parameter completion. The function of this parameter is to provide the content executed at the end of animation. Can we call itself here? Of course:

//  Continuous rotation animation 
- (void)spin {
  // options Property settings allow it to cycle smoothly, completion Let it constantly call itself after completion 
  [UIView animateWithDuration:1 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
    self.wheelImg.transform = CGAffineTransformRotate(self.wheelImg.transform, M_PI);//  No. 1 1 The parameter is the angle at which the rotation starts, and the 2 The angle of rotation 
  }completion:^(BOOL finished){//  Continue execution at the end 
    [self spin];
  }];
}

Here we put the animation into a function, which is convenient for us to call in completion, so as to realize continuous rotation. Of course, if you want to rotate only one whole circle, you can use for cycle, and all roads lead to Rome.

The above is the basic iOS UIView animation. It is quite simple to look at each other individually. In our real use, of course, we should also pay attention to the combination of use and imagination. Simple functions can also combine handsome effects ~

My sample project can be downloaded at github: https://github.com/Cloudox/iOSAnimationSample