CoreAnimati
CAAnimation:核心动画的基础类,不能直接使用,负责动画运行时间、速度的控制,本身实现了CAMediaTiming协议。
CAPropertyAnimation:属性动画的基类(通过属性进行动画设置,注意是可动画属性),不能直接使用。
CAAnimationGroup:动画组,动画组是一种组合模式设计,可以通过动画组来进行所有动画行为的统一控制,组中所有动画效果可以并发执行。
CATransition:转场动画,主要通过滤镜进行动画效果设置。
CABasicAnimation:基础动画,通过属性修改进行动画参数控制,只有初始状态和结束状态。
CAKeyframeAnimation:关键帧动画,同样是通过属性进行动画参数控制,但是同基础动画不同的是它可以有多个状态控制。
基础动画、关键帧动画都属于属性动画,就是通过修改属性值产生动画效果,开发人员只需要设置初始值和结束值,中间的过程动画(又叫“补间动画”)由系统自动计算产生。和基础动画不同的是关键帧动画可以设置多个属性值,每两个属性中间的补间动画由系统自动完成,因此从这个角度而言基础动画又可以看成是有两个关键帧的关键帧动画。
关系图1. CABasicAnimation - 基础动画
下面是个scale 缩放的例子:
CABasicAnimation *scaleAnimation = [CABasicAnimation
animationWithKeyPath:@"transform.scale"];
// 从1倍放大到1.5倍
scaleAnimation.fromValue = @(1.0);
scaleAnimation.toValue = @(1.5);
//scaleAnimation.beginTime = CACurrentMediaTime()+2; //动画延迟执行时间
scaleAnimation.autoreverses = YES; //设置这个属性表示完成动画后会回到执行动画之前的状态
//这两个属性要一起设置,表示保持执行动画后的样子不变(要想fillMode有效,最好设置removedOnCompletion=NO)
//scaleAnimation.removedOnCompletion = NO;
//scaleAnimation.fillMode = kCAFillModeForwards;
//重复次数
//scaleAnimation.repeatCount = 1;
//动画时间
scaleAnimation.duration = 0.8;
scaleAnimation.delegate = self; //代理(CAAnimationDelegate)
[self.customView.layer addAnimation:scaleAnimation forKey:@"scaleAnimation"];
暂停/开始 动画:
-(void)animationPause{
//取得指定图层动画的媒体时间,后面参数用于指定子图层,这里不需要
CFTimeInterval interval=[self.customView.layer convertTime:CACurrentMediaTime() fromLayer:nil];
//设置时间偏移量,保证暂停时停留在旋转的位置
self.customView.layer.timeOffset = interval;
//速度设置为0,暂停动画
self.customView.layer.speed=0;
}
-(void)animationResume{
//获得暂停的时间
CFTimeInterval beginTime= CACurrentMediaTime()- self.customView.layer.timeOffset;
//设置偏移量
self.customView.layer.timeOffset=0;
//设置开始时间
self.customView.layer.beginTime=beginTime;
//设置动画速度,开始运动
self.customView.layer.speed=1.0;
}
代理就两个回调:
- (void)animationDidStart:(CAAnimation *)anim;
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
解释下 fillMode 属性以及 "animationWithKeyPath:" 这个字符串参数:
fillMode 有这四个类型:
/**
kCAFillModeRemoved 这个是默认值,也就是说当动画开始前和动画结束后,动画对layer都没有影响,动画结束后,layer会恢复到之前的状态?.
kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.
kCAFillModeBackwards 在动画开始前,你只要将动画加入了一个layer,layer便立即进入动画的初始状态并等待动画开始. 你可以这样设定测试代码,将一个动画加入一个layer的时候延迟5秒执行.然后就会发现在动画没有开始的时候,只要动画被加入了layer,layer便处于动画初始状态 ( 这里表示不是很理解)
kCAFillModeBoth 这个其实就是上面两个的合成.动画加入后开始之前,layer便处于动画初始状态,动画结束后layer保持动画最后的状
*/
"animationWithKeyPath:" 传的参数不能错,比如上面的例子是缩放,就要写 "transform.scale",如果想要设置水平或者上下移动就需要 "transform.translation.x"或者 "transform.translation.y"
具体参照下图:
可设置的属性-12.CAAimationGroup - 动画组合
相比于CABasicAnimation 就多了一个 用来存放动画对象的 animations 数组属性。
下面是一个缩放平移绕y轴旋转的组合动画:
CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
scaleAnimation.fromValue = @(1);
scaleAnimation.toValue = @(0.5);
scaleAnimation.autoreverses = YES;
CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
moveAnimation.fromValue = @(0);
moveAnimation.toValue = @(100);
moveAnimation.autoreverses = YES;
CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
rotateAnimation.fromValue = @(0);
rotateAnimation.toValue = @(2*M_PI);
rotateAnimation.autoreverses = YES;
CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
groupAnnimation.duration = 2;
groupAnnimation.autoreverses = YES;
groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];
groupAnnimation.repeatCount = MAXFLOAT;
[self.customView.layer addAnimation:groupAnnimation forKey:@"groupAnnimation"];
3.CAKeyframeAnimation - 关键帧动画
下面是一个利用 CAKeyframeAnimation 改变View 背景色的 小例子:
CAKeyframeAnimation *color = [CAKeyframeAnimation animationWithKeyPath:@"backgroundColor"];
color.values = @[(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor blueColor].CGColor];
color.keyTimes = @[@0, @0.4,@0.6, @0.8,@1.1];
color.repeatCount = 1;
color.autoreverses = YES;
color.duration = 3;
[self.customView.layer addAnimation:color forKey:@"color"];
简单的介绍下常用的属性:
values:就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 .
keyTimes:各个关键帧的时间控制。
path:可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将被忽略 。
timingFunctions: 这个属性用以指定时间函数,类似于运动的加速度。
(1) kCAMediaTimingFunctionLinear//线性
(2) kCAMediaTimingFunctionEaseIn//淡入
(3) kCAMediaTimingFunctionEaseOut//淡出
(4) kCAMediaTimingFunctionEaseInEaseOut//淡入淡出
(5) kCAMediaTimingFunctionDefault//默认
calculationMode: 该属性决定了物体在每个子路径下是跳着走还是匀速走。
(1) const kCAAnimationLinear//线性,默认
(2) const kCAAnimationDiscrete//离散,无中间过程,但keyTimes设置的时间依旧生效,物体跳跃地出现在各个关键帧上
(3) const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效
(4) const kCAAnimationCubic//平均,同上
(5) const kCAAnimationCubicPaced//平均,同上
下面这个是 CAKeyframeAnimation 配合贝塞尔曲线 的简单例子:
CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation animationWithKeyPath:@"position"];
//2.设置路径
//绘制贝塞尔曲线
UIBezierPath *path = [[UIBezierPath alloc] init];
[path moveToPoint:CGPointMake(self.customView.layer.position.x, self.customView.layer.position.y)];
[path addCurveToPoint:CGPointMake(55, 400) controlPoint1:CGPointMake(10, 300) controlPoint2:CGPointMake(160, 280)];
keyframeAnimation.path=path.CGPath;//设置path属性
//设置其他属性
keyframeAnimation.duration=8.0;
keyframeAnimation.beginTime=CACurrentMediaTime();//设置延迟2秒执行
keyframeAnimation.removedOnCompletion = NO;
keyframeAnimation.fillMode = kCAFillModeForwards;
//3.添加动画到图层,添加动画后就会执行动画
[self.customView.layer addAnimation:keyframeAnimation forKey:@"KCKeyframeAnimation_Position"];
4. CATransition - 转场动画
简单的例子:
CATransition *transition = [CATransition animation];
transition.duration = 2.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
transition.type = kCATransitionMoveIn;
transition.subtype = kCATransitionFromRight;
[self.customView.layer addAnimation:transition forKey:@"animation"];
简单的介绍下 几个属性:
type : 有四种类型:
kCATransitionFade //交叉淡化过渡
kCATransitionMoveIn //移动覆盖原图
kCATransitionPush //新视图将旧视图推出去
kCATransitionReveal //底部显出来
subType: 同样四种
kCATransitionFromRight;
kCATransitionFromLeft(默认值)
kCATransitionFromTop;
kCATransitionFromBottom
参考链接: http://www.cnblogs.com/wengzilin/p/4256468.html
http://www.bubuko.com/infodetail-1000965.html