代码地址如下:
http://www.demodashi.com/demo/11603.html

前记

关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIView封装的方法很方便,但是这只能用于一些简答的动画,如果是一些复杂的动画呢?这就不得不去研究下核心动画Core Animation(包含在Quartz Core框架中)了。这这之前我们必须了解,CALayer就包含在Quartz Core框架中,这是一个跨平台的框架,既可以用在iOS中又可以用在Mac OS X中。在使用Core Animation开发动画的本质就是将CALayer中的内容转化为位图从而供硬件操作,所以要熟练掌握动画操作必须熟悉CALayer,关于CALayer就不在这里讲了。今天主要是分析核心动画,iOS 中的核心动画又分为下面几种:基础动画、关键帧动画、动画组、转场动画、弹簧动画。下面我们先来了解下各个动画之间的关系

动画简介
CAAnimation
@interface CAAnimation : NSObject
<NSCoding, NSCopying, CAMediaTiming, CAAction>
{
@private
void *_attr;
uint32_t _flags;
}

这是核心动画的基类,不能直接使用,主要负责动画的时间、速度等,从上面可以看出是准守CAMediaTiming协议的。

CAPropertyAnimation

属性动画的基础类,继承自CAAnimation,不能直接使用。何谓属性动画呢?即通过修改属性值就可以产生动画效果。

CAAnimationGroup

动画组,继承自CAAnimation,顾名思义就是一种组合动画,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。

CATransition

转场动画,继承自CAAnimation,主要是通过滤镜来进行动画的效果设置

CABasicAnimation

基础动画,继承自CAPropertyAnimation,通过属性控制动画的参数,只要初始状态和结束状态

CAKeyframeAnimation

关键帧动画,继承自CAPropertyAnimation,也是通过属性控制动画参数,但是与基础动画不同的是有多个控制状态,并且可以通过path来实现动画

CASpringAnimation

弹簧动画,是在iOS 9中引入的,继承自CABasicAnimation,用于制作弹簧动画

动画使用

在使用动画之前,先补充个知识点---UIBezierPath, 这在动画使用的过程中会经常用到

核心动画

要使用核心动画,我们必须先了解下其属性,这里我们先看其遵守的协议<CAMediaTiming>

属性 说明
beginTime 指定动画开始的时间。开始延迟几秒的话,设置为CACurrentMediaTime() + 秒数 的方式即可
duration 动画的时长
speed 动画的速度
timeOffset 详细说明
repeatCount 动画重复的次数,如果要一直持续设置为HUGE_VALF即可
repeatDuration 设置动画的时间。在该时间内动画一直执行,不计次数
autoreverses 动画结束时是否执行逆动画
fillMode 分四种情况,分别为kCAFillModeForwardskCAFillModeBackwardskCAFillModeBothkCAFillModeRemoved,决定当前对象在非active时间段的行为,比如动画开始之前或者动画结束之

CAAnimation属性

属性 说明
timingFunction 速度控制函数,控制动画运行的节奏
removedOnCompletion 默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态。如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillModekCAFillModeForwards

关于fillMode的四种情况:

  • kCAFillModeRemoved 默认值,动画结束后,layer会恢复到之前的状态

  • kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态,而removedOnCompletion的默认属性值是 YES,所以为了使动画结束之后layer保持结束状态,应将removedOnCompletion设置为NO

  • kCAFillModeBackwards 在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。

  • kCAFillModeBoth 这个其实就是上面两个的合成,动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态

