iOS_Core Animation核心动画基础动画的学习与总结

来源：互联网发布：前端解析excel成json 编辑：程序博客网时间：2024/05/20 03:06

一、CALayer

CALayer与UIView很相似，相比较于UIView，CALayer的原理要复杂得多，但在View的绘图，动画等方面又充当着相当重要的角色。想要了解更多CALayer的相关知识，可以前往这篇博客学习。英文牛逼的也可以看看官方文章。

简单了解下CALayer 的一些常见的重要属性:

1. shadowPath：阴影的位置大小

2. shadowOffset ：偏移量（正值为右下偏移）

3. shadowOpacity ：阴影透明度

4. shadowRadius :阴影的拉伸距离

5. masksToBounds :裁剪，防止子元素大小溢出父元素

6.borderWidth：边框大小

7. boarderColor 边框颜色

8. bounds ：view大小

9. opacity：view的透明度

10. cornerRadius： view的圆角

代码示例：

这里是用创建一个CALayer,再addsubLayer的方式，当然也可以通过view.layer的方式来使用

CALayer *myLayer = [[CALayer alloc] init];myLayer.backgroundColor = [UIColor grayColor].CGColor;myLayer.frame = CGRectMake(60, 100, 100, 100);       /***********     设置边框、圆角    ***********/    myLayer.borderWidth = 1;    myLayer.borderColor = [UIColor greenColor].CGColor;    myLayer.cornerRadius = 50;       /***************     设置阴影效果     1.shadowPath 位置大小是相对于layer/View来说的 相对位置大小，     2.shadowOffset 往右，往下的偏移量     3.shadowOpacity 阴影的透明效果，（取值范围 0.0 - 1.0）默认为0     4.shadowRadius 阴影拉伸渐变 值越大越虚    ******************/    myLayer.shadowPath = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 100, 100)].CGPath;    myLayer.shadowOffset = CGSizeMake(2, 2);    myLayer.shadowColor = [UIColor blueColor].CGColor;    myLayer.shadowOpacity = 0.8;    myLayer.shadowRadius = 4;        myLayer.opacity = 0.9;//整个view的透明效果，也会影响到阴影    myLayer.masksToBounds = YES;//默认是NO  一旦开启，则阴影效果将看不到   [self.view.layer addSublayer:myLayer];

===================================================================================================================================

>>>>>进入正题

二、CAAnimation

主要有三个子类：CAPropertyAnimation CAAnimationGroup CATransition

1、CAPropertyAnimation(属性动画)：它有两个子类，CABasicAnimation和CAKeyFrameAnimation。

=======================================================================================

1.1 CABasicAnimation(旋转、缩放、移动)

@interface CABasicAnimation : CAPropertyAnimation

1) 属性

@property(nullable,strong)id fromValue;//起点值

@property(nullable,strong)id toValue;//终点值（绝对值）

@property(nullable,strong)id byValue;//终点值（相对值）

2) animationKeyPath:

scale :等比缩放 scale.x :宽的比例缩放 scale.y :高的比例缩放

rotation :旋转（默认绕z轴） rotation.x :绕x轴旋转 rotation.y :绕y轴旋转 rotation.z:绕z轴旋转

translation :移动（默认在x轴） translation.x :在x轴左右移动 translation.y :在y轴上下移动

通过layer的属性值作为keypath

opacity margin zPosition backgroundColor cornerRadius borderWidth

bounds contents contentsRect frame hidden mask masksToBounds

position shadowColor shadowOffset shadowOpacity shadowRadius

3) 常用设置

//用CABasicAnimation执行动画，在动画结束后会回归动画开始前的状态，想要解决的话，必须设置“removedOnCompletion”和“fillMode”这两个属性。

animation.removedOnCompletion = NO;

animation.fillMode = kCAFillModeForwards;

//动画的延迟执行

animation.beginTime = CACurrentMediaTime() + 2; // 2秒后执行

//动画的速度变化

animation.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];//先加速后减速

//动画的执行速度，默认的值为 1.0

animation.speed = 2.0;

示例代码：

//缩放

   CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];   animation.fromValue = [NSNumber numberWithFloat:1.0];//起点值   animation.toValue = [NSNumber numberWithFloat:0.3];//终点值   animation.autoreverses = YES;//是否执行反向动画   animation.repeatCount = MAXFLOAT;//重复次数   animation.duration = 1.2;//执行时间

//旋转

   CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];   animation.fromValue = [NSNumber numberWithFloat:1.0];   animation.toValue = [NSNumber numberWithFloat:6.0*M_PI];//结束时的角度   animation.autoreverses = YES;   animation.repeatCount = MAXFLOAT;   animation.duration = 1.2;   [myLayer addAnimation:animation forKey:@"roatation"];

