zz CABasicAnimation的使用方法

时间：2014-09-01 17:28:13 阅读：358 评论：0 收藏：0 [点我收藏+]

标签：blog http color os io 使用 strong ar for

CABasicAnimation类的使用方式就是基本的关键帧动画。

所谓关键帧动画，就是将Layer的属性作为KeyPath来注册，指定动画的起始帧和结束帧，然后自动计算和实现中间的过渡动画的一种动画方式。

CABasicAnimation的基本使用顺序

1.引用QuartzCore.framework

将"QuartzCore.framework"这个库添加到项目中。并且在需要使用CABaseAnimation类的地方import头文件。

[objc] view plain copy

#import <QuartzCore/QuartzCore.h>

2.CABaseAnimation的实例化以及关键路径的注册

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

[objc] view plain copy

// 指定position属性
CABasicAnimation *animation =
[CABasicAnimation animationWithKeyPath:@"position"];

3.设定动画

设定动画的属性。以下是属性及其对应的说明：

属性	说明
duration	动画时长（秒为单位）（注：此处与原文有出入）
repeatCount	重复次数。永久重复的话设置为HUGE_VALF。
beginTime	指定动画开始时间。从开始指定延迟几秒执行的话，请设置为「CACurrentMediaTime() + 秒数」的形式。
timingFunction	设定动画的速度变化
autoreverses	动画结束时是否执行逆动画

例：

[objc] view plain copy

animation.duration = 2.5; // 动画持续时间
animation.repeatCount = 1; // 不重复
animation.beginTime = CACurrentMediaTime() + 2; // 2秒后执行
animation.autoreverses = YES; // 结束后执行逆动画
// 动画先加速后减速
animation.timingFunction =
[CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];

4.设定动画的开始帧和结束帧

设定动画开始和结束帧时的状态。设定的值会变为KeyPath所指定的属性的值。

属性	说明
fromValue	开始值
toValue	终了值（絶対値）
byValue	终了值（相对值）

例：

[objc] view plain copy

// 指定position属性（移动）
CABasicAnimation *animation =
[CABasicAnimation animationWithKeyPath:@"position"];
???
// 设定动画起始帧和结束帧
animation.fromValue = [NSValue valueWithCGPoint:CGPointMake(0, 0)]; // 起始点
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 终了点

5.添加动画

为Layer添加设置完成的动画，可以给Key指定任意名字。

[objc] view plain copy

[myView.layer addAnimation:animation forKey:@"move-layer"];

其他.动画结束后回到初始状态的现象的解决方法

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

[objc] view plain copy

// 动画终了后不返回初始状态
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;

CABasicAnimation的使用示例

实际上CABasicAnimation有很多种使用方法，以下将一一列举。

移动动画

移动动画的代码如下：

[objc] view plain copy

/* 移动 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"position"];
// 动画选项的设定
animation.duration = 2.5; // 持续时间
animation.repeatCount = 1; // 重复次数
// 起始帧和终了帧的设定
animation.fromValue = [NSValue valueWithCGPoint:myView.layer.position]; // 起始帧
animation.toValue = [NSValue valueWithCGPoint:CGPointMake(320, 480)]; // 终了帧
// 添加动画
[myView.layer addAnimation:animation forKey:@"move-layer"];

旋转动画

旋转动画的代码如下：

[objc] view plain copy

/* 旋转 */
// 对Y轴进行旋转（指定Z轴的话，就和UIView的动画一样绕中心旋转）
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.y"];
// 设定动画选项
animation.duration = 2.5; // 持续时间
animation.repeatCount = 1; // 重复次数
// 设定旋转角度
animation.fromValue = [NSNumber numberWithFloat:0.0]; // 起始角度
animation.toValue = [NSNumber numberWithFloat:22 * M_PI]; // 终止角度
// 添加动画
[myView.layer addAnimation:animation forKey:@"rotate-layer"];

缩放动画

缩放动画的代码如下：

[objc] view plain copy

/* 放大缩小 */
// 设定为缩放
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
// 动画选项设定
animation.duration = 2.5; // 动画持续时间
animation.repeatCount = 1; // 重复次数
animation.autoreverses = YES; // 动画结束时执行逆动画
// 缩放倍数
animation.fromValue = [NSNumber numberWithFloat:1.0]; // 开始时的倍率
animation.toValue = [NSNumber numberWithFloat:2.0]; // 结束时的倍率
// 添加动画
[myView.layer addAnimation:animation forKey:@"scale-layer"];

组合动画

使用CAAnimationGroup类进行复数动画的组合。代码如下：

[objc] view plain copy