关于速度CAMediaTimingFunction 控制的四种情况

  • kCAMediaTimingFunctionLinear(线性):匀速,给你一个相对静态的感觉

  • kCAMediaTimingFunctionEaseIn(渐进):动画缓慢进入,然后加速离开

  • kCAMediaTimingFunctionEaseOut(渐出):动画全速进入,然后减速的到达目的地

  • kCAMediaTimingFunctionEaseInEaseOut(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。

属性动画

从上图中我们知道,属性动画是继承自核心动画,在其API中我们可以看到有如下函数和属性

+ (instancetype)animationWithKeyPath:(nullable NSString *)path;

@property(nullable, copy) NSString *keyPath;

其中都有keyPath,这又是什么呢?这就是属性动画与动画组和转场动画不同之处。通过指定CALayer的一个属性名称为keyPath(NSString类型),并且对CALayer的这个属性的值进行修改,达到相应的动画效果。比如,指定@"opacity"keyPath,就修改CALayeropacity属性的值,以达到透明度变化的动画效果

下面我们列举一些常用的animationWithKeyPath

常用值 说明 使用方式
transform 3D变换 [NSValue valueWithCATransform3D:CATransform3DMakeScale(0.5, 0.5, 0)],直接进行3D变换
transform.scale 缩放 @(1.5) ,放大1.5倍
transform.scale.x 宽度缩放 @(1.5) ,宽放大1.5倍
transform.scale.y 高度缩放 @(1.5) ,高放大1.5倍
transform.rotation.x 围绕x轴旋转 @(M_PI) ,x轴旋转180度
transform.rotation.y 围绕y轴旋转 @(M_PI) ,y轴旋转180度
transform.rotation.z 围绕z轴旋转 @(M_PI) ,z轴旋转180度
position 位置(中心点的改变) [NSValue valueWithCGPoint:CGPointMake(100, 100)],中心点变为(100,100)
opacity 透明度 @(0.5) ,透明度变为0.5
bounds 大小的改变 中心点保持不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)],大小变为(300,300)
cornerRadius 圆角的设置 @(5) ,圆角设置为5
backgroundColor 背景颜色变换 (id)[UIColor redColor].CGColor,背景改为红色
contents 可以改变layer展示的图片 (id)[UIImage imageNamed:@"12.png"].CGImage,将UIView的展示图片改为12.png
strokeStart 从起始点开始变化 fromValue = 0toValue = 1,为CAShapeLayer的属性
strokeEnd 从结束的位置开始变化 fromValue = 1toValue = 0.5,为CAShapeLayer的属性
path 根据路径来改变 fromValue = (__bridge id)(start.CGPath);toValue = (__bridge id)((end.CGPath))
基础动画

基础动画是继承自属性动画,所以在使用的时候,我们最主要的就是通过属性来控制动画,比如设置初始值、结束值,当然还有核心动画的其他属性。

- (void)showAnimation
{
CAShapeLayer * circle = [CAShapeLayer layer];
circle.frame = self.view.bounds; //
UIBezierPath * circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(CGRectGetMidX(self.view.bounds), CGRectGetMidY(self.view.bounds)) radius:self.normalSize.width/2 -1 startAngle:0 endAngle:2*M_PI clockwise:YES]; circle.path = circlePath.CGPath;
circle.strokeColor = [UIColor blueColor].CGColor;
circle.fillColor = nil;
[self.view.layer addSublayer:circle]; //通过圆的strokeStart 改变来进行改变
CABasicAnimation * strokeStartAnimation = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
strokeStartAnimation.fromValue = @(0.2);
strokeStartAnimation.toValue = @(0); //通过圆的strokeEnd 改变来进行改变
CABasicAnimation * strokeEndAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
strokeEndAnimation.fromValue = @0.5;
strokeEndAnimation.toValue = @(1.0); //通过圆的transform.rotation.z 改变来进行改变
CABasicAnimation * rotationAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
rotationAnimation.fromValue = @(0);
rotationAnimation.toValue = @(-M_PI * 2); //组合动画
CAAnimationGroup * group = [CAAnimationGroup animation];
group.duration = 5;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
group.animations = @[strokeStartAnimation,strokeEndAnimation,rotationAnimation];
[circle addAnimation:group forKey:nil]; }

在上面的基础动画代码中,我只用了最基础的两个属性,fromValue toValue ,而其它属性呢?由于后面用到了动画组,所以讲其它属性在动画组进行了设置。[circle addAnimation:group forKey:nil];这句代码中,key我设置的为nil,如果不设置为nil的时候,是什么意思呢?这个其实就是我们的动画设置了一个key,可以用来区别是哪一个动画,在后面我会举例说明。

