IOS animation technology notes

Overview
In IOS development, there are many animation operations, typically when the view controller operates on the seue. In the same view controller class, when loading and switching different views, animation effects are also required, and some view objects have better animation effects.

In the IOS development process, I feel like a director is working, arranging different sets, and switching between different pictures. The application has a smooth screen, which will increase the color.

When you create a view and View Controller on the storyboard, some animation settings are available. But from the code point of view, we still need to understand the implementation process of this animation setting.

The animation uses CATransition when switching between different view controllers, such as presentViewController or popViewController.

CATransition is actually implemented based on layer. It is used to switch between different views, but it has limited effect. For example, the two view controllers cannot be used to display an animation in a windows view. I want to use panGestureController to implement the view animation display effect from two view controllers. This is a pity.

You can use the beginAnimations: nil or animateWithDuration: animations: completion: method to implement animation switching between different views on the same view controller.

Animation implementation is to modify some attributes of the view to repeatedly or gradually complete these modifications at the set time to achieve the animation display effect.

These attributes are as follows:

1. frame, bounds, center // change the frame attribute of the View

2. alpha // change transparency

3. backgroundColor // change the background color

4. contentStretch // tensile Variation

5. transform //, including Rotate, Invert, Translate, and Scale (rotation, reversal, displacement, scaling)

A normal animation is 30 frames per second, and the naked eye can recognize 24 frames per second, while a game requires 60 frames per second.

These views modify these attributes based on time functions such as slow-in and slow-out within the set time. Change once to one, and the cycle starts again. In our eyes, this is a continuous action, that is, an animation.

When it comes to the properties of UIView, we can't leave it alone. UIView is actually composed of layers. These attributes of UIView, such as bounds, are all from CALayer objects.

On the view layer, you can add the CAAnimation object to achieve the animation effect of the view. CAAnimation is an abstract class whose entity classes include CABasicAnimation and CAKeyframeAnimation.

Add the definition of the CABasicAnimation or CAKeyframeAnimation object to the UIView. layer to achieve the animation effect. Note: After the animation is completed, the attribute definition of the layer is restored to the initial value. If you want to save the animation results, you need to set the Conventions when adding the animation to the layer.

For example, add a UIImage object to a view, declare a CALayer layer object, set contents of the layer to CGImage of the UIImage object, and then process the layer object.

First, declare the keyPath of the scaleAnimation object of a CABasicAnimation to transform. scale.

CABasicAnimation * scaleAnimation = [CABasicAnimationanimationWithKeyPath: @ "transform. scale"];

Then, set the value of keyPath, animation execution time, and animation execution time function. If you need to save the results after the animation ends, you need to implement it in the delegate method-(void) animationDidStop :( CAAnimation *) theAnimation finished :( BOOL) flag.

ScaleAnimation. toValue = scaleFactor;

ScaleAnimation. duration = 3.0f;

ScaleAnimation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

Finally, add the scaleAnimation object of CABasicAnimation to the layer. The rest will be implemented by IOS, and the code will be in this step.

[Self. view. layeraddSublayer: logoLayer];

The detailed code is as follows:

-(Void) viewDidLoad {

[Super viewDidLoad];

Self. view. backgroundColor = [UIColor blackColor];

Self. title = [[self class] displayName];

UIImage * image = [UIImageimageNamed: @ "batman.png"];

LogoLayer = [CALayer layer];

LogoLayer. bounds = CGRectMake (0, 0, image. size. width, image. size. height );

LogoLayer. position = CGPointMake (160,180 );

LogoLayer. contents = (id) image. CGImage;

// Add layer as a sublayerof the UIView's layer

[Self. view. layeraddSublayer: logoLayer];

}

 

-(Void) scaleByFactor :( CGFloat) factor {

CABasicAnimation * scaleAnimation = [CABasicAnimationanimationWithKeyPath: @ "transform. scale"];

NSNumber * scaleFactor = [NSNumber numberWithFloat: factor];

ScaleAnimation. toValue = scaleFactor;

ScaleAnimation. duration = 3.0f;

ScaleAnimation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

// Set the model layer 'sproperty so the animation sticks at the 'tovalue' state

[LogoLayer addAnimation: scaleAnimationforKey: @ "transformAnimation"];

}

The animation effect is only for a view object. If multiple views need to be operated at the same time, you need to implement animation interaction, that is, CAAnimationGroup. Add multiple CABasicAnimation objects to an array, set the array to the CAAnimationGroup object, and add the CAAnimationGroup object to the animation attribute of the layer.

CAAnimationGroup * animationGroup = [CAAnimationGroup animation];

AnimationGroup. duration = 2.0f;

AnimationGroup. autoreverses = YES;

AnimationGroup. repeatCount = HUGE_VALF;

[AnimationGroupsetAnimations: [NSArray arrayWithObjects: rotationAnimation, scaleAnimation, nil];

 

[LogoLayeraddAnimation: animationGroup forKey: @ "animationGroup"];

If you need more elaborate settings on the layer, You need to scale on CALayer to form various subclasses.

The sub-classes of CALayer include:

1) CAScrollLayer, used to simplify part of the display Layer

2) CATextLayer: The content generated from the string is the text layer.

3) eagledlayer, used to display Complex Images

4) CAOpenGLLayer, which provides the OpenGLES rendering environment

CALayer can make many settings for UIView, such as shadow, border, rounded corner, and transparent effect, and these settings are very useful. Its important attributes are as follows.

1. shadowPath: Set the location of the CALayer background (shodow)

2. shadowOffset: the direction of shadow extending on the X and Y axes, that is, the size of shadow.

3. shadowOpacity: transparent shadow effect

4. shadowRadius: gradient distance of shadow. The shadowRadius distance is gradient from the periphery to the inside.

5. masksToBounds: a very important attribute. This attribute can be used to prevent child element size overflow from parent element. If this attribute is used to prevent overflow, set it to true.

6. borderWidth and boarderColor: border color and width.

7. bounds

8. opacity: transparent effect of UIView

9. cornerRadius: corner of UIView

These attributes are similar to the properties of UIView, which cannot be achieved by UIView.

In fact, I think the components declared in UIKIT, such as UITextfield, uilable, and uibutton, are actually extensions of UIView, which are encapsulated for ease of use.

Summary
In IOS, the animation effect starts from the layer and adds a CABasicAnimation object to the layer. In fact, the layer has a predefined function. This function is executed after the viewDidAppear view.

It may be because CABasicAnimation is a little complicated. IOS encapsulates a CATransition class, which has limited functions and some basic animation operations, such

It may be from a convenient point of view that IOS can do the UIView again, with beginAnimations: nil or animateWithDuration: animations: completion: and other methods, you can more easily achieve some animation effects.

However, to implement complex and more attractive animations, you still need to work on CALayer.