IOS Basic Animation tutorial Sharing _ios

iOS has a variety of animations, animation to do a good application will be more attractive, use it will be more dazzling, this article introduces several basic iOS animation, a single explanation for easy to understand, but the real use, combined with will look more handsome, this depends on the specific application scene and everyone's imagination.

All the underlying animations give UIView a basic approach: animatewithduration. This method can contain a block of code that sets things to change, and when executed, iOS automatically shows up as an animation, with the following code:

[UIView animatewithduration:1 animations:^{
    //action to be performed
}];

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

Position animation

How do we put a square on the interface and then want him to move to another position through animation? Quite simply, it's better to change the center of the box at the top of the code block, as follows:

  [UIView animatewithduration:1 animations:^{
    //change the position of the blue squares
    cgpoint bluecenter = self.bluesquare.center;// Get the original square center position
    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
  }];

This way you can see the animation, very simple.
In addition, you can delay the execution time of the animation, for example, if you want to delay execution after half a second, then the same method, but a little more parameters:

  [UIView animatewithduration:1 delay:0.5 options:nil animations:^{
    //change the position of the blue squares
    cgpoint bluecenter = self.bluesquare.center;//gets the original square center position
    bluecenter.x = self.view.bounds.size.width-self.bluesquare.center.x;// Change the center position of the x coordinate
    self.blueSquare.center = bluecenter;//Set the center position of the square to the new position
  } Completion:nil];

Delay parameter indicates that the delay of 0.5 seconds to perform animation, options can not fill, completion is completed after the operation, you can not fill. This is achieved.

Transparency Animation

Let's say we want to animate the transparency of a control, such as slowly becoming basically invisible, and very simple, or that way:

  Start Transparency Animation (one second complete)
  [UIView animatewithduration:1 animations:^{
    //Transparency into 0.1
    Self.blueSquare.alpha = 0.1;
  } ];

Square original transparency, of course, the default is 1, through this setting, you can let it in a second time slowly transparency into 0.1, is not very simple!

Size animation

If you want to change the size of a control, you need to use a function that changes size in a block of code: Cgaffinetransformmakescale, the parameter of this function is set to the length and width of the original number of times, such as we through the animation to enlarge the control to the original twice times:

  For one second of animation
  [UIView animatewithduration:1 animations:^{
    self.blueSquare.transform = Cgaffinetransformmakescale (2.0, 2.0);//length and width respectively become twice times
  }];

Here will be the box through a second animation slowly magnified to the original twice times, here to be clear is the enlargement process, the center of the box, that is, from the center to the surrounding amplification. To zoom out, you can also change the multiples of the parameters.
Here's a little bit of imagination, we put zoom animation and transparency animation together, zoom to the entire screen edge gradient to see, is not very much like some of the animation has seen

Color animation

Now comes the color of the gradient animation, the same simple very:

  Change color
  [uiview animatewithduration:1 animations:^{
    self.blueSquare.backgroundColor = [Uicolor redcolor];
  }];

In the code block to reset the color of the square, you can achieve the gradient effect, simple to cry ...

Rotate animation

The above animation is very simple, are in the animation of the code block reset to achieve the effect of animation, and the rotation is slightly more complex.
Suppose we have a picture of a wheel wheelimg, to rotate him, still need to use the method cgaffinetransformmakerotation, just our telescopic size used to Cgaffinetransformmakescale, looks almost, It's pretty much the same, the argument is the angle of rotation, and we can try this:

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

This can indeed achieve the purpose of rotation, according to the parameters, the operation will rotate semicircle, and then stop. If you just want to rotate and stop, write in this way, change the angle, but if you want to rotate a whole circle, the first thought is to change the angle to the whole circle:

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

This writing, the operation is not moving, you can try, because its final position, that is, after a full circle, or in the original position, so the iOS choose not to move. It doesn't move the same way when you change the position, or when you are in the same position. How about that. In addition, the rotation here is one-time, if you want to always turn, how to do it, is it easy to think of the cycle? In fact, the loop, but we can use more elegant than the For loop animation cycle, remember just do the time delay animation method, and finally have a parameter is completion, the function of this parameter is to provide animation at the end of the content, then we could call it itself here? Of course:

Continuous rotation animation
-(void) Spin {
  //Options property setting allows it to rotate smoothly, completion let it constantly invoke itself after completion
  [UIView animatewithduration : 1 delay:0 options:uiviewanimationoptioncurvelinear animations:^{
    self.wheelImg.transform = Cgaffinetransformrotate (Self.wheelImg.transform, M_PI); The first argument is the angle at which the rotation begins, and the second is the angle of rotation
  }completion:^ (BOOL finished {///continue to execute
    [self spin] at the end
  ];
}

Here we put the animation into a function, convenient for us to call in the completion, so that the continuous rotation, of course, if you want to rotate only a whole circle, you can use for loops, all roads to Rome.

The above is the basic iOS UIView animation, a single look is quite simple, in our real use, of course, we should also pay attention to the combination of use, play the imagination, simple function can be combined with handsome effect ~

I can download my sample project at GitHub: Https://github.com/Cloudox/iOSAnimationSample

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.