原文
http://www.cocoachina.com/ios/20160517/16290.html
概念
Core Animation(核心动画)是一组功能强大、效果华丽的动画API,无论在iOS系统或者在你开发的App中,都有大量应用。
核心动画位于UIKit的下一层,相比UIView动画,它可以实现更复杂的动画效果。
核心动画作用在CALayer(Core animation layer)上,CALayer从概念上类似UIView,我们可以将UIView看成是一种特殊的CALayer(可以响应事件)。
实际上,每一个view都有其对应的layer,这个layer是root layer:
@property(nonatomic,readonly,strong) CALayer *layer;
给view加上动画,本质上是对其layer进行操作,layer包含了各种支持动画的属性,动画则包含了属性变化的值、变化的速度、变化的时间等等,两者结合产生动画的过程。
核心动画和UIView动画的对比:UIView动画可以看成是对核心动画的封装,和UIView动画不同的是,通过核心动画改变layer的状态(比如position),动画执行完毕后实际上是没有改变的(表面上看起来已改变)。
总体来说核心动画的优点有:
- 性能强大,使用硬件加速,可以同时向多个图层添加不同的动画效果
- 接口易用,只需要少量的代码就可以实现复杂的动画效果。
- 运行在后台线程中,在动画过程中可以响应交互事件(UIView动画默认动画过程中不响应交互事件)。
使用实例
- (void)startAnimation
{
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
anim.duration = 1.5; // 动画持续1.5s
anim.repeatCount = HUGE_VALF; //动画重复次数 default is 1
// anim.beginTime = 1.0f;// 动画延迟时间 default is 0
//动画执行的过程中 先快后慢 先慢后快 匀速 等方式完成动画
// anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
anim.autoreverses = YES; //动画结束的时候是否要按原来返回到原来的状态
anim.fromValue = @1.0f; //动画改变起始值
anim.toValue = @0.5; //动画改变结束值
// anim.byValue 和初始状态相比的改变量
// anim.delegate = self;//delegate 可以监听到动画开始和动画结束
// 动画结束的时候,保持结束时的状态
anim.removedOnCompletion = NO;
// 始终保持最新的效果
anim.fillMode = kCAFillModeForwards;
[self.tipImageView.layer addAnimation:anim forKey:@"key"];
}
核心动画类的常用属性
keyPath:可以指定keyPath为CALayer的属性值,并对它的值进行修改,以达到对应的动画效果,需要注意的是部分属性值是不支持动画效果的。
CATransform3D Key Paths : (example)transform.rotation.z
//rotation.x 上下翻转
//rotation.y 左右翻转
//rotation.z 中心点旋转
//rotation 旋轉
//scale.x
//scale.y
//scale.z
//scale 缩放
//translation.x
//translation.y
//translation.z
//translation 平移
//CGPoint Key Paths : (example)position.x
//x 横向平移
//y 纵向平移
//CGRect Key Paths : (example)bounds.size.width
//origin.x
//origin.y
//origin
//size.width 宽度变化
//size.height 高度变化
//size 大小变化
//opacity 透明度
//backgroundColor 背景色渐变
//cornerRadius 变为圆角
//borderWidth 边框
//contents 内容替换(view1变为view2)
//Shadow Key Path:
//shadowColor 加阴影颜色
//shadowOffset 加阴影大小
//shadowOpacity 加阴影透明度
//shadowRadius 加阴影圆角
duration:动画的持续时间
repeatCount:动画的重复次数,default is 1,始终播放使用HUGE_VALF
beginTime:动画延迟执行时间,default is 0
timingFunction:动画的时间节奏控制,使用[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]创建实例
timingFunctionName的enum值如下:
kCAMediaTimingFunctionLinear 匀速
kCAMediaTimingFunctionEaseIn 慢进
kCAMediaTimingFunctionEaseOut 慢出
kCAMediaTimingFunctionEaseInEaseOut 慢进慢出
kCAMediaTimingFunctionDefault 默认值(慢进慢出)
fillMode:视图在非Active时的行为,重要,某些情况下动画不运行的原因
CA_EXTERN NSString * const kCAFillModeForwards
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeBackwards
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeBoth
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
CA_EXTERN NSString * const kCAFillModeRemoved
CA_AVAILABLE_STARTING (10.5, 2.0, 9.0, 2.0);
key:[self.tipImageView.layer addAnimation:anim forKey:@"key"];key值在某些情况下必填,出现过在collectionViewCell中添加动画时因为key值为空造成的个别cell动画停止。
delegate:可以监听到动画开始和动画结束
代理方法如下:
- (void)animationDidStart:(CAAnimation *)anim; //动画开始
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //动画结束
CABasicAnimation
CABasicAnimation可以设定keyPath的起点,终点的值,动画会沿着设定点进行移动,CABasicAnimation可以看成是只有两个关键点的特殊的CAKeyFrameAnimation。
- (void)position {
CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}
CABasicAnimation只能实现系统定义的一些简单动画。
实例,一组绕某一点旋转的动画实现:
- (void)addAnimation
{
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
anim.toValue = [NSNumber numberWithFloat:-M_PI_4 / 2];
anim.duration = 10;
anim.autoreverses = YES;
anim.removedOnCompletion = NO;
anim.fillMode = kCAFillModeForwards;
anim.repeatCount = MAXFLOAT; //如果这里想设置成一直自旋转,可以设置为MAXFLOAT,否则设置具体的数值则代表执行多少次
[self setAnchorPoint:CGPointMake(0.84, 0.186) forView:self.sunshineView];
[self.sunshineView.layer addAnimation:anim forKey:@"anim"];
}
其中,绕某一点旋转要设置该点为AnchorPoint(锚点),锚点范围为(0.0, 0.0)--(1.0,1.0),在IOS中右上为(1.0,0.0)。同时,在设置锚点的同时,会造成原视图的位移,原因未明,所以要手动偏移回去。使用如下代码手动设置锚点。
- (void)setAnchorPoint:(CGPoint)anchorPoint forView:(UIView *)view
{
CGPoint oldOrigin = view.frame.origin;
view.layer.anchorPoint = anchorPoint;
CGPoint newOrigin = view.frame.origin;
CGPoint transition;
transition.x = newOrigin.x - oldOrigin.x;
transition.y = newOrigin.y - oldOrigin.y;
view.center = CGPointMake(view.center.x - transition.x, view.center.y - transition.y);
}
CAKeyframeAnimation
可以设定keyPath起点、中间关键点(不止一个)、终点的值,每一帧所对应的时间,动画会沿着设定点进行移动。
CAKeyframeAnimation的重要属性:
values:关键帧数组对象,里面每一个元素即为一个关键帧,动画会在对应的时间段内,依次执行数组中每一个关键帧的动画。包括起始点和终点,对象类型。
path:动画路径对象,可以指定一个路径,在执行动画时路径会沿着路径移动,Path在动画中只会影响视图的Position。
keyTimes:设置关键帧对应的时间点,范围:0-1。如果没有设置该属性,则每一帧的时间平分。进度0到0.2到0.6到1.0,类似这样
实现轮播的一段简易代码:
CAKeyframeAnimation *anim1 = [CAKeyframeAnimation animationWithKeyPath:@"position.x"];
anim1.repeatCount = HUGE_VALF;
anim1.duration = animtionDuration;
anim1.values = @[@(self.frame.size.width/2),@(- self.frame.size.width/2),@(self.frame.size.width*1.5),@(self.frame.size.width/2)];
anim1.keyTimes = @[[NSNumber numberWithFloat:0.0],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:0.5],[NSNumber numberWithFloat:1.0]];
anim1.removedOnCompletion = NO;
// 始终保持最新的效果
anim1.fillMode = kCAFillModeForwards;
[self.cloudyView1.layer addAnimation:anim1 forKey:@"anim1"];
CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"position.x"];
anim2.repeatCount = HUGE_VALF;
anim2.toValue = @(- self.frame.size.width);
anim2.duration = animtionDuration;
anim2.autoreverses = YES;
anim2.removedOnCompletion = NO;
// 始终保持最新的效果
anim2.fillMode = kCAFillModeForwards;
[self.cloudyView2.layer addAnimation:anim2 forKey:@"anim2"];
抖动动画
+ (void)shakeView:(UIView*)viewToShake
{
CGFloat t =4.0;
CGAffineTransform translateRight =CGAffineTransformTranslate(CGAffineTransformIdentity, t,0.0);
CGAffineTransform translateLeft =CGAffineTransformTranslate(CGAffineTransformIdentity,-t,0.0);
viewToShake.transform = translateLeft;
[UIView animateWithDuration:0.07 delay:0.0 options:UIViewAnimationOptionAutoreverse | UIViewAnimationOptionRepeat animations:^{
if (@available(iOS 12.0, *)) { //从顶部开始
[UIView modifyAnimationsWithRepeatCount:4.0 autoreverses:YES animations:^{
viewToShake.transform = translateRight;
}];
} else {
[UIView setAnimationRepeatCount:4.0];
viewToShake.transform = translateRight;
}
} completion:^(BOOL finished){
if(finished){
[UIView animateWithDuration:0.05 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
viewToShake.transform =CGAffineTransformIdentity;
} completion:NULL];
}
}];
}
重要:
+ (void)setAnimationRepeatCount:(float)repeatCount API_DEPRECATED("Use the block-based animation API instead", ios(2.0, 13.0));
iOS13开始放弃使用repeatCount等方法。使用:
modifyAnimationsWithRepeatCount
(iOS12+)