iOS development: The animation effect of UIView

The so-called animation effect, is to move the painting, to iOS app in terms of words, is a variety of uiview mobile. Think about what you need to think about if we're going to achieve all the UIView animations ourselves?

* Where is the UIView now?

* Where will the UIView finally move?

* How does the uiview move there?

* How long does the animation last?

* Minimum time interval for each move?

* Where should the moving of the minimum time interval move?

* ....

Think of this as a process of killing brain cells, especially if each animation process repeats the process of torture.

Fortunately, reality is better than thought, and Apple has thought about the problem for developers, and by using the animated support provided by Uikit, developers can achieve a variety of animation effects with just a few lines of code. In Uikit, all animation effects support methods that are in the UIView class.

First, there are many attributes in UIView to describe a uiview state, and animation is the process of allowing UIView to transition smoothly from one state to another. These properties are:

By setting these properties, it basically solves the problem of where to move in the animation.

Next, Apple has a number of ways to make it easier for home to control how the animation moves and how it moves in UIView. IOS3.0 and before, the UIView supported animation methods are as follows:

Object-c Code

@interface UIView (uiviewanimation)

+ (void) Beginanimations: (NSString *) Animationid context: (void *) context; Additional context info passed to would start/did stop selectors. Begin/commit can be nested

+ (void) commitanimations; Starts up any animations as the top level animation is commited

No getters. If called outside animation blocks, these setters have no effect.

+ (void) Setanimationdelegate: (id) delegate; Default = Nil

+ (void) Setanimationwillstartselector: (SEL) selector; Default = NULL. -animationwillstart: (NSString *) Animationid context: (void *) context

+ (void) Setanimationdidstopselector: (SEL) selector; Default = NULL. -animationdidstop: (NSString *) Animationid finished: (NSNumber *) finished context: (void *) context

+ (void) Setanimationduration: (nstimeinterval) duration; Default = 0.2

+ (void) Setanimationdelay: (nstimeinterval) delay; Default = 0.0

+ (void) Setanimationstartdate: (NSDate *) StartDate; Default = Now ([NSDate Date])

+ (void) Setanimationcurve: (Uiviewanimationcurve) curve; Default = Uiviewanimationcurveeaseinout

+ (void) Setanimationrepeatcount: (float) repeatcount; Default = 0.0. May is fractional

+ (void) setanimationrepeatautoreverses: (BOOL) repeatautoreverses; Default = NO. Used if repeat count is Non-zero

+ (void) Setanimationbeginsfromcurrentstate: (BOOL) fromcurrentstate; Default = NO. If YES, the current view position are always used for new animations--allowing animations to "pile up" in each. Otherwise, the end of the is used to the animation (the default).

+ (void) Setanimationtransition: (uiviewanimationtransition) Transition Forview: (UIView *) View cache: (BOOL) cache; Current Limitation-only one-begin/commit block

+ (void) setanimationsenabled: (BOOL) enabled; Ignore any attribute changes while set.

+ (BOOL) areanimationsenabled;

@end

These methods are not intuitive, and developers still need to spend a lot of time thinking about how to combine these methods. But since IOS4.0 provides block syntax support, Apple has encapsulated the implementation of the animation effect, the effect of the pole to see the shadow, intuitive many, so you can not look at the above methods, focus on the following methods:

Object-c Code

@interface UIView (uiviewanimationwithblocks)

+ (void) Animatewithduration: (nstimeinterval) duration

Delay: (nstimeinterval) delay

Options: (uiviewanimationoptions) options

Animations: (void (^) (void)) animations

Completion: (void (^) (BOOL finished)) completion;

+ (void) Animatewithduration: (nstimeinterval) duration

Animations: (void (^) (void)) animations

