How to implement the animation effect of iOS development-uiview (collection)

Introduction: In the development of the app, we will often use the animation effect. Using animations can make our apps cooler and more glamorous, and most importantly, optimizing the user experience, but depending on the quality of the animation. Like QQ, Sina Weibo and other apps, animation effect is very good, at least I like their animation, let me use to feel very smooth, very cheerful mood. This article describes the implementation of the UIView effect, non-core animation.

First, using the UIView class to implement the animation

The basic notation, the code must be placed between Begin and commit:

// Start Animation // Code ... // Submit Animation

Simple example:

// Start Animation [UIView setanimationduration:10.0//  animation    Duration/* * * * * * =N/A; [ _imageview Setcenter:point];  //  Submit animations

Run multiple animation effects at the same time:

[UIView Beginanimations:nil Context:nil]; [UIView setanimationduration: 3.0 ]; [_imageview Setalpha: 0.0 ]; [UIView commitanimations]; [UIView Beginanimations:nil Context:nil]; [UIView setanimationduration: 3.0  =N/A; [ _imageview Setcenter:point]; [UIView commitanimations];

The above code implements the animation effect ( simultaneous execution ):

1. The image is shifted downward by 150 pixels

2, set the image transparency to 0.

Specify the context:

Cgcontextref context = uigraphicsgetcurrentcontext (); [ UIView Beginanimations:nil Context:context]; [UIView setanimationduration: 2.0 ]; [_imageview Setalpha: 0 ]; [UIView commitanimations];

Uigraphicsgetcurrentcontext (): Gets the context of the current view

Other methods and properties:

The following methods and properties are not all, only examples (other methods and properties not mentioned) Please try it yourself, thank you):

//Start Animation+ (void) Beginanimations: (NSString *) Animationid Context: (void*) context;//Submit Animation+ (void) commitanimations; //set the animation curve, which is done by default at constant speed:+ (void) Setanimationcurve: (Uiviewanimationcurve) curve;//Set Animation Duration:+ (void) Setanimationduration: (nstimeinterval) duration; //the default is yes. Skips the animation effect for no and jumps directly to the post-execution state. + (void) setanimationsenabled: (BOOL) enabled;//Set Animation delay execution (delay: seconds):+ (void) Setanimationdelay: (nstimeinterval) delay; //number of repeat plays for the animation+ (void) Setanimationrepeatcount: (float) RepeatCount;//If yes, reverses (opposite) the animation effect, returns the state before the animation is reversed, and defaults to No:+ (void) Setanimationrepeatautoreverses: (BOOL) repeatautoreverses;//To set up an animation agent:+ (void) Setanimationdelegate: (ID)Delegate; //The animation will start with the method XX (you must set the animation agent first):+ (void) Setanimationwillstartselector: (SEL) selector;//Execute method XX When the animation is finished (you must set the animation agent first):+ (void) Setanimationdidstopselector: (SEL) selector;/** Set Animation transitions * * @param transition Animation transitions * @param view transition effect View * @param cache If yes, the start and end views are rendered individually and frames are created in the animation; The graph will render each frame. For example, you don't need to keep updating in view transitions, you just have to wait until the conversion is complete before you update the view. */+ (void) Setanimationtransition: (uiviewanimationtransition) Transition Forview: (UIView *) View cache: (BOOL) cache;//Delete all animation layers//Note: The layer refers to layout, example: [_imageview.layer removeallanimations];- (void) Removeallanimations;

Second, the use of UIView animation block code:

Method One:

