CoreAnimation (2) from the perspective of UIKit, coreanimationuikit

CoreAnimation (2) from the perspective of UIKit, coreanimationuikit

Original Blog, reprinted, please indicate the source

Blog.csdn.net/hello_hwc

UIKit is on the Cocoa Touch layer, and its underlying layer is still implemented through Core Animation. Therefore, I put all the Animation explanations to CoreAnimation,

Generally, simple animations can be implemented using UIKit. Of course, layers can be used to implement more complex animations. If you are not familiar with Layer, you can refer to my previous article.

What will be described in this article:

1 can be used as an attribute of Animation

2. Use the block-based method to implement animation

3. Use the Begin/Commit Method for animation.

4. animations for switching between views

More than 5 animations form a complex animation.

6. View and Layer animation combination

I will write a Demo, which is based on a tabbarViewController. Two animations are displayed in each part. The download link is appended to the end. Start text below

The Demo link of the video (to prevent gif from being moved)

Http://v.youku.com/v_show/id_XODgzNDU3MDI0.html

1. It can be used as an attribute of Animation.

From the perspective of UIKit, animation is implemented by changing the attributes of UIView. The following attributes can be changed:

Frame	Determine the position and size of the view in the superview. Note that if the View attribute transform is not constant, use bounds and center to modify the position and size. (In fact, the frame location and size are not modified directly)
Bounds	Determine the view Size
Center	Determine the center of the view in the superview
Transform	The CALayer Animation is used for 2D scale, rotate, and translate 3D transformations.
Alpha	Transparency
BackgroundColor	Background Color
ContentStretch	Modify View stretch to fill available space

2. Block-Based Method

There are three main types of methods, which are animated on another thread and will not group the main thread of the competition.

animateWithDuration:animationsanimateWithDuration:animations:completion:animateWithDuration:delay:options:animations:completion

The following describes the parameters:

