文档章节

iOS——Core Animation(核心动画)

kinglin_fu
 kinglin_fu
发布于 2016/01/20 14:15
字数 2193
阅读 228
收藏 4

###1、核心动画的基本概述

  • CoreAnimation的是 Objective - C 的框架,它通过简单的动画编程接口来提供一套高性能的动画引擎。

    • 简单易用的高性能混合编程模型。
    • 类似视图一样,你可以通过使用图层来创建复杂的接口。
    • 轻量级的数据结构,它可以同时显示并让上百个图层产生动画效果。
    • 一套简单的动画接口,可以让你的动画运行在独立的线程里面,并可以 独立于主线程之外
    • 一旦动画配置完成并启动,核心动画完全控制并独立完成相应的动画帧
    • 提高应用性能。应用程序只当发生改变的时候才重绘内容。再小的应用 程序也需要改变和提供布局服务层。核心动画还消除了在动画的帧速率 上运行的应用程序代码。
    • 灵活的布局管理模型。包括允许图层相对同级图层的关系来设置相应属 性的位置和大小。
  • 核心动画类(CAAnimation)包含CABasicAnimation(基本动画)、CATransition(转场动画)、CAKeyframeAnimation(关键帧动画)、CAAnimationGrup(动画组),动画的对象是图层(layer)。

    • CABasicAnimation:提供了在图层的属性值间简单的动画。
    • CAKeyframeAnimation: 提供支持关键帧动画。你指定动画的一个图层属性的关键路径,一个表示在动画的每个阶段的价值的数组,还有一个关键帧时间的数组和时间函数。
    • CATransition:提供了一个影响整个图层的内容过渡效果。在动画显示过程中采用淡出(fade)、推出(push)、显露(reveal)图层的内容。
    • CAAnimationGroup: 允许一系列动画效果组合在一起,并行显示动画。

输入图片说明

###2、基本动画(CABasicAnimation) CABasicAnimation 用于实现layer属性值从一个值(fromValue)到另外一个值(toValue)变化的简单动画,比如旋转、缩放、逐渐透明、移动等。

  • 基本使用

    1. 创建动画并设置动画要改变的属性
    	CABasicAnimation *animation = [CABasicAnimation animation];
    	[animation setKeyPath:@"transform.scale"];
    	// 或者
    	CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    
    1. 设置动画属性
    	animation.fromValue = @1.0;
    	animation.toValue = @0.5;
    	animation.duration = 0.5;
    	animation.autoreverses = YES;
    	animation.repeatCount = 10;
    
    1. 添加动画到图层
    	[aniView.layer addAnimation:animation forKey:@"ani_scale"];
    
  • 动画的属性

    • fromValue:属性的起始值,id类型。
    • toValue:属性的目标值,id类型。
    • byValue:属性要变化的值,也就是fromValue到toValue所改变的值。
    • duration:动画的持续时间。
    • autoreverses:动画是否有恢复动画。
    • repeatCount:动画重复次数,设置为HUGE_VALF表示无限次。
    • removedOnCompletion:是否回到初始状态,要设置fillMode为kCAFillModeForwards才起效果。
    • fillMode:非动画时的状态。
    • speed:动画的速度,默认1.0,设为2.0就是两倍的速度完成动画。
    • timingFunction:动画速度变化控制函数包含(Linear、EaseIn、EaseIn、EaseInEaseOut)。
    • timeOffset:动画的时间偏移。
    • beginTime:动画开始的时间,为CACurrentMediaTime() + 延迟秒数。
    • CACurrentMediaTime():当前媒体时间,可以用于动画暂停和开始的时间记录。这个绝对时间就是将mach_absolute_time()(mach_absolute_time是一个CPU/总线依赖函数,返回一个基于系统启动后的时钟”嘀嗒”数。)转换成秒后的值.这个时间和系统的uptime有关,系统重启后CACurrentMediaTime()会被重置。
  • 暂停动画

