iOS开发-核心动画(CAAnimation)相关

此文章单方面对 贝塞尔曲线画图 核心动画 图层相关 方面做下整理,方便查看!

基本概念

Core Animation(核心动画)是一组功能强大,在开发中可以用他来实现很多复杂和绚丽的动画效果,核心动画作用在CALayer(Core animation layer)上

结构

盗图 -_-.png

代码和效果

/**
 *  fillMode 视图在非Active时的行为
 *
 *  kCAFillModeForwards 动画开始之后layer迅速移到动画开始的位置
 *  kCAFillModeBackwards 动画被添加的那一刻(动画开始之前)layer迅速移到开始位置,并且在 removedOnCompletion 为 NO 的情况下,动画结束会移到layer本身的位置
 *  kCAFillModeBoth 动画添加的那一刻(动画开始之前)layer迅速移到开始位置,并且在 removedOnCompletion 为 NO 的情况下,动画结束layer会停留在动画结束的位置
 *  kCAFillModeRemoved  动画开始之后layer迅速移到动画开始的位置,并且在 removedOnCompletion 为 NO 的情况下,动画结束回忆道layer本身位置
 */
    
/**
 *  timingFunction  动画节奏 [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]
 *
 *  kCAMediaTimingFunctionLinear            匀速
 *  kCAMediaTimingFunctionEaseIn            慢进
 *  kCAMediaTimingFunctionEaseOut           慢出
 *  kCAMediaTimingFunctionEaseInEaseOut     慢进慢出
 *  kCAMediaTimingFunctionDefault           默认值(慢进慢出)
 */
    
/**
 *  removedOnCompletion 动画执行完毕后是否从图层上移除 默认为 YES (动画结束layer移到本身位置)
 */
    
/** 
 *  这样个要配合使用 repeatDuration = repeatCount * duration(动画一遍持续时间,主要控制速度)
 *  repeatCount     动画重复执行次数
 *  repeatDuration  动画重复执行时间
 */

CABasicAnimation

1.位置相关动画 (position.y 和 position.x transform.translation.x 和 transform.translation.y)

position fromValue:默认自身位置为起始位置 toValue:移动后的位置
transform.translation fromValue:默认自身位置为起始位置(默认0) toValue:相对于layer原始位置距离

• position.y 和 position.x

/// y轴方向移动  fromValue:默认自身位置为起始位置 toValue:移动后的位置
- (void)animation_CABasicAnimation_position_y
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position.y"];
    //animation.fromValue = @(self.img.center.y); 默认初始位置
    animation.toValue = @(self.img.center.y + 100);
    animation.duration = 3;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.img.layer addAnimation:animation forKey:@"position.y"];
}

position.x/y.gif

• transform.translation.x 和 transform.translation.y

- (void)animation_CABasicAnimation_translation_x
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
    //animation.fromValue = @0; 默认初始位置
    animation.toValue = @100;
    animation.duration = 1;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.img.layer addAnimation:animation forKey:@"transform.translation.x"];
}

transform.translation.x/y.gif

2.旋转相关动画

• transform.rotation.x | transform.rotation.y | transform.rotation.z

transform.rotation.x.gif

transform.rotation.y.gif

transform.rotation.z.gif

3.缩放相关动画

• transform.scale.x | transform.scale.y | transform.scale.z

- (void)animation_CABasicAnimation_transform_scale
{
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    animation.toValue = @8.0;
    animation.duration = 3;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    [self.img.layer addAnimation:animation forKey:@"transform.scale"];
}

transform.scale.gif

4.自身大小相关

• bounds.origin.x | bounds.origin.y
  • 动画view图层上图层和view上的其他控件 不动画view本身
  • 方向x 右为负 左为正
  • 方向y 上为负 下为正

//bounds.origin.x
//animation1.fromValue = @0; 默认自身位置为开始位置 为0
animation1.toValue = @(-self.img.bounds.size.width * 0.5);

//bounds.origin.y
//animation2.fromValue = @0; 默认自身位置为开始位置 为0
animation2.toValue = @(-self.img.bounds.size.height * 0.5);

bounds.origin.x/y.gif

• bounds.size.width | bounds.size.height
  • 动画view本身 不动画view上的其他控件

//bounds.size.width
//animation1.fromValue = @(self.img.bounds.size.width); 默认起始值为自身宽度
animation1.toValue = @(self.img.bounds.size.width * 0.5);

//bounds.size.height
//animation2.fromValue = @(self.img.bounds.size.height); 默认起始值为自身高度
animation2.toValue = @(self.img.bounds.size.height * 0.5);

bounds.size.width:height.gif

5.边角动画

• cornerRadius | borderWidth | borderColor