上面代码对应的效果如下:

关键帧动画

关键帧动画也是属性动画,与基础动画最主要不同的是在两个参数上,NSArray *valuesCGPathRef path,通过这个我们可以知晓,关键帧动画可以设置多个控制状态

如下:

//用value的方式进行展示动画
- (void)showKeyFrameAnimationWithValues
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
NSValue *key1 = [NSValue valueWithCGPoint:_beginPoint];
NSValue *key2 = [NSValue valueWithCGPoint:CGPointMake(100, 100)];
NSValue *key3 = [NSValue valueWithCGPoint:CGPointMake(150, 50)];
NSValue *key4 = [NSValue valueWithCGPoint:CGPointMake(300, 250)];
animation.values = @[key1,key2,key3,key4];
animation.duration = 5.0;
animation.delegate = (id)self;
// animation.autoreverses = true;//是否按路径返回
// animation.repeatCount = HUGE;//是否重复执行
animation.removedOnCompletion = NO;//执行后移除动画
animation.fillMode = kCAFillModeForwards; //存储位置
[animation setValue:key4 forKey:@"keyframeAnimationLocation"]; [_fishImageView.layer addAnimation:animation forKey:@"keyframeAnimation_fish"];
}

而且还可以设置路径,这也是其最大的特点

如下:

//用CGPathRef的方式进行展示动画
- (void)showKeyFrameAnimationWithPath
{
CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"]; UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:_fishImageView.layer.position];
//三次贝塞尔曲线
[path addCurveToPoint:CGPointMake(300, 200) controlPoint1:CGPointMake(150, 400) controlPoint2:CGPointMake(230, -100)]; animation.path = path.CGPath;
animation.duration = 5.0;
animation.delegate = (id)self;
[_fishImageView.layer addAnimation:animation forKey:@"keyframeAnimation_path_fish"];
}

效果如下,这里就暂时只给出values的效果

在上面的两个方法中,对layer设置了两个不同的key,分别为keyframeAnimation_fishkeyframeAnimation_path_fish

前面我提到过,通过这个可以判断是哪一种动画,这里我们在动画结束的地方进行区分一下

- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag
{
if ([anim isEqual:[_fishImageView.layer animationForKey:@"keyframeAnimation_fish"]])
{
// [CATransaction begin];
// //禁用隐式动画
// [CATransaction setDisableActions:YES]; _fishImageView.layer.position = [[anim valueForKey:@"keyframeAnimationLocation"] CGPointValue]; // //提交事务
// [CATransaction commit];
}
else if ([anim isEqual:[_fishImageView.layer animationForKey:@"keyframeAnimation_path_fish"]])
{ }
}
动画组

动画组其实很简单,就是将许多动画组合在一起

在上面的基础动画中,我也用到了动画组,下面再贴上一组动画组合效果

//发射
- (void)launchAnimation
{
CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.scale.y"];
animation1.fromValue = @(1.0);
animation1.toValue = @(1.5); CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale.x"];
animation2.fromValue = @(1.0);
animation2.toValue = @(1.5); CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"position"];
animation3.fromValue = [NSValue valueWithCGPoint:_ballLayer.position];
animation3.toValue = [NSValue valueWithCGPoint:CGPointMake(self.view.frame.size.width - (30 * 1.3)/2.0 , _ballLayer.position.y - 200)]; CAAnimationGroup *anima = [CAAnimationGroup animation];
anima.animations = @[animation1, animation2,animation3];
anima.duration = 1.0;
anima.delegate = (id)self;
anima.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
anima.fillMode = kCAFillModeForwards;
anima.removedOnCompletion = NO; [_ballLayer addAnimation:anima forKey:@"group_launch"];
}

在后面的demo里有完整的代码,这里只是截取了部分代码

效果如下:

转场动画