- (void)pauseAnimation
{
   CFTimeInterval stopTime = [_aniView.layer convertTime:CACurrentMediaTime() fromLayer:nil]; // 动画暂停时的媒体时间
    _aniView.layer.timeOffset = stopTime; // 将偏移的时间定格在暂停时
    _aniView.layer.speed = 0.0;  // 将速度设为0
}
  • 继续动画
- (void)recoverAnimation
{
    CFTimeInterval stopTime = _aniView.layer.timeOffset;
    _aniView.layer.timeOffset = 0;  // 重置动画的时间偏移
    _aniView.layer.speed = 1.0;     // 恢复动画的速度
    _aniView.layer.beginTime = 0;   // 将beginTime清0
    _aniView.layer.beginTime = [_aniView.layer convertTime:CACurrentMediaTime() fromLayer:nil] - stopTime; // 从新设置beginTime,这个时间就是暂停了多久的秒数。
}

参考:How to pause the animation of a layer tree

###3、关键帧动画(CAKeyframeAnimation) CAKeyframeAnimation 可以给一个图层提供多个目标值(values)或者一个指定路径(path)的动画。关键帧动画有如下几个重要参数:

**values:**指定图层属性(position、scale、rotation...)的多个目标值,这个图层就会由这些指定的值进行动画。

**path:**一个CGPathRef类型的路径,指定图层就会沿着这个路径进行动画。

**keyTimes:**关键帧指定对应的时间点,其取值范围为0到1.0。也就是keyTimes中的每一个时间值都对应values中的每一帧.当keyTimes没有设置的时候,各个关键帧的时间平分。

**calculationMode:**关键帧之间的插值计算模式,有如下几种:

    kCAAnimationLinear(线性的,两帧之间连续显示)
    kCAAnimationDiscrete(离散的,只在关键帧处显示)
    kCAAnimationPaced(强制步调一致的,keyTimes和timingFunctions设置无效)
    kCAAnimationCubic(两帧过度是圆滑曲线的)
    kCAAnimationCubicPaced(圆滑过度并且步调一致)
  • 多个目标值的动画:

    1. 创建一个改变position的关键帧动画并设置它的基本属性
    	CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    animation.duration = duration;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.repeatCount = 10;
    
    1. 指定多个目标点并设置每帧对应的时间点
    	 NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, 0)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight, TSreenHeight/2)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, TSreenHeight)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
    NSArray *values = @[value1,value2,value3,value4,value5];
    animation.values = values;
    animation.keyTimes = @[@0,@.3,@.6,@.7,@1];
    
    1. 添加动画到指定的图层
    	[_ballImageView.layer addAnimation:rotationAnim forKey:nil];
    
  • 指定路径的动画:

    1. 创建一个改变position的关键帧动画并设置它的基本属性
    	CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
        animation.duration = duration;
        animation.removedOnCompletion = NO;
        animation.fillMode = kCAFillModeForwards;
        animation.repeatCount = 10;
    
    1. 设置一个贝塞尔曲线的动画路劲path并指定为动画的路径
        UIBezierPath *path = [UIBezierPath bezierPath];
        [path moveToPoint:CGPointMake(0, 160)];
        CGPoint endPoint1 = CGPointMake(160, 160);
        CGPoint endPoint2 = CGPointMake(320, 160);
        CGPoint controlPoint = CGPointMake(80, 0);
        CGPoint controlPoint2 = CGPointMake(240, 320);
        [path addQuadCurveToPoint:endPoint1 controlPoint:controlPoint];
        [path addQuadCurveToPoint:endPoint2 controlPoint:controlPoint2];
        animation.path = path;
    
    1. 添加动画到图层
    	[imgView.layer addAnimation:keyAnimation forKey:nil];
    

