iOS动画 CABaseAnimation总结

来源：互联网发布：数据库原理及应用试题编辑：程序博客网时间：2024/05/22 15:02

最近有些无聊，无意之中又发现了一个好玩的东西，就是添加到购物车的动画~ 额，好高大上啊，相比我之前用的动画，感觉就是山寨与正品的差距啊 T T

这是我之前习惯用的 T T

原谅我之前年少无知 - -

    [UIView animateWithDuration:耗时 animations:^{        // 动画    } completion:^(BOOL finished) {        // 动画完成后要做的事    }];

1.CABasicAnimation

简单介绍下基本概念

CALayer

CALayer是个与UIView很类似的概念，同样有backgroundColor、frame等相似的属性，我们可以将UIView看做一种特殊的CALayer。但实际上UIView是对CALayer封装，在CALayer的基础上再添加交互功能。UIView的显示必须依赖于CALayer。我们同样可以跟新建view一样新建一个layer，然后添加到某个已有的layer上，同样可以对layer调整大小、位置、透明度等。一般来说，layer可以有两种用途：一是对view相关属性的设置，包括圆角、阴影、边框等参数；二是实现对view的动画操控。因此对一个view进行动画，本质上是对该view的.layer进行动画操纵。

CAAnimation

CAAnimation可以分为以下几类：

CABasicAnimation基础动画，通过设定起始点，终点，时间，动画会沿着你这设定点进行移动。可以看做特殊的CAKeyFrameAnimation

CAKeyframeAnimation关键帧动画，可定制度比CABasicAnimation高，也是本系列的接下来的内容

使用方法animationWithKeyPath:对 CABasicAnimation进行实例化，并指定Layer的属性作为关键路径进行注册。

CAAnimationGroup

CAAnimationGroup组动画，支持多个CABasicAnimation或者CAKeyframeAnimation动画同时执行

实例化

属性说明 Autoreverses 动画结束时是否执行逆动画，通俗的说就是回放- - Duration 动画执行的时间 RemovedOnCompletion 动画执行完毕后，图层会保持显示动画执行后的状态，图层动画属性被移除，图层的属性值还是动画执行前的初始值，并没有真正被改变。 FillMode 这个属性一般和 RemovedOnCompletion 配合使用，保持动画状态。其中kCAFillModeForwards 当动画结束后,layer会一直保持着动画最后的状态.此时将RemovedOnCompletion设为NO Speed 动画执行速度 RepeatCount 动画重复次数 RepeatDuration 动画重复执行的时间段 FromValue 动画执行的初始值 ToValue 动画执行的效果值 ByValue 所改变属性相同起始值的改变量 TimingFunction 控制动画的显示节奏系统提供五种值选择，分别是： 1.kCAMediaTimingFunctionLinear 线性动画 2.kCAMediaTimingFunctionEaseIn 先慢后快 3.kCAMediaTimingFunctionEaseOut 先快后慢 4.kCAMediaTimingFunctionEaseInEaseOut 先慢后快再慢 5.kCAMediaTimingFunctionDefault 默认，也属于中间比较快 BeginTime 可以用来设置动画延迟执行时间，若想延迟1s，就设置为CACurrentMediaTime()+1，CACurrentMediaTime()为图层的当前时间

解释：为什么动画结束后返回原状态？首先我们需要搞明白一点的是，layer动画运行的过程是怎样的？其实在我们给一个视图添加layer动画时，真正移动并不是我们的视图本身，而是 presentation layer 的一个缓存。动画开始时 presentation layer开始移动，原始layer隐藏，动画结束时，presentation layer从屏幕上移除，原始layer显示。这就解释了为什么我们的视图在动画结束后又回到了原来的状态，因为它根本就没动过。

简单小栗子

// 这的key是设置不同效果的动画，下面有整理CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];// 平移动画animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2 - 75)];animation.toValue = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2 - 75)];animation.duration = 3.0f;// 这的key可以区分不同不同的动画，在动画完成回调时可已经判断等操作[_demoView.layer addAnimation:anima forKey:@"positionAnimation"];

小栗子

动画开始和结束时的事件为了获取动画的开始和结束事件，需要实现协议

animation.delegate = self;//动画开始时- (void)animationDidStart:(CAAnimation *)anim{     if ([anim isEqual:[self.imageView.layer animationForKey:@"positionAnimation"]])     {         NSLog(@"平移动画执行了");    }}//动画结束时- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag{    //方法中的flag参数表明了动画是自然结束还是被打断,比如调用了removeAnimationForKey:方法或removeAnimationForKey方法，flag为NO，如果是正常结束，flag为YES。    NSLog(@"结束了");}

下面是一些常用的animationWithKeyPath值的总结

属性说明使用 transform.scale 比例转换 @(0.8) transform.scale.x 宽的比例 @(0.8) transform.scale.y 高的比例 @(0.8) transform.rotation.x 围绕x轴旋转 @(M_PI) transform.rotation.y 围绕y轴旋转 @(M_PI) transform.rotation.z 围绕z轴旋转 @(M_PI) cornerRadius 圆角的设置 @(50) backgroundColor 背景颜色的变化 (id)[UIColor purpleColor].CGColor bounds 大小，中心不变 [NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)]; position 位置(中心点的改变) [NSValue valueWithCGPoint:CGPointMake(300, 300)]; contents 内容，比如UIImageView的图片 imageAnima.toValue = (id)[UIImage imageNamed:@”to”].CGImage; opacity 透明度 @(0.7) contentsRect.size.width 横向拉伸缩放 @(0.4)最好是0~1之间的

2.CAAnimationGroup

不多说，直接上栗子

    // 轨迹动画    CAKeyframeAnimation *animation1 = [CAKeyframeAnimation animationWithKeyPath:@"position"];    // 缩放动画    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.scale"];    // 旋转动画    CABasicAnimation *animation3 = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];    NSValue *value0 = [NSValue valueWithCGPoint:CGPointMake(0, HEIGHT/2-50)];    NSValue *value1 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/3, HEIGHT/2-50)];    NSValue *value2 = [NSValue valueWithCGPoint:CGPointMake(WIDTH/3, HEIGHT/2+50)];    NSValue *value3 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2/3, HEIGHT/2+50)];    NSValue *value4 = [NSValue valueWithCGPoint:CGPointMake(WIDTH*2/3, HEIGHT/2-50)];    NSValue *value5 = [NSValue valueWithCGPoint:CGPointMake(WIDTH, HEIGHT/2-50)];    // values：就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间(duration)内，依次显示values数组中的每一个关键帧    animation1.values = [NSArray arrayWithObjects:value0,value1,value2,value3,value4,value5, nil];    animation2.fromValue = [NSNumber numberWithFloat:0.8f];    animation2.toValue = [NSNumber numberWithFloat:2.0f];    animation3.toValue = [NSNumber numberWithFloat:M_PI*4];    CAAnimationGroup *animationGroup = [CAAnimationGroup animation];    animationGroup.animations = @[animation1, animation2, animation3];    animationGroup.duration = 4.0f;    [_imageView.layer addAnimation:animationGroup forKey:@"groupAnimation"];

动画组小栗子

动画组便是把一系列的动画组成一个数组，然后执行

3.UIBezierPath

使用UIBezierPath可以创建基于矢量的路径，此类是Core Graphics框架关于路径的封装。使用此类可以定义简单的形状，如椭圆、矩形或者有多个直线和曲线段组成的形状等。

UIBezierPath是CGPathRef数据类型的封装。如果是基于矢量形状的路径，都用直线和曲线去创建。我们使用直线段去创建矩形和多边形，使用曲线去创建圆弧（arc）、圆或者其他复杂的曲线形状。

    // 轨迹动画    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position"];    // 圆形轨迹动画    // path：可以设置一个CGPathRef\CGMutablePathRef,让层跟着路径移动。path只对CALayer的anchorPoint和position起作用。如果你设置了path，那么values将被忽略。    UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(WIDTH/2-100, HEIGHT/2-100, 200, 200)];    animation.path = path.CGPath;    animation.duration = 2.0f;    animation.fillMode = kCAFillModeForwards;    animation.removedOnCompletion = NO;    // 先慢后快    animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];    [_imageView.layer addAnimation:animation forKey:@"position"];

贝塞尔曲线动画

4.CATransition

CAAnimation的子类，用于做转场动画，能够为层提供移出屏幕和移入屏幕的动画效果。

创建转场动画

设置转场类型、子类型以及其他属性

设置转场后的新视图并添加动画到图层

动画类型说明对应常量是否支持方向设置 公开API fade 淡出效果 kCATransitionFade 是 movein 新视图移动到旧视图上 kCATransitionMoveIn 是 push 新视图推出旧视图 kCATransitionPush 是 reveal 移开旧视图显示新视图 kCATransitionReveal 是 私有API cube 立方体翻转效果无是 oglFlip 翻转效果无是 suckEffect 收缩效果无否 rippleEffect 水滴波纹效果无否 pageCurl 向上翻页效果无是 pageUnCurl 向下翻页效果无是 cameralIrisHollowOpen 摄像头打开效果无否 cameraIrisHollowClose 摄像头关闭效果无否动画子类型说明 kCATransitionFromRight 从右侧转场 kCATransitionFromLeft 从左侧转场 kCATransitionFromTop 从顶部转场 kCATransitionFromBottom 从底部转场

最后

这里只是简单的说明了下一些简单的概念，复杂的酷炫动画需要各种组合，还需要你的想象力。没事可以多多练习一下，将一个个简单的动画添加上~

参考资料：

iOS动画详解（学习动画看这一篇就够了）

iOS那些简单的动画（不定期更新）

iOS动画（Core Animation）总结

CABasicAnimation使用总结

阅读全文

0 0