Core Animation Effects

We have introduced the basic knowledge of Core Animation and the simple use of CALayer. In the end, there are still some Animation effects to be played. Here we will list several Animation effects. For more information, see this article.

1. Move the image to the bottom right corner to become transparent.

Use CAAnimationGroup to overlay the animation effect, which is described in "Move the image to the lower right corner and make it transparent:

,

The above three figures are the three States of the animation. The implementation code is as follows:

- (void)viewDidLoad{    [super viewDidLoad];    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"snaguosha.png"]];    self.imageView.frame = CGRectMake(10, 10, 128, 192);    [self.view addSubview:self.imageView]; }

 

-(IBAction) tranAction :( id) sender {CGPoint fromPoint = self. imageView. center; // path curve * movePath = [UIBezierPath bezierPath]; [movePath moveToPoint: fromPoint]; CGPoint toPoint = CGPointMake (300,460); [movePath addQuadCurveToPoint: toPoint controlPoint: CGPointMake (, 0)]; // key frame CAKeyframeAnimation * moveAnim = [CAKeyframeAnimation animationWithKeyPath: @ "position"]; moveAnim. path = movePath. CGPath; moveAnim. removedOnCompletion = YES; // rotating change CABasicAnimation * scaleAnim = [CABasicAnimation animationWithKeyPath: @ "transform"]; scaleAnim. fromValue = [NSValue valueWithCATransform3D: CATransform3DIdentity]; // x, the Y axis is reduced to 0.1, and the Z axis is not changed to scaleAnim. toValue = [NSValue valueWithCATransform3D: CATransform3DMakeScale (0.1, 0.1, 1.0)]; scaleAnim. removedOnCompletion = YES; // transparency change CABasicAnimation * opacityAnim = [CABasicAnimation animationWithKeyPath: @ "alpha"]; opacityAnim. fromValue = [NSNumber numberWithFloat: 1.0]; opacityAnim. toValue = [NSNumber numberWithFloat: 0.1]; opacityAnim. removedOnCompletion = YES; // key frame, rotation, and transparency are combined to execute CAAnimationGroup * animGroup = [CAAnimationGroup animation]; animGroup. animations = [NSArray arrayWithObjects: moveAnim, scaleAnim, opacityAnim, nil]; animGroup. duration = 1; [self. imageView. layer addAnimation: animGroup forKey: nil];}

Code parsing: the animation path is set for the key frame above, scaleAnim is reduced, and opacityAnim is set to change transparency. Combine the three animations into animGroup.

Add animGroup to the animation of imageView. layer. Therefore, the animation effect is available.

2. Rotate and move to the right

-(IBAction) RightRotateAction :( id) sender {CGPoint fromPoint = self. imageView. center; UIBezierPath * movePath = [UIBezierPath bezierPath]; [movePath moveToPoint: fromPoint]; CGPoint toPoint = CGPointMake (fromPoint. x + 100, fromPoint. y); [movePath addLineToPoint: toPoint]; CAKeyframeAnimation * moveAnim = [CAKeyframeAnimation animationWithKeyPath: @ "position"]; moveAnim. path = movePath. CGPath; CABasicAnimation * TransformAnim = [CABasicAnimation animationWithKeyPath: @ "transform"]; TransformAnim. fromValue = [NSValue valueWithCATransform3D: CATransform3DIdentity]; // rotate TransformAnim along the Z axis. toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation (M_PI, 0, 0, 1)]; // rotate along the Y axis // scaleAnim. toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation (M_PI, 0, 1.0, 0)]; // rotate along the X axis // TransformAnim. toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation (M_PI, 1.0,)]; TransformAnim. cumulative = YES; TransformAnim. duration = 3; // rotate twice, 360 degrees TransformAnim. repeatCount = 2; self. imageView. center = toPoint; TransformAnim. removedOnCompletion = YES; CAAnimationGroup * animGroup = [CAAnimationGroup animation]; animGroup. animations = [NSArray arrayWithObjects: moveAnim, TransformAnim, nil]; animGroup. duration = 6; [self. imageView. layer addAnimation: animGroup forKey: nil];}

Code parsing: You may not have noticed that CATransform3DMakeRotation returns the value of rotation. In the above animation effect, the value of CATransform3DMakeScale is returned.
Moving to the right is because the key frame uses a straight path.

3. Rotate and eliminate the edges.

-(IBAction) Rotate360Action :( id) sender {// rotate the image to 360 degrees CABasicAnimation * animation = [CABasicAnimation animationWithKeyPath: @ "transform"]; animation. fromValue = [NSValue valueWithCATransform3D: CATransform3DIdentity]; // rotate around the Z axis, vertical with screen animation. toValue = [NSValue valueWithCATransform3D: CATransform3DMakeRotation (M_PI, 0, 0, 1.0)]; animation. duration = 3; // The cumulative rotation effect. First, the rotation is 180 degrees, and then the rotation is 180 degrees to achieve 360 rotation of animation. cumulative = YES; animation. repeatCount = 2; // Add a pixel transparent area to the image edge, and remove the image from the CGRect imageRrect = CGRectMake (0, 0, self. imageView. frame. size. width, self. imageView. frame. size. height); UIGraphicsBeginImageContext (imageRrect. size); [self. imageView. image drawInRect: CGRectMake (1, 1, self. imageView. frame. size. width-2, self. imageView. frame. size. height-2)]; self. imageView. image = UIGraphicsGetImageFromCurrentImageContext (); UIGraphicsEndImageContext (); [self. imageView. layer addAnimation: animation forKey: nil];}

If you observe it carefully, you will see that the image edge is jagged when the second animation is being rotated. How can we eliminate it? Add a pixel transparent area at the edge of the image to remove the image from the teeth.

UIGraphicsBeginImageContext

 

UIGraphicsGetImageFromCurrentImageContext obtains the current content as an image,

 

UIGraphicsEndImageContext ends. Is used with UIGraphicsBeginImageContext.

4. douman animation is a bit complicated. First, let's talk about the implementation steps:

1. Draw a path for the douman's mouth: pacmanOpenPath
2. Draw a douman closed path: pacmanClosedPath
3. Create a closed layer of doubeat headers: shapeLayer
4. Set the open and closed paths to the start and end points of the CABasicAnimation * chompAnimation animation, so that the gritted teeth can appear in the loop.
5. Finally, set a path as the key frame so that the foodies can act on this path.

The Code is as follows:

- (void)animationInit{    self.view.backgroundColor = [UIColor blackColor];        CGFloat radius = 30.0f;    CGFloat diameter = radius * 2;    CGPoint arcCenter = CGPointMake(radius, radius);    // Create a UIBezierPath for Pacman's open state    pacmanOpenPath = [UIBezierPath bezierPathWithArcCenter:arcCenter                                                    radius:radius                                                startAngle:DEGREES_TO_RADIANS(35)                                                  endAngle:DEGREES_TO_RADIANS(315)                                                 clockwise:YES];        [pacmanOpenPath addLineToPoint:arcCenter];    [pacmanOpenPath closePath];        // Create a UIBezierPath for Pacman's close state    pacmanClosedPath = [UIBezierPath bezierPathWithArcCenter:arcCenter                                                      radius:radius                                                  startAngle:DEGREES_TO_RADIANS(1)                                                    endAngle:DEGREES_TO_RADIANS(359)                                                   clockwise:YES];    [pacmanClosedPath addLineToPoint:arcCenter];    [pacmanClosedPath closePath];        // Create a CAShapeLayer for Pacman, fill with yellow    shapeLayer = [CAShapeLayer layer];    shapeLayer.fillColor = [UIColor yellowColor].CGColor;    shapeLayer.path = pacmanClosedPath.CGPath;    shapeLayer.strokeColor = [UIColor grayColor].CGColor;    shapeLayer.lineWidth = 1.0f;    shapeLayer.bounds = CGRectMake(0, 0, diameter, diameter);    shapeLayer.position = CGPointMake(-40, -100);    [self.view.layer addSublayer:shapeLayer];        SEL startSelector = @selector(startAnimation);    UIGestureRecognizer *recognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:startSelector];    [self.view addGestureRecognizer:recognizer];}

-(Void) startAnimation {// create a bit animation CABasicAnimation * chompAnimation = [CABasicAnimation animationWithKeyPath: @ "path"]; chompAnimation. duration = 0.25; chompAnimation. timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear]; chompAnimation. repeatCount = HUGE_VALF; chompAnimation. autoreverses = YES; // Animate between the two path values chompAnimation. fromValue = (id) pacmanClosedPath. CGPath; chompAnimation. toValue = (id) pacmanOpenPath. CGPath; [shapeLayer addAnimation: chompAnimation forKey: @ "chompAnimation"]; // Create digital '2'-shaped path UIBezierPath * path = [UIBezierPath bezierPath]; [path moveToPoint: CGPointMake (0,100)]; [path addLineToPoint: CGPointMake (300,100)]; [path addLineToPoint: CGPointMake (300,200)]; [path addLineToPoint: CGPointMake (0,200)]; [path addLineToPoint: CGPointMake (0,300)]; [path addLineToPoint: CGPointMake (300,300)]; CAKeyframeAnimation * moveAnimation = [CAKeyframeAnimation animationWithKeyPath: @ "position"]; moveAnimation. path = path. CGPath; moveAnimation. duration = 8.0f; // Setting the rotation mode ensures Pacman's mouth is always forward. this is a very convenient CA feature. moveAnimation. rotationMode = kCAAnimationRotateAuto; [shapeLayer addAnimation: moveAnimation forKey: @ "moveAnimation"];}

 

- (void)viewDidLoad{    [super viewDidLoad];    [self animationInit];}

You also need to add a macro:

# Define DEGREES_TO_RADIANS (x) (3.14159265358979323846 * x/180.0) calculation angle Conversion

Added a gesture, clicked the screen, and the douman started to work. Effect:

Code in this example:

Rong Fangzhi (http://blog.csdn.net/totogo2010)

This article follows the "signature-non-commercial use-consistency" creation public agreement