Completion: (void (^) (BOOL finished) completion

Ns_available_ios (4_0); Delay = 0.0, options = 0

+ (void) Animatewithduration: (nstimeinterval) duration

Animations: (void (^) (void)) animations

Ns_available_ios (4_0); Delay = 0.0, options = 0, completion = NULL

+ (void) Transitionwithview: (UIView *) view

Duration: (NSTIMEINTERVL) duration

Options: (uiviewanimationoptins) options

Animations: (void (^) (void) animations

Completion: (void (^) (BOOL finished) completion

Ns_available_ios (4_0);

+ (void) Transitionfromview: (UIView *) Fromview

Toview: (UIView *) Toview

Duration: (nstimeinterval) duration

Options: (uiviewanimationoptions) options

Completion: (void (^) (BOOL finished) completion

Ns_available_ios (4_0); Toview added to Fromview.superview, Fromview removed in its superview

@end

The above methods are very intuitive to look at from the name. The first three methods can be translated in the following manner, except that the latter two use some default parameters:

Java code

To do an animated effect, the duration of duration,

Delay delay seconds to start execution,

Run this animation in the way specified by options,

The animations block specifies which UIView will participate in the animation effect and what state these uiview will be when the animation is finished.

After the animation completes, execute the completion block to finish.

With these 3 methods, developers only need to think, initial value, result value, duration, operation mode on the line, specific details of the move to the class library.

The latter 2 methods are used to convert UIView to each other, and the individual feels less useful, because the above three methods can do the same, so skip.

About UIView animation effect support, there are 2 points worth mentioning

* All of the above methods are class methods, when these methods are invoked, the system will animate the new thread and will not block execution of the main thread.

* UIView Animation effect only supports some simple 2D animation effect, the complex people have to study the core Animation.

A practical example

In the host interface of a small game I wrote, I used a little animation effect, the main interface of the design diagram is as follows:

The following animation effects are shown below:

I want the effect that, after loading the main interface, the picture slowly expands into a fan, and then the game menu display for the player to click.

The code is as follows:

First, prepare the pre-animation state so that the uiview you want to show is not visible:

Object-c Code

-(void) prepareforintroanimation

{

Self.simageview.hidden=yes;

Self.nimageview.hidden=yes;

Self.aimageview.hidden=yes;

Self.pimageview.hidden=yes;

Self.jokerimageview.hidden=yes;

self.hostgamebutton.alpha=0.0f;

self.joingamebutton.alpha=0.0f;

self.singleplayergamebutton.alpha=0.0f;

self.helpbutton.alpha=0.0f;

_buttonsenabled = NO;

}

Then, show the animation effect:

Object-c Code

-(void) performanimation

{

Show UIView

Self.simageview.hidden=no;

Self.nimageview.hidden=no;

Self.aimageview.hidden=no;

Self.pimageview.hidden=no;

Self.jokerimageview.hidden=no;

[UIView animatewithduration:0.65f

delay:0.5f

Options:uiviewanimationoptioncurveeasein

animations:^

{

Determine the central position and deflection angle of the UIView

Self.sImageView.center = Cgpointmake (80.0f, 108.0f);

Self.sImageView.transform = Cgaffinetransformmakerotation ( -0.22f);

Self.nImageView.center = Cgpointmake (160.0f, 93.0f);

Self.nImageView.transform = Cgaffinetransformmakerotation ( -0.1f);

Self.aImageView.center = Cgpointmake (240.0f, 88.0f);

Self.pImageView.center = Cgpointmake (320.0f, 93.0f);

Self.pImageView.transform = Cgaffinetransformmakerotation (0.1f);

Self.jokerImageView.center = Cgpointmake (400.0f, 108.0f);

Self.jokerImageView.transform = Cgaffinetransformmakerotation (0.22f);

}

Completion:nil];

[UIView animatewithduration:0.5f

delay:1.0f

Options:uiviewanimationoptioncurveeaseout

animations:^

{

The transparency is set to 1 to display the game menu.

Self.hostGameButton.alpha = 1.0f;

Self.joinGameButton.alpha = 1.0f;

Self.singlePlayerGameButton.alpha = 1.0f;

Self.helpButton.alpha = 1.0f;

}

completion:^ (BOOL finished)

{

_buttonsenabled = YES;

}];

}

In addition, the animation effect can be connected with a completion callback block to complete multiple animation effects.