/* 动画1（在X轴方向移动） */
CABasicAnimation *animation1 =
[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];
// 终点设定
animation1.toValue = [NSNumber numberWithFloat:80];; // 終点
/* 动画2（绕Z轴中心旋转） */
CABasicAnimation *animation2 =
[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
// 设定旋转角度
animation2.fromValue = [NSNumber numberWithFloat:0.0]; // 开始时的角度
animation2.toValue = [NSNumber numberWithFloat:44 * M_PI]; // 结束时的角度
/* 动画组 */
CAAnimationGroup *group = [CAAnimationGroup animation];
// 动画选项设定
group.duration = 3.0;
group.repeatCount = 1;
// 添加动画
group.animations = [NSArray arrayWithObjects:animation1, animation2, nil nil];
[myView.layer addAnimation:group forKey:@"move-rotate-layer"];

捕获动画开始时和终了时的事件

博主：设定委托对象，实现委托方法，如下：

[objc] view plain copy

/* 移动 */
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
animation.delegate = self; // 指定委托对象
// 设定动画选项
animation.duration = 2.5; // 动画时长
animation.repeatCount = 1; // 重复次数
// 终点设定
animation.toValue = [NSNumber numberWithFloat:100];; // 终点
// 添加动画
[myView.layer addAnimation:animation forKey:@"move-layer"];
???
/**
* 动画开始时
*/
- (void)animationDidStart:(CAAnimation *)theAnimation
{
NSLog(@"begin");
}
/**
* 动画结束时
*/
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
NSLog(@"end");
}

CABasicAnimation使用时候的注意点

CABasicAnimation正在进行动画的时候，点击了Home按钮后再回到app的时候，动画会被清空。

Objective-C的示例程序

使用CABasicAnimation实现关键帧动画的示例程序如下：

[objc] view plain copy

- (void)viewDidLoad
{
[super viewDidLoad];
// 图像显示
UIImage *image = [UIImage imageNamed:@"image01.png"];
UIImageView *imageView = [[UIImageView alloc]initWithImage:image];
imageView.center = CGPointMake(160, 240);
[self.view addSubview:imageView];
/* 移动 */
CABasicAnimation *animation1 =
[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
// 起止点的设定
animation1.toValue = [NSNumber numberWithFloat:100];; // 終点
/* 旋转 */
CABasicAnimation *animation2 =
[CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
// 绕x轴转3圈
animation2.toValue = [NSNumber numberWithFloat:66 * M_PI]; // 结束时的角度
/* 动画组 */
CAAnimationGroup *group = [CAAnimationGroup animation];
group.delegate = self;
group.duration = 5.0;
group.repeatCount = 1;
// 动画结束后不变回初始状态
group.removedOnCompletion = NO;
group.fillMode = kCAFillModeForwards;
// 添加动画
group.animations = [NSArray arrayWithObjects:animation1, animation2, nil nil];
[imageView.layer addAnimation:group forKey:@"move-rotate-layer"];
}
/**
* 动画开始时
*/
- (void)animationDidStart:(CAAnimation *)theAnimation
{
NSLog(@"begin");
}
/**
* 动画结束时
*/
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag
{
NSLog(@"end");
}

CABasicAnimation animationWithKeyPath 一些规定的值

CABasicAnimation animationWithKeyPath Types

When using the ‘CABasicAnimation’ from the QuartzCore Framework in Objective-C, you have to specify an animationWithKeyPath. This is a long string and is not easily listed in the CABasicAnimation, CAPropertyAnimation, or the CAAnimation class. I ended up finding a handy chart within the Core Animation Programming guide in Apple’s iPhone OS Reference Library. Hope this helps save someone time, at least it will for me.

bubuko.com,布布扣

CABasicAnimation *theAnimation;
theAnimation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];
theAnimation.delegate = self;
theAnimation.duration = 1;
theAnimation.repeatCount = 0;
theAnimation.removedOnCompletion = FALSE;
theAnimation.fillMode = kCAFillModeForwards;
theAnimation.autoreverses = NO;
theAnimation.fromValue = [NSNumber numberWithFloat:0];
theAnimation.toValue = [NSNumber numberWithFloat:-60]; 
[self.view.layer addAnimation:theAnimation forKey:@"animateLayer"];

复制代码

我们可以通过animationWithKeyPath键值对的方式来改变动画
animationWithKeyPath的值：
 
transform.scale = 比例轉換
transform.scale.x = 闊的比例轉換
transform.scale.y = 高的比例轉換
transform.rotation.z = 平面圖的旋轉
opacity = 透明度
 
margin
zPosition
 
backgroundColor
 
cornerRadius
borderWidth

 
bounds
contents

contentsRect
cornerRadius
frame

hidden

mask

masksToBounds
opacity

position

shadowColor

shadowOffset

shadowOpacity
shadowRadius
[self. ui_View.layer removeAllAnimations];
    
    CABasicAnimation *pulse = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    pulse.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
    pulse.duration = 0.5 + (rand() % 10) * 0.05;
    pulse.repeatCount = 1;
    pulse.autoreverses = YES;
    pulse.fromValue = [NSNumber numberWithFloat:.8];
    pulse.toValue = [NSNumber numberWithFloat:1.2];
    [self.ui_View.layer addAnimation:pulse forKey:nil];

// bounds
 
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];
    anim.duration = 1.f;
    anim.fromValue = [NSValue valueWithCGRect:CGRectMake(0,0,10,10)];
    anim.toValue = [NSValue valueWithCGRect:CGRectMake(10,10,200,200)];
    anim.byValue  = [NSValue valueWithCGRect:self. ui_View.bounds]; 
