CAAnimation 基本使用总结

animation.gif

github地址:https://github.com/wangyansnow/WYAnimationDemo

一序言

众所周知在iOS上做动画很容易,因为系统提供了很强大的api,今天就是给系统的Core Animation做一个总结.

继承结构图

inherit.png

CAPropertyAnimation: 属性动画,是一个基类,一般使用它的两个子类:CABasicAnimation和CAKeyframeAnimation.主要作用于CALayer的属性,使其产生动画效果.

CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"]

常用的keyPath: position, transform.rotation, transform.scale
transform.translation.y

二效果和Code

1.位移动画

位移position.gif

CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(200, 400)];
[self.animationView.layer addAnimation:positionAnimation forKey:@"position"];

3.旋转动画

旋转rotation.gif

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
scaleAnimation.byValue = @1;
[self.animationView.layer addAnimation:scaleAnimation forKey:@"scale"];

4.关键帧动画

关键帧动画position.gif

An optional array of NSNumber objects that define the time at which to apply a given keyframe segment.
Each value in the array is a floating point number between 0.0 and 1.0that defines the time point (specified as a fraction of the animation’s total duration) at which to apply the corresponding keyframe value. Each successive value in the array must be greater than, or equal to, the previous value. Usually, the number of elements in the array should match the number of elements in the values property or the number of control points in the path property. If they do not, the timing of your animation might not be what you expect.
The appropriate values to include in the array are dependent on the calculationMode property.
(1) If the calculationMode is set to kCAAnimationLinear or kCAAnimationCubic, the first value in the array must be 0.0and the last value must be 1>.0. All intermediate values represent time points between the start and end times.
(2) If the calculationMode is set to kCAAnimationDiscrete, the first value in the array must be 0.0 and the last value must be 1.0. The array should have one more entry than appears in the values array. For example, if there are two values, there should be three key times.
(3) If the calculationMode is set to kCAAnimationPaced or kCAAnimationCubicPaced, the values in this property are ignored.
If the values in this array are invalid or inappropriate for the current calculation mode, they are ignored.

简单来说就是，keyTimes中的值是0到1的小数，在默认情况下,也就是cacultionMode = kCAAnimationLinear的时候，keyTimes的第一个值是0.0，最后一个值是1.0,每一帧动画的时候都是对应的keyTimes中的值减去上一个值，故而keyTimes数组中的值必须是递增的

keyframeAnimation.values = @[NSVALUEPOINT(self.animationView.center.x, self.animationView.center.y), NSVALUEPOINT(100, 200), NSVALUEPOINT(150, 200), NSVALUEPOINT(150, 300), NSVALUEPOINT(100, 300)];
keyframeAnimation.duration = 2.0;
keyframeAnimation.keyTimes = @[@0, @0.25, @0.5, @0.75, @1.0];
[self.animationView.layer addAnimation:keyframeAnimation forKey:@"keyframe"];

5.路径动画

路径动画position.gif

CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(200, 200) radius:80.0 startAngle:0 endAngle:M_PI * 2 clockwise:YES].CGPath;
pathAnimation.duration = 2.0;
[self.animationView.layer addAnimation:pathAnimation forKey:@"path"];

6.左右抖动

抖动动画rotation.gif

CAKeyframeAnimation *leftRightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
leftRightAnimation.values = @[@(-0.2), @0.2, @-0.2];
leftRightAnimation.repeatCount = CGFLOAT_MAX;
leftRightAnimation.duration = 0.5;
[self.animationView.layer addAnimation:leftRightAnimation forKey:@"leftRight"];

7.动画组

动画组.gif

CAAnimationGroup *groupAnimation = [CAAnimationGroup animation];
// 1.平移动画
CABasicAnimation *positionAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
positionAnimation.toValue = NSVALUEPOINT(200, 400);

// 2.缩放动画
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.byValue = @1;

// 3.左右抖动动画
CAKeyframeAnimation *leftRightAnimation = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];
leftRightAnimation.values = @[@-0.2, @0.2, @-0.2];
leftRightAnimation.repeatCount = CGFLOAT_MAX;
leftRightAnimation.duration = 0.25;

groupAnimation.animations = @[positionAnimation, scaleAnimation, leftRightAnimation];
groupAnimation.duration = 2.0;

[self.animationView.layer addAnimation:groupAnimation forKey:@"group"];

8.转场动画

转场动画.gif

CATransition *transition = [CATransition animation];

/**
 1.苹果定义的常量
 kCATransitionFade 交叉淡化过渡
 kCATransitionMoveIn 新视图移到旧视图上面
 kCATransitionPush 新视图把旧视图推出去
 kCATransitionReveal 将旧视图移开,显示下面的新视图
 2.用字符串表示
 pageCurl 向上翻一页
 pageUnCurl 向下翻一页
 rippleEffect 滴水效果
 suckEffect 收缩效果，如一块布被抽走
 cube 立方体效果
 oglFlip 上下翻转效果
 */
transition.type = @"pageCurl";
//    transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromLeft;
transition.duration = 1.0;

self.animationView.backgroundColor = [UIColor darkGrayColor];
[self.animationView.layer addAnimation:transition forKey:@"transition"];

三补充

在给layer添加动画addAnimation:forKey:记得带上key,这样在移除动画的时候可以移除指定key的动画.

// 移除所有动画
[self.animationView.layer removeAllAnimations];
// 移除key为position的动画
[self.animationView.layer removeAnimationForKey:@"position"];

使用核心动画是不会更改视图的frame的也就是,当动画结束后视图会回到初始位置.如果不想让视图回到初始位置可以使用

positionAnimation.removedOnCompletion = NO;
positionAnimation.fillMode = kCAFillModeForwards;

1679203-ed5f7cb16714edc5.gif