//移动

   CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"position"];   animation2.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)];   animation2.toValue = [NSValue valueWithCGPoint:CGPointMake(300, myLayer.position.y+300)];//终点   animation2.autoreverses = NO;   animation2.repeatCount = 0;   animation2.duration = 1.2;   [myLayer addAnimation:animation forKey:@"position"];

//移动

   CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.translation"];   animation2.fromValue = [NSNumber numberWithFloat:1.0];//起点：相对于layer的中心点的（x/y轴）的距离   animation2.toValue = [NSNumber numberWithFloat:2.0];//终点   animation2.autoreverses = NO;   animation2.repeatCount = 0;   animation2.duration = 1.2;   [myLayer addAnimation:animation forKey:@"translation"];

==================================================================================

1.2 CASpringAnimation:弹簧动画，iOS9才引入的动画类

@interface CASpringAnimation : CABasicAnimation

1) 参数说明：

mass: 质量，影响图层运动时的弹簧惯性，质量越大，弹簧拉伸和压缩的幅度越大

stiffness:刚度系数(劲度系数/弹性系数)，刚度系数越大，形变产生的力就越大，运动越快

damping:阻尼系数，阻止弹簧伸缩的系数，阻尼系数越大，停止越快

initialVelocity:初始速率，动画视图的初始速度大小速率为正数时，速度方向与运动方向一致，速率为负数时，速度方向与运动方向相反

示例代码：

    CASpringAnimation *animation = [CASpringAnimation animationWithKeyPath:@"position"];    animation.damping = 3;    animation.stiffness = 200;    animation.mass = 2;    animation.initialVelocity = 2;    animation.fromValue = [NSValue valueWithCGPoint:myLayer.position];    animation.toValue = [NSValue valueWithCGPoint:CGPointMake(100, 300)];    animation.duration = 3.0;    animation.repeatCount = MAXFLOAT;    [myLayer addAnimation:animation forKey:@"position"];

==========================================================================================================

1.3 CAKeyframeAnimation：关键帧动画

Keyframe顾名思义就是关键点的frame，你可以通过设定CALayer的始点、中间关键点、终点的frame，时间，动画会沿你设定的轨迹进行移动

@interface CAKeyframeAnimation : CAPropertyAnimation

1）values属性（设置动画执行路径的其中一种方式）

values属性里面的元素称为”关键帧”(keyframe)。动画对象会在指定的时间内，依次展示values数组中的每一帧。

示例代码：

 //通过设置Values属性指定路径    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    animation.keyPath = @"position";    NSValue *value1=[NSValue valueWithCGPoint:CGPointMake(100, 100)];    NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(200, 100)];    NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(200, 200)];    NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(100, 200)];    NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(100, 100)];    animation.values=@[value1,value2,value3,value4,value5];    animation.repeatCount=MAXFLOAT;    animation.removedOnCompletion = NO;    animation.fillMode = kCAFillModeForwards;    animation.duration = 4.0f;    animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

2）path属性（设置动画执行路径的另一种方式）

可以指定整个动画所经过的路径CGPathRef\CGMutablePathRef，让layer在制定路径移动。path只对CALayer的anchorPoint和position属性起作用。values与path是互斥的,当values与path同时指定时，path会覆盖values。

示例代码：

    CGMutablePathRef path = CGPathCreateMutable();    CGPathMoveToPoint(path, NULL, rectLayer.position.x - 15, rectLayer.position.y - 15);    CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y);    CGPathAddLineToPoint(path, NULL, 320 - 15, rectLayer.frame.origin.y + 100);    CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y + 100);    CGPathAddLineToPoint(path, NULL, 15, rectLayer.frame.origin.y);    rectRunAnimation.path = path;    CGPathRelease(path);

3）keyTimes属性

该属性是一个数组，用以指定每个子路径(AB,BC,CD)的时间。如果你没有显式地对keyTimes进行设置，则系统会默认每条子路径的时间相等，即t=duration/(values.count-1)。当然，我们也可以传个数组让物体快慢结合。例如，你可以传入{0.0, 0.1,0.6,0.7,1.0}，其中首尾必须分别是0和1，因此tAB=0.1-0, tBC=0.6-0.1, tCD=0.7-0.6, tDA=1-0.7

4）timingFunctions属性(timingFunction属性，如若设置这个属性，则所有子路径都执行一样的“加速度”)

这个属性用以指定时间函数，类似于运动的加速度。这是一个数组，你有几个子路径就应该传入几个元素，有以下几种类型:

1、 kCAMediaTimingFunctionLinear//线性

2、 kCAMediaTimingFunctionEaseIn//淡入