在了解转场动画之前,我们先了解其两个参数,通过这些参数,我们就能很清楚的了解其效果

  • type转场类型
转场动画类型 说明 常量 是否支持方向设置
公开API
fade 淡出 kCATransitionFade
movein 新视图移动到旧视图上面 kCATransitionMoveIn
push 新视图退出旧视图 kCATransitionPush
reveal 移开旧视图显示新的 kCATransitionReveal
私有API 苹果未公开的类型,但是目前还是可以用的 私有API只能通过下面的字符串进行访问
cube 立体翻转
oglFlip 翻转
suckEffect 收缩
rippleEffect 水滴波纹效果
pageCurl 向上翻页效果
pageUnCurl 向下翻页效果
cameraIrisHollowOpen 摄像头打开效果
cameraIrisHollowClose 摄像头关闭效果
  • subtype动画子类型
属性 说明
kCATransitionFromRight 从右
kCATransitionFromLeft 从左
kCATransitionFromTop 从顶部
kCATransitionFromBottom 从底部

在了解上面两个属性后,对应转场动画,就差不多了

部分代码如下

- (void)transition:(BOOL)next
{
CATransition *transition = [CATransition animation];
transition.type = @"cube";
if (next)
{
transition.subtype = kCATransitionFromLeft;
}
else
{
transition.subtype = kCATransitionFromRight;
}
transition.duration = 1.0; _imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"%ld.jpg",(long)_currentIndex]];
[_imageView.layer addAnimation:transition forKey:@"transitionAnimation"];
}

效果如下

弹簧动画

弹簧动画是在iOS 9后才出现的,在这之前,我们可以通过下面的方法来实现

[UIView animateWithDuration:5.0 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:1.0 options:UIViewAnimationOptionCurveLinear animations:^{

    } completion:nil];

iOS 9后苹果公开了这一API,我们先对其中的属性进行分析,因为代码中有注释,所以就直接贴一部分代码

      //质量,影响图层运动时的弹簧惯性,质量越大,弹簧拉伸和压缩的幅度越大
positionAnimation.mass = 0.1;
//阻尼系数,阻止弹簧伸缩的系数,阻尼系数越大,停止越快
positionAnimation.damping = 2;
//刚度系数(劲度系数/弹性系数),刚度系数越大,形变产生的力就越大,运动越快
positionAnimation.stiffness = 50;
//初始速率,动画视图的初始速度大小
//速率为正数时,速度方向与运动方向一致,速率为负数时,速度方向与运动方向相反
positionAnimation.initialVelocity = -10;

关于弹簧动画,我也写了一个例子,效果如下

项目文件截图:

写在最后

关于核心动画,差不多就简单的介绍这么点,如有什么不对的还望各位多多指教,不甚感激。iOS 核心动画 Core Animation浅谈

代码地址如下:
http://www.demodashi.com/demo/11603.html

注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权