//cornerRadius
//animation1.fromValue = @(self.img.layer.cornerRadius); 默认自身圆角为起始值
animation1.toValue = @50;
animation1.repeatCount = 3;
animation1.repeatDuration = animation.duration * animation.repeatCount;

//borderWidth
//animation.fromValue = @(self.img.layer.borderWidth); 默认自身边框宽度为起始值
animation2.toValue = @20;
animation2.repeatCount = 3;
animation2.repeatDuration = animation.duration * animation.repeatCount;

//borderColor
//animation3.toValue = (__bridge id _Nullable)([self.img.layer borderColor]); //默认自身边框颜色为起始值
animation3.toValue = (__bridge id _Nullable)([[UIColor cyanColor] CGColor]);
animation3.repeatCount = 3;
animation3.repeatDuration = animation.duration * animation.repeatCount;

cornerRadius/borderWidth/borderColor.gif

6.自身的一些属性

• opacity 不透明

animation.fromValue = @1;
animation.toValue = @0;

opacity.gif

• backgroundColor

animation.toValue = (__bridge id _Nullable)([[UIColor yellowColor] CGColor]);

backgroundColor.gif

• contents (layer.contents)

animation.fromValue = (__bridge id _Nullable)([[UIImage imageNamed:@"春雨医生"] CGImage]);
animation.toValue = (__bridge id _Nullable)([[UIImage imageNamed:@"丁香医生"] CGImage]);

contents.gif

7.阴影相关动画

• shadowOffset 阴影位置偏移

//self.img.layer.shadowOpacity = 0.5;
//self.img.layer.shadowOffset = CGSizeMake(0, 0);
animation.fromValue = [NSValue valueWithCGSize:CGSizeMake(0, 0)];
animation.toValue = [NSValue valueWithCGSize:CGSizeMake(20, 20)];
animation.duration = 3;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

shadowOffset.gif

• shadowColor 阴影颜色

//self.img.layer.shadowOpacity = 0.5;
//self.img.layer.shadowOffset = CGSizeMake(20, 20);
animation.toValue = (__bridge id _Nullable)([UIColor redColor].CGColor);

shadowColor.gif

• shadowOpacity 阴影不透明值 0_1(透明完全不透明)

//self.img.layer.shadowOpacity = 0;
//self.img.layer.shadowOffset = CGSizeMake(20, 20);
animation.fromValue = @0;
animation.toValue = @1;

shadowOpacity.gif

• shadowRadius 暂且叫做阴影模糊度吧

//self.img.layer.shadowOpacity = 0.5;
//self.img.layer.shadowOffset = CGSizeMake(20, 20);
animation.fromValue = @3;
animation.toValue = @10;

shadowRadius.gif

CAKeyframeAnimation

可以看做是一个有更多位置设定的CABaseAnimation,可以设定keyPath起点、中间关键点（可以是多个）、终点的值，每一帧所对应的时间，动画会沿着设定点进行移动

CAKeyframeAnimation的一些独有属性

• values: 关键帧数组对象,里面每一个元素即为一个关键帧
• path: 动画路径对象,可以指定一个路径,在执行动画时路径会沿着路径移动,注:Path在动画中只会影响视图的Position
• keyTimes: 设置关键帧对应的时间数组,范围:0.0-1.0之间的浮点型
  • 数组中的每一个连续值都必须大于或等于前面的值,因为里面存储的是动画持续时间内的每一帧的时间点，时间点是从0%-100%，时间不可能回退
  • 为了得到最好的结果,数组中的元素个数应该与values中的元素个数或路径属性中的控制点的数量相匹配
• timingFunctions: 设置关键帧对应速度效果的数组
• calculationMode: 这个属性用来设定 关键帧中间的值是怎么被计算的
  NSString * const kCAAnimationLinear
  NSString * const kCAAnimationDiscrete 只展示关键帧的状态,没有中间过程,没有动画
  NSString * const kCAAnimationPaced
  NSString * const kCAAnimationCubic
  NSString * const kCAAnimationCubicPaced

- (void)animation_CAKeyframeAnimation_Rect
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = 4.0;
    animation.repeatCount = 2;
    animation.repeatDuration = animation.duration * animation.repeatCount;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(self.img.center.x, self.img.center.y)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(self.img.center.x + 150, self.img.center.y)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(self.img.center.x + 150, self.img.center.y + 150)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(self.img.center.x, self.img.center.y + 150)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(self.img.center.x, self.img.center.y)];
    animation.values = @[value1, value2, value3, value4, value5];
    animation.keyTimes = @[@0, @0.4, @0.5, @0.9, @1.0];
    
    /*  利用贝塞尔画的一个矩形,跟上面效果一样,只不过不能设置关键帧动画时间
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(self.img.center.x, self.img.center.y, 150, 150)];
    animation.path = path.CGPath;
     */
    
    [self.img.layer addAnimation:animation forKey:@"position"];
}

