Basic usage of CABasicAnimation (move, rotate, zoom in, zoom out)

This article is modified on the basis of other blog posts

Original source: http://blog.csdn.net/iosevanhuang/article/details/14488239

 

The way the CABasicAnimation class is used is basic keyframe animation.

The so-called key frame animation is an animation method that registers the properties of the Layer as KeyPath, specifies the start frame and end frame of the animation, and then automatically calculates and implements the intermediate transition animation.

 

The basic sequence of use of CABasicAnimation

1. Reference QuartzCore.framework

Add the "QuartzCore.framework" library to the project. And import the header file where you need to use the CABaseAnimation class.

#import <QuartzCore/QuartzCore.h>

 

2. Instantiation of CABaseAnimation and registration of critical paths

Use the "animationWithKeyPath:" method to instantiate CABasicAnimation, and specify the Layer property as the key path to register.

 

// Specify the position property
CABasicAnimation *animation =
    [CABasicAnimation animationWithKeyPath:@"position"];

 

 

3. Set the animation

Set the properties of the animation. Here are the properties and their corresponding descriptions:

Property description

duration	Animation duration (in seconds) (Note: This is different from the original text)
repeatCount	repeat times. Set to HUGE_VALF to repeat forever.
startTime	Specifies the animation start time. To specify a delay of several seconds from the start, please set it in the form of "CACurrentMediaTime() + number of seconds".
timingFunction	Set the speed change of the animation
autoreverses	Whether to perform an inverse animation when the animation ends

 

 

animation.duration = 2.5; // animation duration
animation.repeatCount = 1; // do not repeat
animation.beginTime = CACurrentMediaTime() + 2; // Execute after 2 seconds
animation.autoreverses = YES; // perform reverse animation after the end
 
