Core Animation-CABasicAnimation, cabasicanimation

Core Animation-CABasicAnimation, cabasicanimation

In iOS, graphics can be divided into the following layers:

The higher the upper layer, the higher the encapsulation level, the simpler the animation implementation, but the lower the degree of freedom. The opposite is also true. This article focuses on the basic Animation implementation scheme of the Core Animation layer.

In iOS, an animation is similar to a movie in life ". There are three major factors for film production: Actors, scripts, and shooting. The concept analogy is as follows:

Actors ---> CALayer, who is the main character of a movie? The Script ---> CAAnimation, specifies how the movie should be played, how it should be taken, and how to change it ---> AddAnimation, and starts execution.

I. Introduction to concepts

What is 1.1CALayer?

CALayer is a concept similar to UIView. It also has layer, sublayer ..., similar attributes such as backgroundColor and frame are also available. We can regard UIView as a special CALayer, but UIView can only respond to events. In general, a layer can be used in two ways. The two do not conflict with each other. First, you can set view-related attributes, including parameters such as rounded corners, shadows, and borders. For more detailed parameters, click here; the second is animation control of the view. Therefore, the core animation of a view is essentially an animation of the view. layer.

What is 1.2CAAnimation?

CAAnimation can be divided into four types:

• 1. CABasicAnimation
• By setting the start point, end point, time, the animation will move along your set point. It can be seen as a special CAKeyFrameAnimation
• 2. CAKeyframeAnimation
• As the name implies, Keyframe is the frame of the key point. You can set the frame, time, and animation of the starting point, intermediate key point, and ending point of CALayer to move along the trajectory you set.
• 3. CAAnimationGroup
• Group is the combination of all the animations of the Layer. PS: A layer has a lot of animations, and they all execute them at the same time. I will talk about how to execute them in order.
• 4. CATransition
• This is some of the animations encapsulated by Apple for developers.

2. Work hard

The following example shows how to use it:

For example, we want to implement a scaling animation similar to heartbeat, which can be divided into three steps: Actor initialization, script setting, and movie start:

-(Void) initScaleLayer {// actor initializes CALayer * scaleLayer = [[CALayer alloc] init]; scaleLayer. backgroundColor = [UIColor blueColor]. CGColor; scaleLayer. frame = CGRectMake (60, 20 + kYOffset, 50, 50); scaleLayer. cornerRadius = 10; [self. view. layer addSublayer: scaleLayer]; [scaleLayer release]; // set the script CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath: @ "transform. scale "]; scaleAnimation. fromValue = [NSNumber numberWithFloat: 1.0]; scaleAnimation. toValue = [NSNumber numberWithFloat: 1.5]; scaleAnimation. autoreverses = YES; scaleAnimation. fillMode = kCAFillModeForwards; scaleAnimation. repeatCount = MAXFLOAT; scaleAnimation. duration = 0.8; // run [scaleLayer addAnimation: scaleAnimation forKey: @ "scaleAnimation"];}

 

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view from its nib.    [self initScaleLayer];}

　　

For more information about the effect, see the green box in the figure (I don't know how to record gif images on mac, And I will borrow the kk diagram first ). Other effects can be easily implemented based on Huludao. The key to achieving different effects lies in the keyPath setting in the initialization method of the CABasicAnimation object. There are several different keypaths in iOS, which represent different effects:

In addition, we can also use GroupAnimation to achieve a combination of multiple animations. All animation types in GroupAnimation are simultaneously executed.

-(Void) initGroupLayer {// actor initializes CALayer * groupLayer = [[CALayer alloc] init]; groupLayer. frame = CGRectMake (60,340 + 100 + kYOffset, 50, 50); groupLayer. cornerRadius = 10; groupLayer. backgroundColor = [[UIColor purpleColor] CGColor]; [self. view. layer addSublayer: groupLayer]; [groupLayer release]; // set the script CABasicAnimation * scaleAnimation = [CABasicAnimation animationWithKeyPath: @ "transform. scale "]; scaleAnimation. fromValue = [NSNumber numberWithFloat: 1.0]; scaleAnimation. toValue = [NSNumber numberWithFloat: 1.5]; scaleAnimation. autoreverses = YES; scaleAnimation. repeatCount = MAXFLOAT; scaleAnimation. duration = 0.8; CABasicAnimation * moveAnimation = [CABasicAnimation animationWithKeyPath: @ "position"]; moveAnimation. fromValue = [NSValue valueWithCGPoint: groupLayer. position]; moveAnimation. toValue = [NSValue valueWithCGPoint: CGPointMake (320-80, groupLayer. position. y)]; moveAnimation. autoreverses = YES; moveAnimation. repeatCount = MAXFLOAT; moveAnimation. duration = 2; CABasicAnimation * rotateAnimation = [CABasicAnimation animationWithKeyPath: @ "transform. rotation. x "]; rotateAnimation. fromValue = [NSNumber numberWithFloat: 0.0]; rotateAnimation. toValue = [NSNumber numberWithFloat: 6.0 * M_PI]; rotateAnimation. autoreverses = YES; rotateAnimation. repeatCount = MAXFLOAT; rotateAnimation. duration = 2; CAAnimationGroup * groupAnnimation = [CAAnimationGroup animation]; groupAnnimation. duration = 2; groupAnnimation. autoreverses = YES; groupAnnimation. animations = @ [moveAnimation, scaleAnimation, rotateAnimation]; groupAnnimation. repeatCount = MAXFLOAT; // [groupLayer addAnimation: groupAnnimation forKey: @ "groupAnnimation"];}

　　

- (void)viewDidLoad {    [super viewDidLoad];    // Do any additional setup after loading the view from its nib.    [self initGroupLayer];} 

Download the latest demoproject caanimationdemo.zip