//    anim.toValue = (id)[UIColor redColor].CGColor;
//    anim.fromValue =  (id)[UIColor blackColor].CGColor;
    
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.repeatCount = 1;
    anim.autoreverses = YES;
    
    [ui_View.layer addAnimation:anim forKey:nil];
//cornerRadius
 
    CABasicAnimation *anim2 = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
    anim2.duration = 1.f;
    anim2.fromValue = [NSNumber numberWithFloat:0.f];
    anim2.toValue = [NSNumber numberWithFloat:20.f];
    anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim2.repeatCount = CGFLOAT_MAX;
    anim2.autoreverses = YES;
    
    [ui_View.layer addAnimation:anim2 forKey:@"cornerRadius"];

//contents
 
CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"contents"];
    anim.duration = 1.f;
    anim.fromValue = (id)[UIImage imageNamed:@"1.jpg"].CGImage;
    anim.toValue = (id)[UIImage imageNamed:@"2.png"].CGImage;
//    anim.byValue  = (id)[UIImage imageNamed:@"3.png"].CGImage;
//    anim.toValue = (id)[UIColor redColor].CGColor;
//    anim.fromValue =  (id)[UIColor blackColor].CGColor;
    
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.repeatCount = CGFLOAT_MAX;
    anim.autoreverses = YES;
    
    [ui_View.layer addAnimation:anim forKey:nil];

 
[ui_View.layer setShadowOffset:CGSizeMake(2,2)];
    [ui_View.layer setShadowOpacity:1];
    [ui_View.layer setShadowColor:[UIColor grayColor].CGColor];
//
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"shadowColor"];
    anim.duration = 1.f;
    anim.toValue = (id)[UIColor redColor].CGColor;
    anim.fromValue =  (id)[UIColor blackColor].CGColor;
    
    anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    anim.repeatCount = CGFLOAT_MAX;
    anim.autoreverses = YES;
    
    [ui_View.layer addAnimation:anim forKey:nil];
    
    CABasicAnimation *_anim = [CABasicAnimation animationWithKeyPath:@"shadowOffset"];
    _anim.duration = 1.f;
    _anim.fromValue = [NSValue valueWithCGSize:CGSizeMake(0,0)];
    _anim.toValue = [NSValue valueWithCGSize:CGSizeMake(3,3)];
    
    _anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    _anim.repeatCount = CGFLOAT_MAX;
    _anim.autoreverses = YES;
    
    [ui_View.layer addAnimation:_anim forKey:nil];
    
    
    CABasicAnimation *_anim1 = [CABasicAnimation animationWithKeyPath:@"shadowOpacity"];
    _anim1.duration = 1.f;
    _anim1.fromValue = [NSNumber numberWithFloat:0.5];
    _anim1.toValue = [NSNumber numberWithFloat:1];
    
    _anim1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    _anim1.repeatCount = CGFLOAT_MAX;
    _anim1.autoreverses = YES;
    
    [ui_View.layer addAnimation:_anim1 forKey:nil];
    
    
    
    CABasicAnimation *_anim2 = [CABasicAnimation animationWithKeyPath:@"shadowRadius"];
    _anim2.duration = 1.f;
    _anim2.fromValue = [NSNumber numberWithFloat:10];
    _anim2.toValue = [NSNumber numberWithFloat:5];
    
    _anim2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
    _anim2.repeatCount = CGFLOAT_MAX;
    _anim2.autoreverses = YES;
    
    [ui_View.layer addAnimation:_anim2 forKey:nil];

复制代码

几个可以用来实现热门APP应用PATH中menu效果的几个方法

+(CABasicAnimation *)opacityForever_Animation:(float)time ／／永久闪烁的动画

{

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];

animation.fromValue=[NSNumber numberWithFloat:1.0];

animation.toValue=[NSNumber numberWithFloat:0.0];

animation.autoreverses=YES;

animation.duration=time;

animation.repeatCount=FLT_MAX;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