values_rect.gif

path_rect.gif

利用贝塞尔画个圆路径动画

- (void)animation_CAKeyframeAnimation_Circle
{
    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = 3;
    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    animation.repeatCount = 2;
    animation.repeatDuration = animation.repeatCount * animation.duration;
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.img.center.x + 75, self.img.center.y) radius:75 startAngle:M_PI endAngle:3*M_PI clockwise:YES];
  
    animation.path = path.CGPath;
    [self.img.layer addAnimation:animation forKey:@"position"];
}

path_circle.gif

CATransition

转场动画,在开发中巧用会有意想不到的效果,还方便

/**
 *  CATransition (type) 过渡动画的类型
 *
 *  kCATransitionFade   渐变
 *  kCATransitionMoveIn 覆盖
 *  kCATransitionPush   推出
 *  kCATransitionReveal 揭开(可以说是抽开)
 *
 *  私有动画类型的值有："cube"、"suckEffect"、"oglFlip"、 "rippleEffect"、"pageCurl"、"pageUnCurl"等等
 */
    
/**
 *  CATransition (subtype) 过渡动画的方向
 *
 *  kCATransitionFromRight  从右边
 *  kCATransitionFromLeft   从左边
 *  kCATransitionFromTop    从顶部
 *  kCATransitionFromBottom 从底部
 */

下面来组示例,看下效果,生成四个颜色的图片,来个切换动画

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    static int i = 0;
    i = i >= self.imgsArr.count-1 ? 0:i+1;
    self.img.image = [self.imgsArr objectAtIndex:i];
    CATransition *animation = [CATransition animation];
    animation.duration = 0.5;
    animation.type = @"cube";
    animation.subtype = kCATransitionFromRight;
    [self.img.layer addAnimation:animation forKey:@"transition"];
}
- (NSArray *)imgsArr
{
    if (!_imgsArr) {
        _imgsArr = [NSArray arrayWithObjects:[self returnImage1WithCGSize:self.img.bounds.size andColor:[UIColor redColor]],
                                             [self returnImage1WithCGSize:self.img.bounds.size andColor:[UIColor greenColor]],
                                             [self returnImage1WithCGSize:self.img.bounds.size andColor:[UIColor cyanColor]],
                                             [self returnImage1WithCGSize:self.img.bounds.size andColor:[UIColor magentaColor]], nil];
    }
    return _imgsArr;
}
//根据size和传进来的color生成一张颜色图片
- (UIImage *)returnImage1WithCGSize:(CGSize)size andColor:(UIColor *)color
{
    UIGraphicsBeginImageContextWithOptions(size, NO, 0);
    
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, size.width, size.height)];
    [color setFill];
    [path fill];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    
    return image;
}

我平时开发中的图片轮播一般都是用这个动画做的,加两个手势就行,缺点就是不能翻页中间不能停留,没有scroll那么全的功能,但是代码简单方便

kCATransitionPush_模仿轮播图.gif

kCATransitionFade.gif

kCATransitionMoveIn.gif

kCATransitionReveal.gif

私有-cube.gif

示例: 我最近做项目遇到这样一个问题,登录界面跳到主界面的时候我一般喜欢用根视图去跳,因为我认为登录注册界面可能八百年才用到一次,用导航或者模态来转场不是太好,但是用根视图跳转显得太突兀,动画不太好看,这时转场动画便派上用场

//登录
SideslipViewController *sideslip = [[SideslipViewController alloc] init];
[UIApplication sharedApplication].keyWindow.rootViewController = sideslip;
    
CATransition *transition = [[CATransition alloc] init];
transition.duration = 0.3;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
transition.type = kCATransitionReveal;
transition.subtype = kCATransitionFromTop;
[[UIApplication sharedApplication].keyWindow.layer addAnimation:transition forKey:@"LoginIn"];