###4、转场动画(CATransition) CATransition 用于视图的页面切换、页面更新时的转场动画,提供了多种type和subType转场效果。

  • type属性: 转场动画效果(API中公开的效果只有fade、moveIn、push、reveal四种,其他为私有)。

    1. fade 淡出效果
    2. moveIn 进入效果
    3. push 推出效果
    4. reveal 移出效果
    5. cube 立方体翻转效果
    6. suckEffect 抽走效果
    7. rippleEffect 水波效果
    8. pageCurl 翻开页效果
    9. pageUnCurl 关闭页效果
    10. cameraIrisHollowOpen 相机镜头打开效果
    11. cameraIrisHollowClose 相机镜头关闭效果
  • subType属性: 转场的动画方向

    1. fromLeftkCATransitionFromLeft 从左过度
    2. fromRightkCATransitionFromRight 从右过度
    3. fromTopkCATransitionFromTop 从上过度
    4. fromBottomkCATransitionFromBottom 从下过度
  • 实例代码:

    	CATransition *animation = [CATransition animation];
    	animation.duration = 0.5;
    	animation.type = @"moveIn";
    	// 或者 animation.type = kCATransitionMoveIn;
    	animation.subtype = @"fromLeft";
    	// 或者 animation.subtype = kCATransitionFromLeft
    	[self.photoView.layer addAnimation:self.animation forKey:nil];
    

###5、动画组(CAAnimationGrup) CAAnimationGrup 可以为一个layer添加多个动画效果,要实现复杂的动画可以使用用动画组的方式给layer添加动画。

  • 实例代码

    1. 创建多个动画
    	// 旋转动画
    	CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];
    rotation.duration = 3;
    rotation.byValue = @(2 * M_PI);
    
    // 缩放动画
    	CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scale.duration = 3;
    scale.byValue = @2;
    
    // 变透明动画
    CABasicAnimation *opacity = [CABasicAnimation animationWithKeyPath:@"opacity"];
    opacity.duration = 3;
    opacity.byValue = @-1;
    
    // 圆角变化动画
    CABasicAnimation *cornerRadius = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    cornerRadius.duration = 3;
    cornerRadius.byValue = @75;
    
    // 关键帧动画
    CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
    keyAnimation.duration = 3;
    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, 0)];
    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight, TSreenHeight/2)];
    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(TSreenWeight/2, TSreenHeight)];
    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(0, TSreenHeight/2)];
    NSArray *values = @[value1,value2,value3,value4,value5];
    keyAnimation.values = values;
    keyAnimation.calculationMode = kCAAnimationCubic;
    
    1. 创建一个动画组,组合多个动画
    	CAAnimationGroup *aniGroup = [CAAnimationGroup animation];
    aniGroup.duration = 3;
    aniGroup.repeatCount = HUGE_VALF;    
    aniGroup.animations = @[rotation, scale, opacity, cornerRadius, keyAnimation];
    [self.aniView.layer addAnimation:aniGroup forKey:nil];
    

###6、动画画轨迹(CAShapeLayer添加动画)

CAShapeLayer 是 CALayer 的子类,可以根据设定的path画出对应的图形、曲线等,还可以添加动画,实现动画画图。

  • CAShapeLayer属性:

    1. path 图像所依赖的路径,CGPathRef类型
    2. fillColor 图形填充颜色
    3. fillRule 填充的类型
    4. **strokeColor:**描边的颜色
    5. lineWidth:线条的宽度
    6. lineCap 线条端点的样式
    7. lineJoin 两个链接点的样式
    8. miterLimit: 两条线连接时斜接的长度
    9. strokeStart: 绘制的起点,取值范围[0~1],默认0
    10. strokeEnd 绘制的终点,取值范围[0~2],默认1
  • CAShapeLayer画图:

 // 1.创建条内切圆路径
 UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 200, 200)];
 // 2.创建CAShapeLayer图层并设置属性
 CAShapeLayer *shapeLayer = [CAShapeLayer layer];
 shapeLayer.frame = CGRectMake(0, 0, 200, 200);
 shapeLayer.path = path.CGPath;
 shapeLayer.fillColor = [UIColor clearColor].CGColor;
 shapeLayer.strokeColor = [UIColor redColor].CGColor;
 shapeLayer.lineWidth = 10.0f; 
 shapeLayer.lineCap = kCALineCapRound;
 shapeLayer.strokeStart = 0.25;
 shapeLayer.strokeEnd = 1;
 // 3.添加图层
 [self.view.layer addSublayer:shapeLayer];
  • CAShapeLayer添加动画:
    // 4.给shapeLayer的strokeStart 或者 strokeEnd 属性添加动画,就可以实现动画画图了。
    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    animation.duration = 3;
    animation.fromValue = @0;
    animation.toValue = @1;
    [shapeLayer addAnimation:animation forKey:@"ani_strokeStart"];

