动画浅析-CAAnimation和CATransition

zoukankan html css js c++ java

动画浅析-CAAnimation和CATransition
出处: http://blog.csdn.net/mad2man/article/details/17260887

//动画播放完之后不恢复初始状态



baseAnimation.removedOnCompletion = NO; baseAnimation.fillMode = kCAFillModeForwards;

现在明白了，要做动画。需要用到CATransition类！

那就学习一下吧！

CATransition 动画主要作用在一个视图上

[aView.layer addAnimation:myCAAnimation];

那么说明, 他是作用在aView上

先贴一个入门代码！

[_imgPic setImage:image];// 设置新的图片





            CATransition *animation = [CATransition animation];

            [animation setDuration:1.0];

            [animation setFillMode:kCAFillModeForwards];

            [animation setTimingFunction:[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseOut]];

            [animation setType:@"rippleEffect"];// rippleEffect

            [animation setSubtype:kCATransitionFromTop];

            [_imgPic.layer addAnimation:animation forKey:nil];

实现功能就是，在UIImageView换新图片的时候，做相应的动画效果！好让，UIImageView转化时，不至于太单调！

第一句，就让我很困惑！

CATransition *animation = [CATransition animation];

+ (id)animation方法

创建一个CATransition对象。但是CATransition并没有animation方法？！

@interface CATransition : CAAnimation

原来如此，CATransition是CAAnimation的子类

骑驴看唱本吧！

CAAnimation类

CAAnimation类，是一个抽象类。遵循CAMediaTiming协议和CAAction协议！

CAAnimation is an abstract animation class. It provides the basic support for the CAMediaTiming and CAActionprotocols.

CAMediaTiming协议

可以调整时间,包括持续时间,速度,重复次数。

CAAction协议

可以通过响应动作的方式来显示动画。

CAAnimation有很多派生类

CATransition 提供渐变效果:(推拉push效果,消退fade效果,揭开reveal效果)。

CAAnimationGroup 允许多个动画同时播放。

CABasicAnimation 提供了对单一动画的实现。

CAKeyframeAnimation 关键桢动画,可以定义行动路线。

CAConstraint 约束类,在布局管理器类中用它来设置属性。

CAConstraintLayoutManager 约束布局管理器,是用来将多个CALayer进行布局的.各个CALayer是通过名称来区分,而布局属性是通过CAConstraint来设置的。

CATransaction 事务类,可以对多个layer的属性同时进行修改.它分隐式事务,和显式事务。

CAAnimation属性

delegate

@property(retain) id delegate

为CAAnimation设置代理。默认为nil。

注意：一个CAAnimation实例，不能设置delegate为self。会引起循环引用。

removedOnCompletion

@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion

设置是否动画完成后，动画效果从设置的layer上移除。默认为YES。

timingFunction

@property(retain) CAMediaTimingFunction *timingFunction

设置动画的“时机”效果。就是动画自身的“节奏”：比如：开始快，结束时变慢；开始慢，结束时变快；匀速；等，在动画过程中的“时机”效果。

animation

+ (id)animation

创建并返回一个CAAnimation实例。

defaultValueForKey

+ (id)defaultValueForKey:(NSString *)key

根据属性key，返回相应的属性值。

CAAnimation实例方法

shouldArchiveValueForKey

- (BOOL)shouldArchiveValueForKey:(NSString *)key

返回指定的属性值是否可以归档。

key：指定的属性。

YES：指明该属性可以被归档；NO：不能被归档。

CAAnimation协议方法

animationDidStart

- (void)animationDidStart:(CAAnimation *)theAnimation

动画开始时，执行的方法。

theAnimation：正在执行动画的CAAnimation实例。

animationDidStop:finished

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag

动画执行完成或者动画为执行被删除时，执行该方法。

theAnimation：完成或者被删除的动画实例

flag：标志该动画是执行完成或者被删除：YES：执行完成；NO：被删除。

只是生硬的翻译了一下CAAnimation类。毕竟该类是其他动画的父类。

先休息！来日再战！

2.CABasicAnimation

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.

画图动作: strokeEnd

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;

}

3.CATransition的type

1.#define定义的常量
     kCATransitionFade   交叉淡化过渡
     kCATransitionMoveIn 新视图移到旧视图上面
     kCATransitionPush   新视图把旧视图推出去
     kCATransitionReveal 将旧视图移开,显示下面的新视图

2.用字符串表示
     pageCurl            向上翻一页
     pageUnCurl          向下翻一页
     rippleEffect        滴水效果
     suckEffect          收缩效果，如一块布被抽走
     cube                立方体效果

　　flip　　　　　　左右翻转
     oglFlip             上下翻转效果

              示例：

CATransition *animation=[CATransition animation];
animation.delegate=self;
animation.duration=1.0f;

animation.timingFunction=UIViewAnimationCurveEaseInOut;

animation.type=kCATransitionMoveIn;
animation.subtype=kCATransitionFromTop;

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

CGMutablePathRef path2 = CGPathCreateMutable(); CGPathAddArc(path2, NULL, 100, 100, 50, M_PI, 2* M_PI , NO); CAShapeLayer *shapeLayer22 = [CAShapeLayer layer]; shapeLayer22.path = path2; shapeLayer22.strokeColor = [UIColor greenColor].CGColor; shapeLayer22.fillColor = [UIColor clearColor].CGColor; shapeLayer22.lineWidth = 15; CABasicAnimation *basicAnimation2 = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; basicAnimation2.duration = 3; basicAnimation2.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut]; basicAnimation2.removedOnCompletion = NO; basicAnimation2.fromValue = [NSNumber numberWithFloat:0]; basicAnimation2.toValue = [NSNumber numberWithFloat:1]; [shapeLayer22 addAnimation:basicAnimation2 forKey:@"basicAnimation2"]; CGPathRelease(path2); [self.layer addSublayer:shapeLayer22];
查看全文

相关阅读:
常用/常见Java Web 服务器/应用服务器Logo图文介绍
 三个快速且简单的让你的大脑安静下来的方法
 怎样判断自己是否在程序员平庸者之列？
“好奇号”火星车和它搭载的软件(来自Erlang程序员的观点)
旁观者效应”是如何毁掉我们的代码的
 怎么理解面向对象和面向过程到底的本质区别？
面向对象方法论与结构化方法论的本质区别【转】
不懂技术的人不要对懂技术的人说这很容易实现
 最近，波兰的程序员Chris(也叫KreCi)公布了他的第十四期程序员收入报告
 计算机专业的学生必须掌握的五门课程不能掌握他们就不应该获得学位

原文地址：https://www.cnblogs.com/apem/p/4236256.html

动画浅析-CAAnimation和CATransition

CATransition 动画主要作用在一个视图上

defaultValueForKey

shouldArchiveValueForKey

animationDidStart

animationDidStop:finished

2.CABasicAnimation

CABasicAnimation animationWithKeyPath 一些规定的值

CABasicAnimation animationWithKeyPath Types

3.CATransition的type