iOS 核心动画 Core Animation浅谈的更多相关文章

  1. 核心动画——Core Animation

    一. CALayer (一). CALayer简单介绍 在iOS中,你能看得见摸得着的东西基本上都是UIView,比方一个button.一个文本标签.一个文本输入框.一个图标等等.这些都是UIView ...

  2. iOS开发之核心动画(Core Animation)

    1.概述 Core Animation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.framework和引入对应的框架< ...

  3. iOS 核心动画

    核心动画(Core Animation) : •CoreAnimation是一组非常强大的动画处理API,使用它能做出非常炫丽的动画效果,而且往往是事半功倍,使用它需要先添加QuartzCore.fr ...

  4. IOS 动画专题 --iOS核心动画

    iOS开发系列--让你的应用“动”起来 --iOS核心动画 概览 通过核心动画创建基础动画.关键帧动画.动画组.转场动画,如何通过UIView的装饰方法对这些动画操作进行简化等.在今天的文章里您可以看 ...

  5. iOS核心动画详解(一)

    前言 这篇文章主要是针对核心动画(Core Animation)的讲解,不涉及UIView的动画.因为内容较多,这篇文章会分为几个章节来进行介绍.本文主要是介绍核心动画的几个类之间的关系和CAAnim ...

  6. IOS 核心动画(Core Animation)

    Core Animation,中文翻译为核心动画,它是一组非常强大的动画处理API,使用它 能做出非常炫丽的动画效果,而且往往是事半功倍.也就是说,使用少量的代码就 可以实现非常强大的功能. Core ...

  7. iOS核心动画高级技巧之CALayer(一)

    iOS核心动画高级技巧之CALayer(一) iOS核心动画高级技巧之图层变换和专用图层(二)iOS核心动画高级技巧之核心动画(三)iOS核心动画高级技巧之性能(四)iOS核心动画高级技巧之动画总结( ...

  8. iOS核心动画(专用图层篇)

    之前的文章我们了解了Core Animation中图层的一些基础知识.没有看过的传送门在此: iOS核心动画基础篇 那么在了解了这些基础知识之后,接下来进入专用图层的了解 苹果为了方便和性能,封装了几 ...

  9. iOS核心动画高级技巧 - 8

    iOS核心动画高级技巧 - 1 iOS核心动画高级技巧 - 2 iOS核心动画高级技巧 - 3 iOS核心动画高级技巧 - 4 iOS核心动画高级技巧 - 5 iOS核心动画高级技巧 - 6 iOS核 ...

随机推荐

  1. [BZOJ3585]mex 主席树

    3585: mex Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1252  Solved: 639[Submit][Status][Discuss] ...

  2. KO工作原理及带来的好处

    介绍 Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,响应显示和编辑用户界面的JavaScript类库.任何时候如果你的UI需要自动更新(比如:更新依赖于用户的行 ...

  3. std::string 字符串大小写转换(转)

    该问题归结为std::transform函数的使用 函数原型 template < class InputIterator, class OutputIterator, class UnaryO ...

  4. POJ 1127 Jack Straws (计算几何)

    [题目链接] http://poj.org/problem?id=1127 [题目大意] 在二维平面中,给出一些木棍的左右端点,当木棍相交或者间接相交时 我们判断其连通,给出一些询问,问某两个木棍是否 ...

  5. [CF983D]Arkady and Rectangles

    题意:按顺序在坐标轴上画$n$个颜色为$1\cdots n$的矩形(数字大的颜色覆盖数字小的颜色),问最后能看到多少种颜色 先离散化,然后考虑扫描线+线段树 线段树每个节点用一个set存覆盖整个区间的 ...

  6. [Contest20180313]灵大会议

    为了方便才用lct,没想到最后要加读入优化才能过... 有一个结论就是在一条链上,如果能找到一个点使得这个点划分链左右两边的树节点权值和最相近,那么这个点就是答案 用lct维护,每个splay节点存树 ...

  7. 1.2(java学习笔记)类与对象

      对象:是指具体的事物.比如学生 张三,老师 李四,代表一个单一的个体. 比如 学生 张三,这时张三就是具体的对象. 类:将对象中共有特征抽象出,可以理解为某种特性的集合. 世界上的事物可以分解成一 ...

  8. 如何让vs2017 EF实体生成支持Mysql 和 Oracle?

    1.Mysql 安装   MySql Connector/Net        https://dev.mysql.com/downloads/connector/net/ 安装    mysql f ...

  9. 转载:win10 下安装32位的Oracle 11g 客户端(问题:环境不满足最低要求)

    1. 在安装文件夹中,找 stage->cvu->cvu_prereq.xml文件. 2. 用记事本打开其xml文件进行编辑,加下面一段保存. <OPERATING_SYSTEM R ...

  10. ZooKeeper本身是一个分布式应用程序,为写入分布式应用程序提供服务。

    ZooKeeper本身是一个分布式应用程序,为写入分布式应用程序提供服务. 作为ZooKeeper架构的一部分的每个组件在下表中进行了说明. 部分 描述 Client(客户端) 客户端,我们的分布式应 ...