IOS development-how to implement the animation effects of UIView (collection), ios-uiview

IOS development-how to implement the animation effects of UIView (collection), ios-uiview

Animation effects are often used in APP development. Animation can make our apps cool and cool. The most important thing is to optimize the user experience, but it depends on the quality of the animation. For apps like QQ, Sina Weibo, and so on, the animation effect is very good. At least I like their animations, which makes me feel very smooth and cheerful. This article describes how to implement the UIView effect, non-core animation.

 

I. Use the UIView class for animation

The code must be placed between Begin and Commit:

[UIView beginAnimations: nil context: nil]; // start animation // Code... [UIView commitAnimations]; // submit an animation

 

Simple Example:

[UIView beginAnimations: nil context: nil]; // start the animation [UIView setAnimationDuration: 10.0]; // animation duration/*** move the image downward */CGPoint point = _ imageView. center; point. y + = 150; [_ imageView setCenter: point]; [UIView commitAnimations]; // submit an animation

 

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];CGPoint point = _imageView.center;point.y += 150;[_imageView setCenter:point];[UIView commitAnimations];

The animation effect implemented by the above Code is (executed at the same time ):

1. The image is moved down to 150 images.

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 attributes:

The following methods and attributes are not all described in this document. (for other methods and attributes that are not mentioned, try them by yourself. Thank you ):

// Start the animation + (void) beginAnimations :( NSString *) animationID context :( void *) context; // submit the animation + (void) commitAnimations; // set the animation curve, the default value is constant speed: + (void) setAnimationCurve :( UIViewAnimationCurve) curve; // set the animation duration: + (void) setAnimationDuration :( NSTimeInterval) duration; // The default value is YES. If the value is NO, the animation effect is skipped and the status after execution is skipped. + (Void) setAnimationsEnabled :( BOOL) enabled; // sets the animation delay for execution (delay: seconds): + (void) setAnimationDelay :( NSTimeInterval) delay; // The number of repeated playback times of the animation + (void) setAnimationRepeatCount :( float) repeatCount; // If YES, the reverse (opposite) animation effect is returned; the default value is NO: + (void) setAnimationRepeatAutoreverses :( BOOL) repeatAutoreverses; // set the animation Proxy: + (void) setAnimationDelegate :( id) delegate; // execute the method ×× when the animation is about to start (the animation proxy must be set first): + (void) setAnimationWillStartSelec Tor :( SEL) selector; // Method Used for executing the animation when the animation ends ×× (the animation proxy must be set first): + (void) setAnimationDidStopSelector :( SEL) selector; /*** set the animation transition effect ** @ param transition the transition effect of the animation * @ param view the transition effect view * @ param cache If YES, the start and end views are rendered once and frames are created in the animation. Otherwise, the view renders each frame. For example, you do not need to update the view continuously during the view transition. You only need to wait until the conversion is complete before updating 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;

 

 

Ii. Use the animated block code of UIView:

Method 1:

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

 

Method 2:

[UIView animateWithDuration: 4.0 // animation duration animations: ^ {// code ...} completion: ^ (BOOL finished) {// After the animation is completed, execute // code...}];

 

 

Method 3:

[UIView animateWithDuration: 4.0 // animation duration delay: 2.0 // animation latency options: UIViewAnimationOptionCurveEaseIn // animation transition effect animations: ^ {// code ...} completion: ^ (BOOL finished) {// After the animation is completed, execute // code...}];

 

Method 4, Spring Animationring Animation ):

Starting from iOS 7, the system Animation effect is widely used in Spring Animation:

[UIView animateWithDuration: 4.0 // animation duration delay: 0.0 // animation delay usingSpringWithDamping: 1.0 // 0 ~ similar to spring vibration effect ~ 1 initialSpringVelocity: 5.0 // initial speed options: UIViewAnimationOptionCurveEaseInOut // animation transition effect animations: ^ {// code... CGPoint point = _ imageView. center; point. y + = 150; [_ imageView setCenter: point];} completion: ^ (BOOL finished) {// execute after the animation is completed // code... [_ imageView setAlpha: 1];}];

UsingSpringWithDamping: The value range is 0.0f to 1.0f. The smaller the value, the more obvious the vibration effect of the spring.

InitialSpringVelocity: the initial speed. The larger the value, the faster the start. It is worth noting that a rebound may also occur when the initial speed value is high and the time is short.

Turn: Spring Animation is an ideal alternative to linear or semi-out animations. Because iOS uses Spring Animation in a lot, users are used to this Animation effect. Therefore, using it can make the App feel more natural. in Apple's words, it is "instantly familiar 」. In addition, Spring Animation is not only applicable to positions. It applies to all attributes that can be added with Animation effects.

 

Method 5: Key Frame Animation:

UIView animation has an advanced method to create an animation, and can better understand and build the animation. After IOS7, Apple added an animateKeyframesWithDuration method. We can use it to create more complex and cool animation effects without using CoreAnimatino ).

 

Key Frame creation method:

/*** Add Key Frame Method ** @ param duration animation duration * @ param delay animation delay * @ param options animation effect option * @ param animations animation Execution Code * @ param completion code execution after animation ends */+ (void) expiration :( NSTimeInterval) duration delay :( NSTimeInterval) delay options :( partial) options animations :( void (^) (void) animations completion :( void (^) (BOOL finished) completion;

 

Key Frame addition method:

/*** Add a key frame ** @ param frameStartTime the relative start time of the animation * @ param frameDuration the relative duration of the animation * @ param animations the animation Execution Code */+ (void) addKeyframeWithRelativeStartTime :( double) frameStartTime relativeDuration :( double) frameDuration animations :( void (^) (void) animations;

The relative time mentioned above, that is, "they will automatically match their running duration based on the total animation duration ".

 

The following uses a simple example to illustrate the rainbow change view:

Void (^ keyFrameBlock) () = ^ () {// create a color array NSArray * arrayColors = @ [[UIColor orangeColor], [UIColor yellowColor], [UIColor greenColor], [UIColor blueColor], [UIColor purpleColor], [UIColor redColor]; NSUInteger colorCount = [arrayColors count]; // cyclically add key frames for (NSUInteger I = 0; I <colorCount; I ++) {[UIView addKeyframeWithRelativeStartTime: I/(CGFloat) colorCount relativeDuration: 1/(CGFloat) colorCount animations: ^ {[_ graduallyView setBackgroundColor: arrayColors [I];}] ;}}; [UIView animateKeyframesWithDuration: 4.0 delay: 0.0 options: enabled | UIViewAnimationOptionCurveLinear animations: keyFrameBlock completion: ^ (BOOL finished) {// execute after the animation is completed // code...}];

Animation transition effect (Options), added the following:

UIViewKeyframeAnimationOptionCalculationModeLinear     = 0 << 10, // defaultUIViewKeyframeAnimationOptionCalculationModeDiscrete   = 1 << 10,UIViewKeyframeAnimationOptionCalculationModePaced      = 2 << 10,UIViewKeyframeAnimationOptionCalculationModeCubic      = 3 << 10,UIViewKeyframeAnimationOptionCalculationModeCubicPaced = 4 << 10

 

The following figure makes it easier to understand:

 

 

 

Summary:

There are many ways to implement animation in UIView. You can discard simple animation effects at will. You can use the KeyFrame method for complex animation effects.

You need to determine which one to choose based on the product requirements.

 

 

References:

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

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

 

 

Blog Author: GarveyCalvin

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

The copyright of this article is shared by the author and the blog. You are welcome to repost it, but you must keep this statement and provide the original article link. Thank you for your cooperation!