[UIView animateWithDuration: // animation duration delay: // how long the animation is delayed execute options: // execution options: for example, the animation process description, whether the animation process allows interaction, etc, for more information, see animations: ^ {// block of the animation executed} completion: ^ (BOOL finished) {// block after the animation ends}];

Define an animation to move the imageview to the center, multiply it to the previous two times, and change the transparency to 0.5.

The effect is as follows: gif.

Implementation code,

CGPoint oldCenter = self. imageivew. center; CGAffineTransform oldtransform = self. imageivew. transform; CGFloat oldAlpha = self. imageivew. alpha; [UIView animateWithDuration: 2.0 // animation duration delay: 0.0 // how long the animation is delayed execute options, whether the animation process allows interaction among others. For more information, see the animation block self. imageivew. center = self. view. center; self. imageivew. transform = CGAffineTransformConcat (CGAffineTransformMakeRotation (M_PI), CGAffineTransformMakeScale (2.0, 2.0); self. imageivew. alpha = 0.5;} completion: ^ (BOOL finished) {// block self after the animation ends. imageivew. center = oldCenter; self. imageivew. transform = oldtransform; self. imageivew. alpha = oldAlpha;}];

Method 3 based on Begin/commit

It is also configured by the class method of UIView. The animation is executed on another thread and does not block the main thread.

Several Methods

SetAnimationStartDate: SetAnimationDelay:	Configure the animation start time
SetAnimationDuration:	Execution time
SetAnimationCurve:	Acceleration and deceleration of animation execution
SetAnimationRepeatCount: SetAnimationRepeatAutoreverses:	Set the number of repeat times and whether to automatically return
SetAnimationDelegate: SetAnimationWillStartSelector: SetAnimationDidStopSelector:	Use a proxy or Selector to listen to the animation start and end events.

Example

The effect is similar to the previous one, but this time it will reverse return and execute 1.5 times

Note: I listed the usage of most methods here. Normally, you do not need to configure so many methods.

Implementation Code

-(IBAction) animate2 :( id) sender {[UIView beginAnimations: @ "Animate 2" context: nil]; // configure the animation execution attribute [UIView setAnimationDelay: 0.5]; // delay time [UIView setAnimationDelegate: self]; [UIView setAnimationWillStartSelector: @ selector (willStart)]; // listen for the start event [UIView setAnimationDidStopSelector: @ selector (didStop)]; // listen to the end event [UIView setAnimationDuration: 2.0]; // execution time [UIView setAnimationRepeatAutoreverses: YES]; // automatically restore [UIView setAnimationRepeatCount: 1.5]; // repeat Times [UIView setAnimationCurve: UIViewAnimationCurveEaseInOut]; // the accelerated process (acceleration starts and stops) [UIView setAnimationBeginsFromCurrentState: YES]; // whether the animation is executed from the current animation state (when the last animation processing of the same control is not completed, this animation is about to begin) // The animation self actually executed. imageivew. center = self. view. center; self. imageivew. transform = CGAffineTransformConcat (CGAffineTransformMakeRotation (M_PI), CGAffineTransformMakeScale (2.0, 2.0); self. imageivew. alpha = 0.5; // submit the animation [UIView commitAnimations];}-(void) willStart {NSLog (@ "will start");} // This is a problem-(void) didStop {NSLog (@ "did stop ");}

Animation for switching between four Views

For example, when adding or deleting a subview, for example, hiding a subview from another display, adding a switching animation can prevent abrupt changes, resulting in user confusion.

Generally, when switching between views, you only need to change hidden, remove, or add. The advantage is that the system takes snapshots to generate a bitmap, which consumes less resources. If you want to add other animations at the same time, add UIViewAnimationOptionAllowAnimatedContent to the options of the function.

4.1 change the subview of a View

You can use either block or begin/commit. The Demo implements two different animations. We can see the differences between the containView and the animation.

Animation 1

Switch Using Flip

Effect

Implementation Code

    [UIView beginAnimations:@"AnimateInContainView" context:nil];    [UIView setAnimationTransition:UIViewAnimationTransitionFlipFromLeft forView:self.containVIew cache:YES];    [UIView setAnimationDuration:1.0];    self.firstImageView.hidden = !self.firstImageView.hidden;    self.secondImageView.hidden = !self.secondImageView.hidden;

Animation 2 Effect

Implement with the page flip Effect

Implementation Code

    [UIView transitionWithView:self.view                      duration:1.0                       options:UIViewAnimationOptionTransitionCurlUp                    animations:^{                        self.firstImageView.hidden = !self.firstImageView.hidden;                        self.secondImageView.hidden = !self.secondImageView.hidden;                    }                    completion:^(BOOL finished) {                                            }];

4.2 replace a View with a new view transitionFromView: toView: duration: options: completion:

This function replaces FrameView with toView, and FromView is deleted. If you only want to hide the function, you must add UIViewAnimationOptionShowHideTransitionViews to options.

Effect:

If the first imageView exists, replace it with the second image, and vice versa.

Code:

 [UIView transitionFromView:(self.isFirstViewSHowing ? self.firstView : self.secondView)                        toView:(self.isFirstViewSHowing ? self.secondView : self.firstView)                      duration:1.0                       options:(self.isFirstViewSHowing ? UIViewAnimationOptionTransitionFlipFromRight :                                UIViewAnimationOptionTransitionFlipFromLeft)                    completion:^(BOOL finished) {                        if (finished) {                            self.isFirstViewSHowing = !self.isFirstViewSHowing;                        }                    }];

Five animation combinations

Whether it is block or begin/commit, you can listen to the animation ending events. When another animation starts in an animation ending event, the animations are combined.

Effect

Initial State: reduced to 0.2 times before, completely transparent

Animation 1: Restore normal size to Opacity

Animation 2: latency of 2 s, and then remove the view from left to right

Animation

 [self.view addSubview:self.firstView];    self.firstView.center = self.view.center;    self.firstView.transform = CGAffineTransformMakeScale(0.2,0.2);    self.firstView.alpha = 0.0;    self.animation6button.enabled = NO;    [UIView animateWithDuration:1.0                     animations:^{                         self.firstView.transform = CGAffineTransformMakeScale(1.0, 1.0);                         self.firstView.alpha = 1.0;                     }                     completion:^(BOOL finished) {                         if (finished) {                             [UIView animateWithDuration:1.0                                                   delay:2.0                                                 options:UIViewAnimationOptionCurveEaseIn                                              animations:^{                                                  self.firstView.center = CGPointMake(self.firstView.center.x + CGRectGetWidth(self.view.frame), self.firstView.center.y);                                              }                                              completion:^(BOOL finished) {                                                  [self.firstView removeFromSuperview];                                                  self.animation6button.enabled = YES;                                              }];                         }                     }];

Coordinate with CALayer Animation

From the perspective of UIkit and Layer, the underlying Layer is implemented by Core Animation. Therefore, as long as two animations are submitted almost simultaneously, the Animation process is executed simultaneously.

Effect

Animation 1: Perform 3D Rotation at the layer angle, and change the transparency to 0.2 at the view angle.

Animation 2: Use pagination to delete the ImageView

Code

    [self.view addSubview:self.secondView];    self.secondView.center = self.view.center;    CABasicAnimation* layerAnimation = [CABasicAnimation animationWithKeyPath:@"transform"];    layerAnimation.duration = 2.0;    layerAnimation.timingFunction = [CAMediaTimingFunction                                     functionWithName:kCAMediaTimingFunctionLinear];    layerAnimation.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI,1,1,1)];    layerAnimation.removedOnCompletion = NO;    layerAnimation.fillMode = kCAFillModeForwards;    [self.secondView.layer addAnimation:layerAnimation forKey:@"layerAnimation"];    [UIView animateWithDuration:2.0 animations:^{        self.secondView.alpha = 0.2;    } completion:^(BOOL finished) {        [UIView transitionFromView:self.secondView                            toView:nil                          duration:1.0                           options:UIViewAnimationOptionTransitionCurlUp                        completion:^(BOOL finished) {                            self.secondView = nil;                        }];    }];

Finally, the download link of the Demo is attached.

Download CSDN:

Http://download.csdn.net/detail/hello_hwc/8412927