[UIView animatewithduration:4.0//  animation duration                 animations:^{                     // code                 }];

Method Two:

[UIView animatewithduration:4.0//  animation duration                 animations:^{                     //  Code ...                  }                 Completion:^(BOOL finished) {                     // The animation is executed                     after completion //  code ...                 }];

Method Three:

 [UIView animatewithduration:4.0  //   delay:2.0  
    
     //
      animation delay  Options:uiviewanimationoptioncurveeasein //  animation transition effect  Animations:^{  //  code ...   ^ (BOOL fi                     nished) { //  After the animation is complete                  //  code ...  }];

Method Four, Spring animationring Animation):

At the beginning of IOS7, the system animation effect is widely applied to spring Animation:

[UIView animatewithduration:4.0 //Animation DurationDelay0.0 //Animation delayUsingspringwithdamping:1.0 //similar spring vibration effect 0~1Initialspringvelocity:5.0 //Initial SpeedOptions:uiviewanimationoptioncurveeaseinout//Animation Transition Effectanimations:^{                     //code ...Cgpoint point =_imageview.center; Point.y+= Max;                 [_imageview Setcenter:point]; } Completion:^(BOOL finished) {//execute after Animation finishes//code ...[_imageview Setalpha:1]; }];

Usingspringwithdamping: It has a range of 0.0f to 1.0f, the smaller the value, the more obvious the vibration effect of "spring".

Initialspringvelocity: initial speed, the higher the number starts to move faster. It is worth noting that the initial speed value is higher and the time is short, there will also be rebound situation.

RPM: Spring Animation is an ideal alternative to linear animation or ease-out animations. Because the IOS itself is heavily used by Spring Animation, users are accustomed to the animated effect, so using it can make the App feel more natural, in Apple's words is "instantly familiar". In addition, Spring Animation is not only available for locations, it applies to all properties that can be animated.

Method Five, Keyframe animation:

UIView animations already have advanced methods to create animations and can better understand and build animations. After IOS7 Apple added a new Animatekeyframeswithduration method, we can use it to create more complex and cool animation effects without the need to use the Core animation (Coreanimatino).

To create a Keyframe method:

/* * *   Add keyframe method * *  @param duration   Animation duration * @param delay      Animation delay * @param options    animation effects Options *  @param animations Animation Execution code *  */+ (void) animatekeyframeswithduration: ( Nstimeinterval) Duration                               delay: (nstimeinterval) Delay                             options: (uiviewkeyframeanimationoptions) options                          Animations: ( void (^) (void)) Animations                          completion: (void (^) (BOOL finished)) completion;

To add a Keyframe method:

/* * *   Add keyframes * *  @param framestarttime Animation relative start time *  @param frameduration  Animation relative duration *  @param Animations     */+ (void) Addkeyframewithrelativestarttime: (double) Framestarttime                        relativeduration: (double) frameduration                              animations: (  void (^) (void)) animations;

The relative time mentioned above, that is to say: "They will automatically match the duration of the animation according to the length of its running time."

Here is a simple example to answer, the rainbow Change View:

void(^keyframeblock) () = ^(){    //Create a color arrayNsarray *arraycolors =@[[uicolor Orangecolor], [Uicolor Yellowcolor], [Uicolor gree                             Ncolor], [Uicolor Bluecolor], [Uicolor Purplecolor],    [Uicolor Redcolor]]; Nsuinteger Colorcount=[arraycolors Count]; //Looping Add keyframes     for(Nsuinteger i =0; i < Colorcount; i++) {[UIView addkeyframewithrelativestarttime:i/(cgfloat) colorcount relativeduration:1/(cgfloat) colorcount animations:^{[_graduallyview setbackgroundcolor:arraycolors[i]];    }]; }}; [UIView animatekeyframeswithduration:4.0Delay:0.0Options:uiviewkeyframeanimationoptioncalculationmodecubic|uiviewanimationoptioncurvelinear Animations:keyframeblock Completio N:^(BOOL finished) {//execute after Animation finishes//code ...}];

The animation transition effect (Options) adds the following:

Uiviewkeyframeanimationoptioncalculationmodelinear     0//  default Uiviewkeyframeanimationoptioncalculationmodediscrete   1, uiviewkeyframeanimationoptioncalculationmodepaced      2, Uiviewkeyframeanimationoptioncalculationmodecubic      3 4 Ten

Let's look at a diagram to make it easier to understand:

Summary:

There are many ways to animate uiview. Simple animation effect You can throw away, more complex animation effect you can choose the Keyframe Keyframe method.

As for which to choose, it is necessary to judge according to the product demand.

This article refers to the article:

Http://www.tuicool.com/articles/FjiQJbF

Http://www.tuicool.com/articles/ZR7nYv

Blog Garveycalvin

Blog Source: http://www.cnblogs.com/GarveyCalvin/

This article copyright belongs to the author and the blog Garden altogether, welcome reprint, but must retain this paragraph statement, and gives the original link, thanks cooperation!

How to implement the animation effect of iOS development-uiview (collection)