Introduction: In the development of APP, we will often use the animation effect. Using animation can make our APP cooler and more glamorous. The most important thing is to optimize user experience, but it depends on the quality of animation. Like QQ, wechat, Sina Weibo and other apps, the animation effect is very good, at least I like their animation, let me use the feeling is very smooth, the mood is very cheerful. This article will introduce the implementation method of UIView effect, non-core animation.

First, use THE UIView class for animation

In basic form, the code must be placed between Begin and Commit:

[UIView beginAnimations:nil context:nil]; // start animation // Code... [UIView commitAnimations]; // Submit the animationCopy the code

A simple example:

[UIView beginAnimations:nil context:nil]; / / animation [UIView setAnimationDuration: 10.0]; CGPoint point = _imageView.center; point.y += 150; [_imageView setCenter:point]; [UIView commitAnimations]; // Submit the animationCopy the code

Run multiple animation effects simultaneously:

[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];Copy the code

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

1. The image was shifted down 150 images

2. Set the image transparency to 0.

Ps. Welcome to the iOS Technology Exchange

Specify context:

CGContextRef context = UIGraphicsGetCurrentContext(); [UIView beginAnimations:nil context:context]; [UIView setAnimationDuration: 2.0]; [_imageView setAlpha:0]; [UIView commitAnimations];Copy the code

UIGraphicsGetCurrentContext () : access to the context of the current view

Other methods and properties:

The following methods and attributes are not all, only some examples (other methods and attributes not mentioned please try by yourself, thank you) :

// beginAnimations + (void)beginAnimations:(NSString *)animationID context:(void *)context; // commitAnimations + (void)commitAnimations; + (void)setAnimationCurve:(UIViewAnimationCurve)curve; + (void)setAnimationDuration:(NSTimeInterval)duration; // The default is YES. When it is NO, skip the animation effect and jump directly to the post-execution state. + (void)setAnimationsEnabled:(BOOL)enabled; // setAnimationDelay (delay: seconds) : + (void)setAnimationDelay:(NSTimeInterval)delay; + (void)setAnimationRepeatCount:(float)repeatCount; // If YES, reverse the animation effect and return to the state before the animation reverse; The default is NO: + (void) setAnimationRepeatAutoreverses (BOOL) repeatAutoreverses; SetAnimationDelegate: + (void)setAnimationDelegate:(id)delegate; / / the animation will start execution method of xx (agents) must be set first animation: + (void) setAnimationWillStartSelector: (SEL) the selector; / / animation has been at the end of the execution method of xx (agents) must be set first animation: + (void) setAnimationDidStopSelector: (SEL) the selector; @param Cache if YES, the start and end views are rendered once and frames are created in the animation; Otherwise, the view will render each frame. For example, you don't need to keep updating during a view transformation, you just need to wait until the transformation is complete to update the view. */ + (void)setAnimationTransition:(UIViewAnimationTransition)transition forView:(UIView *)view cache:(BOOL)cache; Layer removeAllAnimations [_imageView.layer removeAllAnimations]; - (void)removeAllAnimations;Copy the code

Use UIView animation block code:

Method one:

[UIView animateWithDuration:4.0 // Animations :^{// code}];Copy the code

Method 2:

[UIView animateWithDuration:4.0 // Animations :^{// code...} completion:^(BOOL finished) { }];Copy the code

Method 3:

[UIView animateWithDuration: 4.0 / / the animation time delay: 2.0 / / animation delay options: UIViewAnimationOptionCurveEaseIn / / animation transition effects Animations :^{// code...} completion:^(BOOL finished) {// Completed animations // code...}];Copy the code

Method 4: Spring Animationring Animation

Since IOS7, Spring Animation has been widely used for system Animation effects:

[UIView animateWithDuration: 4.0 / / the animation time delay: 0.0 / / animation delay usingSpringWithDamping: 1.0 / / similar to the spring vibration effect 0 ~ 1 InitialSpringVelocity: 5.0 / / velocity options: UIViewAnimationOptionCurveEaseInOut / / animation transition effects animations: ^ {/ / code... CGPoint  point = _imageView.center; point.y += 150; [_imageView setCenter:point]; } completion:^(BOOL finished) {// Code... [_imageView setAlpha:1];}];Copy the code

UsingSpringWithDamping: its range is 0.0f to 1.0f, and the smaller the value is, the more obvious the vibration effect of “spring” will be.

InitialSpringVelocity: The initial velocity, the higher the value, the faster the initial move. It is worth noting that when the initial speed is high and the time is short, there will also be a rebound.

Spring Animation is an ideal alternative to linear or ease-out Animation. Since Spring Animation is widely used in iOS, users are used to this Animation effect, so using it makes the App feel more natural, "INSTANTLY familiar" in Apple's words. In addition, Spring Animation is not limited to locations; it applies to all properties that can be animated.Copy the code

Method 5, keyframe animation:

UIView animations already have advanced ways to create animations and better understand and build animations. IOS7 later added a new apple animateKeyframesWithDuration method, we can use it to create more complex more cool animation effects, and don't need to use to the core animation (CoreAnimatino).Copy the code

Create keyframe method:

/** * Add keyframe method ** @param Duration animation duration * @param Delay animation delay * @param Options Animation effects options * @param Animations execute code * @param Completion is end of the animation to execute code * / + (void) animateKeyframesWithDuration: (NSTimeInterval) duration delay: (NSTimeInterval) delay options:(UIViewKeyframeAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;Copy the code

Add keyframe method:

/** * Add keyframes ** @param frameStartTime animation relative start time * @param FramedDuration animation relative duration * @Param Animations execution code */ + (void)addKeyframeWithRelativeStartTime:(double)frameStartTime relativeDuration:(double)frameDuration animations:(void (^)(void))animations;Copy the code

By relative time, I mean, “they automatically match their running time to the total duration of the animation.”

Here is a simple example of a rainbow change view:

Void (^keyFrameBlock)() = ^(){NSArray *arrayColors = @[[UIColor orangeColor], [UIColor yellowColor], [UIColor greenColor], [UIColor blueColor], [UIColor purpleColor], [UIColor redColor]]; NSUInteger colorCount = [arrayColors count]; For (NSUInteger I = 0; i < colorCount; i++) { [UIView addKeyframeWithRelativeStartTime:i / (CGFloat)colorCount relativeDuration:1 / (CGFloat)colorCount animations:^{ [_graduallyView setBackgroundColor:arrayColors[i]]; }]; }}; [UIView animateKeyframesWithDuration: delay 4.0:0.0 options: UIViewKeyframeAnimationOptionCalculationModeCubic | UIViewAnimationOptionCurveLinear animations: keyFrameBlock completion: ^ (BOOL finished) {/ / animation after the completion of the execution / / code...}];Copy the code

Animation Transition effects (Options), added the following:

UIViewKeyframeAnimationOptionCalculationModeLinear     = 0 << 10, // default
UIViewKeyframeAnimationOptionCalculationModeDiscrete   = 1 << 10,
UIViewKeyframeAnimationOptionCalculationModePaced      = 2 << 10,
UIViewKeyframeAnimationOptionCalculationModeCubic      = 3 << 10,
UIViewKeyframeAnimationOptionCalculationModeCubicPaced = 4 << 10
Copy the code

Let’s look at a picture to make it easier to understand:

Summary:

UIView can animate in a number of ways, depending on what method you use. Which method to choose depends on your product requirements.