3、 kCAMediaTimingFunctionEaseOut//淡出

4、 kCAMediaTimingFunctionEaseInEaseOut//淡入淡出

5、 kCAMediaTimingFunctionDefault//默认

示例代码：

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];    animation.keyPath = @"position";    //设置路径    CGMutablePathRef path = CGPathCreateMutable();    //开始移动    CGPathMoveToPoint(path, NULL, myLayer.position.x - 30, myLayer.position.y - 30);    //添加线性路径    CGPathAddLineToPoint(path, NULL, 320 - 30, myLayer.frame.origin.y);    CGPathAddLineToPoint(path, NULL, 320 - 30, myLayer.frame.origin.y + 100);    CGPathAddLineToPoint(path, NULL, 15, myLayer.frame.origin.y + 100);    CGPathAddLineToPoint(path, NULL, 15, myLayer.frame.origin.y);    //添加椭圆区域路径    CGPathAddEllipseInRect(path, NULL, CGRectMake(150, 100, 100, 100));    CGPathAddLineToPoint(path, NULL, myLayer.position.x - 30, myLayer.position.y - 30);    animation.path = path;    CGPathRelease(path);    animation.repeatCount=MAXFLOAT;    animation.removedOnCompletion = NO;    animation.fillMode = kCAFillModeForwards;    animation.duration = 4.0f;    animation.rotationMode=@"auto";    animation.timingFunctions = @[                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear],                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseIn],                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseOut],                                  [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionLinear]                                  ];    animation.delegate=self;    [myLayer addAnimation:animation forKey:nil];

5）calculationMode属性

该属性决定了物体在每个子路径下是跳着走还是匀速走，跟timeFunctions属性有点类似

1 、const kCAAnimationLinear//线性，默认

2、 const kCAAnimationDiscrete//离散，无中间过程，但keyTimes设置的时间依旧生效，物体跳跃地出现在各个关键帧上

3、 const kCAAnimationPaced//均匀进行，keyTimes跟timeFunctions失效

4、 const kCAAnimationCubic//使运行轨迹变得圆滑均匀，keyTimes跟timeFunctions失效

5、 const kCAAnimationCubicPaced//同上

=============================================================================================================
2、 CAAnimationGroup(组合动画)

@interface CAAnimationGroup : CAAnimation

(1) 属性

animations

示例代码：

   CAAnimationGroup *groupAnnimation = [CAAnimationGroupanimation];   groupAnnimation.duration = 2;   groupAnnimation.autoreverses = YES;   groupAnnimation.animations = @[Animation1, Animation2, Animation3];   groupAnnimation.repeatCount = MAXFLOAT;   [myLayer addAnimation:groupAnnimation forKey:@"groupAnnimation"];

=============================================================================================================

3、 CATransition(过渡动画)

@interface CATransition : CAAnimation

1) 动画类型：

transition.type 的类型:（效果）

1、淡化：NSString * const kCATransitionFade;
2、覆盖：NSString * const kCATransitionMoveIn;
3、推挤：NSString * const kCATransitionPush;

4、揭开：NSString * const kCATransitionReveal;

transition.subtype的类型:（方向）

1、NSString * const kCATransitionFromRight;
2、NSString * const kCATransitionFromLeft;
3、NSString * const kCATransitionFromTop;

4、NSString * const kCATransitionFromBottom;

2) 私有的动画类型

私有的动画效果，在实际应用中要谨慎使用。因为在app store审核时可能会因为这些动画效果而拒绝通过。

立方体：cube

吸收：suckEffect

翻转：aglFlip

波纹：rippleEffect

翻页： pageCurl

反翻页：pageUnCurl

相机镜头开：cameraIrisHollowOpen

镜头关：cameralIrisHollowClose

使用方式：animation.type = @“cube”;

(3) CATransition的 startProgress endProgress属性

这两个属性是float类型的，取值范围[0, 1], 可以控制动画进行的过程，可以让动画停留在某个动画点上。

例如设置endProgress = 0.5，让动画停留在一半的位置。

示例代码：

   CATransition *transition = [CATransition  animation];    transition.duration = 2.0f;    transition.endProgress= 0.5;    transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];    transition.type = kCATransitionPush;    transition.subtype = kCATransitionFromTop;    //[self.view exchangeSubviewAtIndex:2 withSubviewAtIndex:3];//交换两个View的位置    [self.view.layer addAnimation:transition forKey:@"animation"];

推荐几篇详细的文章：http://geeklu.com/2012/09/animation-in-ios/

http://www.cocoachina.com/ios/20150105/10829.html

0 0

iOS_Core Animation核心动画 基础动画的学习与总结

iOS_Core Animation核心动画基础动画的学习与总结