iOS - 核心动画
2015-08-26 本文已影响954人
Mitchell
作者:Mitchell
一、基本概念
- CoreAnimation 可用在 Mac OS X和iOS平台
- CoreAnimation 的动画执行过程都是在后台操作的,不会阻塞主线程。
- CoreAnimation 是直接作用在CALayer 上的,并不是UIView。
- 用一张图来简要介绍一下核心动画成员之间的关系。
- 为何要封装成这么多的类?
- 体现了面向对象的特性,就是每个对象都控制着不同的特性,每个类控制动画一方面。
二、基本动画
-
CAAnimation:
- 是多有动画对象的父类,负责控制动画的持续时间和速度,是个抽象类,不能直接使用。
- 属性的简单说明:
-
duration
:动画的持续时间 -
repeatCount
:重复次数,无线循环可设置为HUGE_VALF或者MAXFLOAT -
removeOnCompletion
:默认为YES,代表动画执行完毕后就从图层上移除,图形会恢复到动画执行前的状态,如果想让图层保持显示动画执行后的状态,那就设置为NO,不过还要设置fillMode为kCAFillMOdeForwards。
-
fillModes
:决定当前对象在非 active 时间段的行为。比如动画开始之前或者动画结束之后 -
beginTime
:可以用来设置动画延迟执行的时间,如果想延迟10S,就设置为CACurrentMediaTime()+2
。 CACurrentMediaTime()为图层的当前时间 -
timingFunction
:速度控制函数,控制画运行的节奏 -
delegate
:动画代理
-
- fillMode 属性值(
要想 fillMode 有效,最好设置removedOnComletion = NO
)-
kCAFillModeRemoved
这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态 -
kCAFillModeForwards
当动画结束后,layer会一直保持着动画最后的状态 -
kCAFillModeBackwards
在动画开始前,只需要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始。 -
kCAFillModeBoth
这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状态
-
- 速度控制函数(CAMediaTimingFunction)
-
kCAMediaTimingFunctionLinear
(线性):匀速,给你一个相对静态的感觉 -
kCAMediaTimingFunctionEaseIn
(渐进):动画缓慢进入,然后加速离开 -
kCAMediaTimingFunctionEaseOut
(渐出):动画全速进入,然后减速的到达目的地 -
kCAMediaTimingFunctionEaseInEaseOut
(渐进渐出):动画缓慢的进入,中间加速,然后减速的到达目的地。这个是默认的动画行为。
-
-
CAPropertyAnimation
- 是 CAAnimation 的子类,也是抽象类,要想创建动画对象,应该使用它的两个子类:
- CABasicAnimation
- CAKeyframeAnimation
- keyPath:通过指定 CALayer 的属性名称keyPath,对layer的这个属性的值进行修改,达到相应的动画效果。比如
@“position”
是修改 position 达到移动的效果。
- 是 CAAnimation 的子类,也是抽象类,要想创建动画对象,应该使用它的两个子类:
-
CABasicAniamtion
- 基本动画是 CAPropertyAnimation 的子类
- 属性说明
-
fromValue
:keyPath相应属性的初始值 -
toValue
:keyPath相应属性的结束值
-
三、关键帧动画
-
CAKeyframeAnimation
- 关键帧动画,是CAPropertyAnimation的子类
- 与 CABasicAniamtion 的区别是 CABasicAniamtion 是从fromValue 到 toValue 两个值的变化,而 CAKeyframeAnimation 可以使用 NSArray 来保存这些数值。
- 属性说明:
-
values
:NSArray 对象,里面的元素就是“关键帧”
,动画会在指定的时间内,依次显示 values 数组中的每一个关键帧。 -
path
:可以设置CGPathRef、CGMutablePathRef,让图层按照轨迹移动,path只对CALayer的 anchorPoint 和 point 起作用。如果设置了 path, 那么values将被忽略
。 -
keyTimes
:关键帧指定对应的时间点,取值范围从0~1,keyTimes中的每一个时间值对应values中的每一帧,如果没有设置,时间是平分的。
-
- CABasicAniamtion 可看做 只有两个关键帧的 CAKeyframeAnimation。
四、动画组
-
CAAnimationGroup
- 是 CAAnimation 的子类,可以保存一组动画对象,将 CAAnimationGroup 对象加入层之后,族中所有的动画对象可以
同时并发运行
。 - 属性说明:
-
animations
:保存一组动画对象的NSArray。 - 默认情况下,一组动画对象是同时运行的,
也可以通过设置动画对象的 beginTimer 属性来更改动画的开始时间
。
-
- 是 CAAnimation 的子类,可以保存一组动画对象,将 CAAnimationGroup 对象加入层之后,族中所有的动画对象可以
五、转场动画
-
CATransition
- 为层提供移出屏幕和移入屏幕的动画效果。
- UINavigationController就是通过CATransition实现了将控制器推入屏幕的动画效果
- 动画属性:
-
type
:动画过渡类型 -
subtype
:动画过渡方向 -
startProgress
:动画起点 -
endProgress
:动画终点
-
六、实际应用
- CABasicAnimation:
CABasicAnimation *ani3 = [CABasicAnimation animation];
ani3.keyPath = @"opacity";
ani3.fromValue = @1;
ani3.toValue = @0;
ani3.duration = 1;
ani3.repeatCount = MAXFLOAT;
ani3.removedOnCompletion = NO;
ani3.fillMode = kCAFillModeBackwards;
- CAKeyframeAnimation
- 按照路径移动
CAKeyframeAnimation* ani = [CAKeyframeAnimation animation];
ani.keyPath = @"position";
UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:_img.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
ani.path = path.CGPath;
ani.repeatCount = MAXFLOAT;
ani.duration = 2;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeBoth;
- 抖动
#define angle2Radion(angle) (angle / 180.0 * M_PI)
CAKeyframeAnimation*ani2 = [CAKeyframeAnimation animation];
ani2.keyPath = @"transform.rotation";
ani2.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
ani2.duration = 0.15;
ani2.repeatCount = MAXFLOAT;
- CAAnimationGroup
`注意`:每一次group循环内的动画仍旧是由每个动画各自的属性控制,`有一点需要注意就是duration这个属性,为了保证动画的连贯性,group的duration属性最好设置成与动画数组内时间最长的动画一致。`
//group
CAAnimationGroup *group = [CAAnimationGroup animation];
//位移
CAKeyframeAnimation* ani = [CAKeyframeAnimation animation];
ani.keyPath = @"position";
UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:_img.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
ani.path = path.CGPath;
ani.repeatCount = MAXFLOAT;
ani.duration = 2;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeBoth;
//抖动
CAKeyframeAnimation*ani2 = [CAKeyframeAnimation animation];
ani2.keyPath = @"transform.rotation";
ani2.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
ani2.duration = 0.15;
ani2.repeatCount = MAXFLOAT;
//透明度
CABasicAnimation *ani3 = [CABasicAnimation animation];
ani3.keyPath = @"opacity";
ani3.fromValue = @1;
ani3.toValue = @0;
ani3.duration = 1;
ani3.repeatCount = MAXFLOAT;
ani3.removedOnCompletion = NO;
ani3.fillMode = kCAFillModeBackwards;
//将动画添加进group
group.animations = @[ani,ani2,ani3];
group.duration = 2;
group.repeatCount = MAXFLOAT;
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeBackwards;
[_img.layer addAnimation:group forKey:nil];
- CATransition
// 界面切换的代码
static int i = 2;
NSString *imageName = [NSString stringWithFormat:@"%d",i];
_imageView.image = [UIImage imageNamed:imageName];
i++;
if (i > 3) {
i = 1;
}
// 只要切换界面 都可以使用转场动画
// 谁切换界面 就添加到谁上
// 转场动画代码必须和界面切换的代码放在一起
// 转场动画
CATransition *anim = [CATransition animation];
// 指定转场类型
anim.type = @"pageCurl";
// 设置转场的方向
anim.subtype = kCATransitionFromLeft;
// 设置动画的进度
anim.startProgress = 0;
anim.endProgress = 1;
anim.duration = 0.5;
[_imageView.layer addAnimation:anim forKey:nil];
七、核心动画与UIView动画的区别
核心动画的一切都是假象,并不会真是改变layer的值
UIView 真实改变属性才能有动画
- 使用场景:
- UIView 用在需要交互的地方
- 核心动画用在不需要交互的地方。