Summary of UIView animation and summary of uiview Animation

Summary of UIView animation and summary of uiview Animation

My blog has been in service for five months but has never been written. I dare not write, and I do not know what to write. After all, I am a rookie who has just been in the industry for six months. Now I want to improve myself through various methods. I used some things before, but I understood a little bit at that time, and I didn't summarize it. After a while, you have to learn to use it again. So now I want to write my summary through the blog. This is my first blog post. if conditions permit, I will record more learning experiences. It would be a great pleasure to help new users like me. When the experts pass by, if there is something wrong, point it out. Don't try it if you don't like it. Thank you.

A few days ago, during development, the product manager proposed to add a small animation effect. Since I have never touched any Animation before, I can only read some blogs about Animation with my scalp. I found that many blogs talk about Core Animation. But I always feel that this kind of animation is very troublesome (I will have a chance to learn it later ). We also found that there is another kind of animation, which is more popular: UIView animation. This kind of animation can basically meet most of the basic animation needs.

The following is a brief introduction:

UIView animation can be divided into two types:

1. implement animation through the UIView class

1 [UIView beginAnimations: nil context: nil]; // start Animation 2 [UIView setAnimationDuration: 10.0]; // animation Duration 3 // Code... 4 [UIView commitAnimations]; // submit an animation

Write all the animation requirements in the middle. For example

[UIView beginAnimations:nil context:nil];[UIView setAnimationDuration:3.0];[_imageView setAlpha:0.0];CGPoint point = _imageView.center;point.y += 150;[_imageView setCenter:point];[UIView commitAnimations];

Simple list of methods and attributes

// 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;

 

2. implemented through the animated block of UIView, I personally feel that this is more convenient to use than the above.

The following is a brief introduction. In fact, if you type [UIView animation...] In xcode, you will be prompted for these methods. If you can try each method by yourself.

[UIView animateWithDuration: 4.0 // animation duration animations: ^ {// code animation to be executed}]; [UIView animateWithDuration: 4.0 // animation duration animations: ^ {// code... animation to be executed} completion: ^ (BOOL finished) {// After the animation is completed, execute // code...}]; [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...}];

Spring Animation, an Animation with an elastic effect

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];}];

• Duration: animation duration
• Delay: determines how long the animation will be executed after the delay
• Options: used to determine how an animation is displayed.
• Animations: Code converted into an animated Representation
• Completion: the code block executed after the animation ends.

 

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.

 

3. 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 ).