//登出
LoginViewController *login = [[LoginViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:login];
nav.navigationBar.hidden = YES;
[UIApplication sharedApplication].keyWindow.rootViewController = nav;
    
CATransition *transition = [[CATransition alloc] init];
transition.duration = 0.3;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
transition.type = kCATransitionPush;
transition.subtype = kCATransitionFromBottom;
[[UIApplication sharedApplication].keyWindow.layer addAnimation:transition forKey:@"LoginOut"];

LoginInOrOut_Animation.gif

CASpringAnimation

iOS9之后出来的新的弹簧动画,继承CABasicAnimation

/** 一些重要的属性
 *  CASpringAnimation的重要属性：
 *
 *  mass：质量（影响弹簧的惯性，质量越大，弹簧惯性越大，运动的幅度越大）
 *  stiffness：弹性系数（弹性系数越大，弹簧的运动越快）
 *  damping：阻尼系数（阻尼系数越大，弹簧的停止越快）
 *  initialVelocity：初始速率（弹簧动画的初始速度大小，弹簧运动的初始方向与初始速率的正负一致，若初始速率为0，表示忽略该属性）
 *  settlingDuration：结算时间（根据动画参数估算弹簧开始运动到停止的时间，动画设置的时间最好根据此时间来设置）
 */

CASpringAnimation *animation = [CASpringAnimation animationWithKeyPath:@"position"];
animation.mass = 10.0;
animation.stiffness = 500;
animation.damping = 10;
animation.initialVelocity = 5.0f;
animation.duration = animation.settlingDuration; //时间需要注意下,用系统计算出来动画所需时间
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(self.img.center.x, self.img.center.y + 200)];
[self.img.layer addAnimation:animation forKey:@"position"];

CASpringAnimation_position.gif

以上零散单个Demo地址: https://github.com/SupermanChao/Animation

CAAnimationGroup

使用Group可以将多个动画合并一起加入到图层中,Group中所有动画一起执行,可以展示很多动画种类
一个简单的动画组例子,选取颜色
Demo地址:https://github.com/SupermanChao/AnimationGroup

Animation-Group.gif

CATransaction

最后讲一下事务(CATransaction),在核心动画里面存在事务(CATransaction)这样一个概念,它负责协调多个动画原子更新显示操作,简单来说事务是核心动画里面的一个基本的单元,动画的产生必然伴随着layer的Animatable属性的变化,而layer属性的变化必须属于某一个事务

事务分为隐式和显式：

• 隐式：没有明显调用事务的方法,由系统自动生成事务,比如直接设置一个layer的position属性,则会在当前线程自动生成一个事务,并在下一个runLoop中自动commit事务
• 显式：明显调用事务的方法([CATransaction begin]和[CATransaction commit])

事务的可设置属性(会覆盖隐式动画的设置):
//动画持续时间
+ (CFTimeInterval)animationDuration;
//动画时间曲线
+ (nullable CAMediaTimingFunction *)animationTimingFunction;
//是否关闭动画
+ (BOOL)disableActions;
//动画执行完毕回调
+ (nullable void (^)(void))completionBlock;

下面来个小例子,圆环进度动画,先看效果后上代码
代码地址:https://github.com/SupermanChao/CATransaction-Demo

LCProgressAnimation.gif

//圆环贝塞尔曲线
- (UIBezierPath *)path
{
    if (!_path) {
        CGFloat radius = (MIN(self.frame.size.width, self.frame.size.height) - self.lineWidth) * 0.5;
        CGPoint center = CGPointMake(self.frame.size.width * 0.5, self.frame.size.height * 0.5);
        _path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:-M_PI_2 endAngle:M_PI + M_PI_2 clockwise:YES];
    }
    return _path;
}

//轨道
- (CAShapeLayer *)outLayer
{
    if (!_outLayer) {
        _outLayer = [CAShapeLayer layer];
        _outLayer.lineWidth = self.lineWidth;
        _outLayer.fillColor = [UIColor clearColor].CGColor;
        _outLayer.strokeColor = self.pathwayColor.CGColor;
        _outLayer.path = self.path.CGPath;
    }
    return _outLayer;
}

//进度
- (CAShapeLayer *)progressLayer
{
    if (!_progressLayer) {
        _progressLayer = [CAShapeLayer layer];
        _progressLayer.lineWidth = self.lineWidth;
        _progressLayer.fillColor = [UIColor clearColor].CGColor;
        _progressLayer.lineCap = kCALineCapRound;
        _progressLayer.strokeColor = self.scheduleColor.CGColor;
        _progressLayer.path = self.path.CGPath;
        _progressLayer.strokeStart = 0;
        _progressLayer.strokeEnd = 0.001;
    }
    return _progressLayer;
}

//定时器协调运作
- (void)onTimer
{
    switch (self.accuracy) {
        case LCAnimationAccuracyLow:
            self.progress += 2;
            break;
        case LCAnimationAccuracyHeight:
            self.progress += 0.5;
            break;
        case LCAnimationAccuracyVeryHeight:
            self.progress += 0.1;
            break;
        default:
            self.progress += 1;
            break;
    }
    
    [CATransaction begin];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear]];
    [CATransaction setAnimationDuration:self.totalTime / self.count];
    self.progressLayer.strokeEnd = self.progress / 100.0;
    [CATransaction commit];
    
    if (self.progress >= 99.99) {
        [self lc_stopAnimation];
        if ([self.delegate respondsToSelector:@selector(lc_animationFinishAction)]) {
            [self.delegate lc_animationFinishAction];
        }
    };
}