return animation;

}

+(CABasicAnimation *)opacityTimes_Animation:(float)repeatTimes durTimes:(float)time; ／／有闪烁次数的动画

{

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"opacity"];

animation.fromValue=[NSNumber numberWithFloat:1.0];

animation.toValue=[NSNumber numberWithFloat:0.4];

animation.repeatCount=repeatTimes;

animation.duration=time;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

animation.autoreverses=YES;

return animation;

}

+(CABasicAnimation *)moveX:(float)time X:(NSNumber *)x ／／横向移动

{

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.x"];

animation.toValue=x;

animation.duration=time;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

return animation;

}

+(CABasicAnimation *)moveY:(float)time Y:(NSNumber *)y ／／纵向移动

{

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];

animation.toValue=y;

animation.duration=time;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

return animation;

}

+(CABasicAnimation *)scale:(NSNumber *)Multiple orgin:(NSNumber *)orginMultiple durTimes:(float)time Rep:(float)repeatTimes ／／缩放

{

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.scale"];

animation.fromValue=orginMultiple;

animation.toValue=Multiple;

animation.duration=time;

animation.autoreverses=YES;

animation.repeatCount=repeatTimes;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

return animation;

}

+(CAAnimationGroup *)groupAnimation:(NSArray *)animationAry durTimes:(float)time Rep:(float)repeatTimes ／／组合动画

{

CAAnimationGroup *animation=[CAAnimationGroup animation];

animation.animations=animationAry;

animation.duration=time;

animation.repeatCount=repeatTimes;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

return animation;

}

+(CAKeyframeAnimation *)keyframeAniamtion:(CGMutablePathRef)path durTimes:(float)time Rep:(float)repeatTimes ／／路径动画

{

CAKeyframeAnimation *animation=[CAKeyframeAnimation animationWithKeyPath:@"position"];

animation.path=path;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

animation.autoreverses=NO;

animation.duration=time;

animation.repeatCount=repeatTimes;

return animation;

}

+(CABasicAnimation *)movepoint:(CGPoint )point ／／点移动

{

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation"];

animation.toValue=[NSValue valueWithCGPoint:point];

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

return animation;

}

+(CABasicAnimation *)rotation:(float)dur degree:(float)degree direction:(int)direction repeatCount:(int)repeatCount ／／旋转

{

CATransform3D rotationTransform = CATransform3DMakeRotation(degree, 0, 0,direction);

CABasicAnimation* animation;

animation = [CABasicAnimation animationWithKeyPath:@"transform"];

animation.toValue= [NSValue valueWithCATransform3D:rotationTransform];

animation.duration= dur;

animation.autoreverses= NO;

animation.cumulative= YES;

animation.removedOnCompletion=NO;

animation.fillMode=kCAFillModeForwards;

animation.repeatCount= repeatCount;

animation.delegate= self;

return animation;

}

实现view放大再缩小的效果

- (void)viewDidLoad {

    [super viewDidLoad];

layer=[CALayer layer];

layer.frame=CGRectMake(50, 200, 50, 50);

layer.backgroundColor=[UIColor orangeColor].CGColor;

layer.cornerRadius=8.0f;

CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"transform.translation.y"];

animation.duration=4.0f;

animation.autoreverses=NO;

animation.repeatCount=1;

animation.toValue=[NSNumber numberWithInt:-10];

animation.fromValue=[NSNumber numberWithInt:200];

animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CABasicAnimation *animationZoomIn=[CABasicAnimation animationWithKeyPath:@"transform.scale"];

animationZoomIn.duration=2.0f;

animationZoomIn.autoreverses=NO;

animationZoomIn.repeatCount=1;

animationZoomIn.toValue=[NSNumber numberWithFloat:1.56];

animationZoomIn.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];

CABasicAnimation *animationZoomOut=[CABasicAnimation animationWithKeyPath:@"transform.scale"];

animationZoomOut.beginTime=2.0f;

animationZoomOut.duration=2.0f;

animationZoomOut.autoreverses=NO;

animationZoomOut.repeatCount=1;

animationZoomOut.toValue=[NSNumber numberWithFloat:.01];

animationZoomOut.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];

CAAnimationGroup *group=[CAAnimationGroup animation];

group.duration=4.0f;

group.animations=[NSArray arrayWithObjects: animation, animationZoomIn, animationZoomOut,nil];

group.removedOnCompletion=NO;

group.fillMode=kCAFillModeForwards;

[layer addAnimation:group forKey:nil];

[self.view.layer addSublayer:layer];

//layer.hidden=YES;

}

zz CABasicAnimation的使用方法

标签：blog http color os io 使用 strong ar for

原文地址：http://www.cnblogs.com/zengyanzhi/p/3949487.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行