/*** 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; /*** 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;

For example:

-(Void) setkeyanimation {/* Key Frame Animation options: */[UIView animateKeyframesWithDuration: 5.0 delay: 0 options: uiviewanimation optioncurvelinear | UIViewAnimationOptionCurveLinear animations: ^ {// second key frame (accurately speaking, the first key frame is the start position): it lasts for 50% seconds, that is, 5.0*0.5 = 2.5 seconds [UIView addKeyframeWithRelativeStartTime: 0.0 relativeDuration: 0.5 animations: ^ {self. view1.center = CGPointMake (80.0, 220.0) ;}]; // The third key frame, starting from 0.5*5.0 seconds, lasting for 5.0*0.25 = 1.25 seconds [UIView addKeyframeWithRelativeStartTime: 0.5 relativeDuration: 0.25 animations: ^ {self. view1.center = CGPointMake (45.0, 300.0) ;}]; // fourth key frame: Starting from 0.75*5.0 seconds, holding the required 5.0*0.25 = 1.25 seconds [UIView addKeyframeWithRelativeStartTime: 0.75 relativeDuration: 0.25 animations: ^ {self. view1.center = CGPointMake (55.0, 400.0) ;}];} completion: ^ (BOOL finished) {NSLog (@ "Animation end. ") ;}] ;}

In the above Code, in the method of adding a key frame, the time is calculated based on the ratio of the total time (5.0 s). At that time, it was a bit difficult,

 

 

Animation attributes

Now you can make simple animations, but remember that not all attributes modification operations are placed inanimationsCode blocks are all animated-no matter how you modify a viewtag, Ordelegate. Therefore, animation attributes can be implemented, which will inevitably lead to re-rendering of views.
These attributes that can generate an animation can be roughly divided into three types:Coordinate size,View display,Morphological changes

Coordinate dimensions

• Bounds: When you modify this attributecenterAttribute re-calculationframe. We recommend that you use this attribute to modify the size.
• Frame: modifying this attribute will usually cause the view to be moved while deformation occurs, and then reset it.centerAndboundsAttribute
• Center: After setting, the view is moved to a new location.boundsRecalculateframe

Morphological changes

• Transform: This attribute can be modified to achieve rotation, deformation, movement, flip, and other animation effects. It is implemented through matrix operations, so it is more powerful.

View display class

• BackgroundColor: modifying this attribute will produce the effect of color gradient transition. Essentially, the system constantly modifies tintColor to implement this function.
• Alpha: modifying this attribute will produce a fade-in and fade-out effect.
• Hidden: you can modify this attribute to hide pages.

 

 

There is an option parameter in the animation method, the UIViewAnimationOptions type, which is an enumeration type. There are three types of animation parameters that can be used in combination.

1. Set general animation attributes (you can select multiple attributes at the same time)
 
UIViewAnimationOptionLayoutSubviews: ensure that the child view follows the motion during the animation process.
 
UIViewAnimationOptionAllowUserInteraction: Allows user interaction during the animation process.
 
UIViewAnimationOptionBeginFromCurrentState: all views run from the current state.
 
UIViewAnimationOptionRepeat: re-run the animation.
 
UIViewAnimationOptionAutoreverse: After the animation is run to the end point, it is still returned to the initial point as an animation.
 
UIViewAnimationOptionOverrideInheritedDuration: Ignore nested animation time settings.
 
UIViewAnimationOptionOverrideInheritedCurve: Ignore nested animation speed settings.
 
UIViewAnimationOptionAllowAnimatedContent: redraws the view during the animation process (note that it is only applicable to transition animation ).
 
UIViewAnimationOptionShowHideTransitionViews: the old view and new view are directly hidden when the view is switched, instead of removing the old view from the parent view (only applicable to transition animation)

UIViewAnimationOptionOverrideInheritedOptions: does not inherit the parent animation setting or animation type.
 
2. animation Speed Control (you can select a setting from it)
 
UIViewAnimationOptionCurveEaseInOut: the animation is slow and then accelerated.
 
UIViewAnimationOptionCurveEaseIn: the animation slows down.
 
UIViewAnimationOptionCurveEaseOut: the animation is accelerating.
 
UIViewAnimationOptionCurveLinear: the animation is executed at a constant speed. The default value is.
 
3. Transfer Type (only applicable to transfer animation settings. You can select one of them for setting. Basic animation and Key Frame Animation do not need to be set)
 
UIViewAnimationOptionTransitionNone: no transition animation effect.
 
UIViewAnimationOptionTransitionFlipFromLeft: flipped from the left.
 
UIViewAnimationOptionTransitionFlipFromRight: flipped from the right side.
 
UIViewAnimationOptionTransitionCurlUp: The Animated transition effect for backward paging.
 
UIViewAnimationOptionTransitionCurlDown: transition effect of the animation to the previous page flip.
 
UIViewAnimationOptionTransitionCrossDissolve: the old view disappears and shows the effect of the next new view.
 
UIViewAnimationOptionTransitionFlipFromTop: flipped from the top.
 
UIViewAnimationOptionTransitionFlipFromBottom: The result is flipped from the bottom.

 

In the end, I found that the animation effect of window's Ali trademanager login printer was quite interesting. I could just give it a try.

-(Void) createUI {UIImageView * backimageView = [[UIImageView alloc] init]; backimageView. image = [UIImage imageNamed: @ "1.png"]; backimageView. frame = CGRectMake (50,100, LBSCREEN_WIDTH-100, 30); [self. view addSubview: backimageView]; backView = [[UIView alloc] initWithFrame: CGRectMake (60,115, LBSCREEN_WIDTH-120, 0)]; backView. layer. cornerRadius = 5; backView. backgroundColor = [UIColor whiteColor]; backView. layer. borderWidth = 1; backView. layer. borderColor = [UIColor blackColor]. CGColor; backView. clipsToBounds = YES; [self. view addSubview: backView]; login_btn = [UIButton buttonWithType: Variable]; Parameters = CGRectMake (10,120, LBSCREEN_WIDTH-140, 35); [login_btn setTitle: @ "login" forState: UIControlStateNormal]; login_btn.backgroundColor = [UIColor lightGrayColor]; login_btn.layer.cornerRadius = 5; login_btn.layer.borderWidth = 1; background = [UIColor lightGrayColor]. CGColor; [login_btn addTarget: self action: @ selector (passwordClick :) forControlEvents: Inputs]; Parameters = YES; pass_btn = [UIButton buttonWithType: Inputs]; Parameters = CGRectMake (10,165, LBSCREEN_WIDTH-140, 35); [pass_btn setTitle: @ "register" forState: UIControlStateNormal]; Parameters = [UIColor redColor]; [pass_btn addTarget: self action: @ selector (passwordClick :) forControlEvents: UIControlEventTouchUpInside] pass_btn.layer.cornerRadius = 5; pass_btn.layer.borderWidth = 1; pass_btn.layer.borderColor = [UIColor lightGrayColor]. CGColor; Parameters = YES; Name_textfield = [[UITextField alloc] initWithFrame: CGRectMake (10, 20, LBSCREEN_WIDTH-140, 40)]; Name_textfield.placeholder = @ "Account"; Name_textfield.borderStyle = parameters; pass_textfield = [[UITextField alloc] initWithFrame: CGRectMake (10, 70, LBSCREEN_WIDTH-140, 40)]; Pass_textfield.borderStyle = signature; Pass_textfield.placeholder = @ "password "; // an animation that lasts for one minute starts after 2 seconds. [UIView animateWithDuration: 1 delay: 2 options: UIViewAnimationOptionBeginFromCurrentState animations: ^ {backView. frame = CGRectMake (60,115, LBSCREEN_WIDTH-120, 210);} completion: ^ (BOOL finished) {[backView addSubview: Name_textfield]; dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.3 * NSEC_PER_SEC), round (), ^ {[backView addSubview: Pass_textfield]; dispatch_after (dispatch_time (interval, (int64_t) (0.3 * NSEC_PER_SEC), round (), ^ {[backView addSubview: login_btn]; dispatch_after (dispatch_time (DISPATCH_TIME_NOW, (int64_t) (0.3 * NSEC_PER_SEC), interval (), ^ {[backView addSubview: pass_btn] ;};}) ;}) ;}];

 

Animation effect:

 

 

 

 

This is a summary of the UIView animation for the time being. I feel that this can be used to cope with simple animation needs in the project for the time being. I need to study it further in the future.

Again, I am still a cainiao. The main purpose of this article is to record my summary. Don't like it, don't spray it!