// The animation accelerates and then decelerates
animation.timingFunction =
    [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

 

 

5. Add animation

Add a set animation for the Layer, and you can assign any name to the Key.

 

[myView.layer addAnimation:animation forKey:@"move-layer"];

 Sometimes it is necessary to determine whether an animation has been added to the UIView's layer:

CAAnimation *animation = [self.myView.layer animationForKey:@"annimationName"];

 

 

Other. The solution to the phenomenon of returning to the initial state after the animation ends

Execute the animation with CABasicAnimation, after the animation ends, it will return to the state before the animation started. If you want to solve it, you must set the two properties "removedOnCompletion" and "fillMode".

 

// Do not return to the initial state after the animation ends
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

 

 

Pause animation effect halfway through animation

// 1. Take out the time point of the current animation, that is, the pause time point (for example, an animation with a duration of 0.5 seconds, pause the animation when it runs to 0.25 seconds, then this time point is 0.25 seconds)
CFTimeInterval pauseTime = [self.myView.layer convertTime:CACurrentMediaTime() fromLayer:nil];

// 2. Set the time offset according to the paused time point taken in the first step. The purpose of specifying the time offset is to let the animation freeze at this time point
[self.myView.layer setTimeOffset:pauseTime];

// 3. Set the animation speed to 0, the default animation speed is 1.0
[self.myView.layer setSpeed:0.0];

 

Resume a paused animation

CFTimeInterval pausedTime = layer.timeOffset;
// 1. Let CALayer's time continue to walk
layer.speed = 1.0;
// 2. Cancel the last recorded dwell time
layer.timeOffset = 0.0;
// 3. Cancel the last set time
layer.beginTime = 0.0;
    
// 4. Calculate the paused time (CACurrentMediaTime()-pausedTime can also be used here)
CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
// 5. Set the start time relative to the parent coordinate system (backward timeSincePause)
layer.beginTime = timeSincePause;

 

 

Example of using CABasicAnimation

In fact, there are many ways to use CABasicAnimation, which will be listed below.

 

mobile animation

The code for the moving animation is as follows:

/* move*/
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
 
// set animation options
animation.duration = 2.5; // duration
animation.repeatCount = 1; // number of repetitions
 
// Setting of start frame and end frame
animation.fromValue = [NSValue valueWithCGPoint:myView.layer.position]; // 起始帧
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // final frame
 
// add animation
[myView.layer addAnimation:animation forKey:@"move-layer"];

 

Rotation animation

The code for the rotation animation is as follows:

/* rotate */
 
// Rotate the Y axis (if the Z axis is specified, it will rotate around the center like the UIView animation)
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
 
// set animation options
animation.duration = 2.5; // duration
animation.repeatCount = 1; // number of repetitions
 
// set the rotation angle
animation.fromValue = [NSNumber numberWithFloat:0.0]; // starting angle
animation.toValue = [NSNumber numberWithFloat:2 * M_PI]; // end angle
 
// add animation
[myView.layer addAnimation:animation forKey:@"rotate-layer"];

 

Zoom animation

The code for the zoom animation is as follows:

/* zoom in and out */
 
// set to zoom
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
 
// animation options settings
animation.duration = 2.5; // animation duration
animation.repeatCount = 1; // number of repetitions
animation.autoreverses = YES; // perform reverse animation when animation ends
 
// zoom factor
animation.fromValue = [NSNumber numberWithFloat:1.0]; // Multiplier at start
animation.toValue = [NSNumber numberWithFloat:2.0]; // Multiplier at the end
 
// add animation
[myView.layer addAnimation:animation forKey:@"scale-layer"];

 

Combine animation

Use the CAAnimationGroup class for a combination of complex animations. code show as below:

/* Animation 1 (moving in the X-axis direction) */
CABasicAnimation *animation1 =
    [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
 
// end point setting
animation1.toValue = [NSNumber numberWithFloat:80];; // 終点
 
 
/* animation 2 (rotate around the center of the Z axis) */
CABasicAnimation *animation2 =
    [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
 
// set the rotation angle
animation2.fromValue = [NSNumber numberWithFloat:0.0]; // Angle at start
animation2.toValue = [NSNumber numberWithFloat:4 * M_PI]; // Angle at the end
 
 
/* animation group */
CAAnimationGroup *group = [CAAnimationGroup animation];
 
// animation options settings
group.duration = 3.0;
group.repeatCount = 1;
 
// add animation
group.animations = [NSArray arrayWithObjects:animation1, animation2, nil];
[myView.layer addAnimation:group forKey:@"move-rotate-layer"];

 

Capture events when animation starts and ends

Blogger: Set the delegate object and implement the delegate method, as follows:

/* move*/
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
animation.delegate = self; // specify the delegate object
 
// set animation options
animation.duration = 2.5; // animation duration
animation.repeatCount = 1; // number of repetitions
 
// end point setting
animation.toValue = [NSNumber numberWithFloat:100];; // 终点
 
// add animation
[myView.layer addAnimation:animation forKey:@"move-layer"];
 
・・・
 
/**
 * when the animation starts
 */
- (void)animationDidStart:(CAAnimation *)theAnimation
{
    NSLog(@"begin");
}
 
/**
 * when the animation ends
 */
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
    NSLog(@"end");
}

 

Precautions when using CABasicAnimation

When CABasicAnimation is in the process of animation, when you click the Home button and then return to the app, the animation will be cleared.

 

Example program for Objective-C

An example program that uses CABasicAnimation to implement keyframe animation is as follows:

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    // Image display
    UIImage *image = [UIImage imageNamed:@"image01.png"];
    UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
    imageView.center = CGPointMake(160, 240);
    [self.view addSubview:imageView];
 
 
    /* move*/
    CABasicAnimation *animation1 =
        [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
 
    // setting of start and end points
    animation1.toValue = [NSNumber numberWithFloat:100];; // 終点
 
 
    /* rotate */
    CABasicAnimation *animation2 =
        [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
 
    // 3 turns around the x-axis
    animation2.toValue = [NSNumber numberWithFloat:6 * M_PI]; // Angle at the end
 
 
    /* animation group */
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.delegate = self;
    group.duration = 5.0;
    group.repeatCount = 1;
 
    // Do not return to the initial state after the animation ends
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeForwards;
 
    // add animation
    group.animations = [NSArray arrayWithObjects:animation1, animation2, nil];
    [imageView.layer addAnimation:group forKey:@"move-rotate-layer"];
}
 
 
/**
 * when the animation starts
 */
- (void)animationDidStart:(CAAnimation *)theAnimation
{
    NSLog(@"begin");
}
 
/**
 * when the animation ends
 */
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
    NSLog(@"end");
}