###7、核心动画Demo

####Demo下载地址:https://github.com/fuqinglin/CoreAnimationDemos.git

© 著作权归作者所有

kinglin_fu
粉丝 16
博文 11
码字总数 14320
作品 0
石景山
私信 提问
GPU vs CPU in iOS

一直以来,我们做产品的时候并没有特别的去考虑CPU/GPU的使用,最近为了提升可视化功能的性能,发现合理使用GPU也是一个可以好好研究的部分,这里总结一下一些有用的信息。 中央处理器 CPU ...

雨_树
2018/07/10
0
0
系统学习iOS动画之一:视图动画

这系列问文章图片比较多,特别是gif图,简书的图片上传老出问题,我已奔溃😒🤦♀️🤦♀️!! 直接到我的博客看吧, 传送门🚪:系统学习iOS动画之一:视图动画 这个部分介绍UIKit动画A...

Andy_Ron
2018/12/22
0
0
Core Animation基础介绍、简单使用CALayer以及多种动画效果

Core Animation之基础介绍 Core Animation可以翻译为核心动画,它为图形渲染和动画提供了基础。使用核心动画,你只需要设置一些参数比如起点和终点,剩下的帧核心动画为你自动完成。核心动画...

season_life
2013/05/24
0
0
ios中应用Lottie解决动画问题

作为一名iOS工程师,深知复杂动画的痛苦,下面我们来介绍下Lottie来解决日常的动画难题。 Lottie的简单介绍: 使用Lottie开发的流程是: 设计师在AE中设计完成你的动画,通过bodymoving插件导...

威廉云霄
02/20
0
0
系统学习iOS动画之三:图层动画

这系列问文章图片比较多,特别是gif图,简书的图片上传老出问题,我已奔溃😒🤦♀️🤦♀️!! 直接到我的博客看吧, 传送门🚪:系统学习iOS动画之三:图层动画 系统学习iOS动画之一:视...

Andy_Ron
2018/12/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

【AI实战】手把手教你深度学习文字识别(文字检测篇:基于MSER, CTPN, SegLink, EAST等方法)

文字检测是文字识别过程中的一个非常重要的环节,文字检测的主要目标是将图片中的文字区域位置检测出来,以便于进行后面的文字识别,只有找到了文本所在区域,才能对其内容进行识别。 文字检...

雪饼
今天
6
0
思维导图XMind 8 Pro 绿化方法(附序列号)

按部就班: Step 1 -全新下载最新版本的 Xmind 8(注必须是英文官方的版本,中文代{过}{滤}理网站的版本修改过,无法使用pj); Step 2 -安装完毕后,点击文末的下载按钮下载pj补丁文件包,将...

一只小青蛙
今天
10
0
数据结构(ER数据库)设计规范

表命名规范 表命名的规则分为3个层级,层级之间通过_分割,例如b_r_identity、d_l_identity。规约为: [leavel]_[type]_[name] [leavel] 表示数据库表的层级和功能,分为: s:业务无关的系统...

随风溜达的向日葵
今天
5
0
阿里Sentinel控制台源码修改-对接Apollo规则持久化

https://github.com/alibaba/Sentinel/wiki/%E5%9C%A8%E7%94%9F%E4%BA%A7%E7%8E%AF%E5%A2%83%E4%B8%AD%E4%BD%BF%E7%94%A8-Sentinel 动态规则扩展 https://github.com/alibaba/Sentinel/wiki......

jxlgzwh
昨天
8
0
在Linux系统中创建SSH服务器别名

如果你经常通过 SSH 访问许多不同的远程系统,这个技巧将为你节省一些时间。你可以通过 SSH 为频繁访问的系统创建 SSH 别名,这样你就不必记住所有不同的用户名、主机名、SSH 端口号和 IP 地...

老孟的Linux私房菜
昨天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部