CoreAnimation 详解。iOS动画首的CoreAnimation动画。

CAAnimation:核心动画的基础类,不可知直接下,负责动画运行时、速度的决定,本身实现了CAMediaTiming协议。

iOS动画首之CoreAnimation动画

CAPropertyAnimation:属性动画的基类(通过性能进行动画设置,注意是可动画属性),不能够一直利用。

9月 22,
2016发布在Objective-C

CAAnimationGroup:动画组,动画组是平等种组成模式设计,可以通过动画组来进展具有动画行为之集合支配,组中所有动画效果好并作执行。

App如果想为群众喜欢,漂亮的UI和完美之卡通片都是必要的,苹果虽然也UIView提供了有的常用动画,但是多数扣起比是的法力还是经过操作Layer层实现之,因此了解核心动画是必要之.CoreAnimation是一直作用在CALayer上的(并非UIView上)非常强劲的跨Mac
OS X和iOS平台的卡通片处理API,Core
Animation的卡通片执行过程还是于后台操作的,不见面死主线程。

CATransition:转场动画,主要通过滤镜进行动画效果设置。

CABasicAnimation:基础动画,通过性能修改进行动画参数控制,只有初始状态与了结状态。

介绍

CAKeyframeAnimation:关键帧动画,同样是经性进行动画参数控制,但是跟基础动画不同的凡它好生出差不多只状态控制。

付出中的绝多之是CoreAnimation动画库,简称是CA,所以动画类都是CA开头。所有的动画类都于QuartzCore库中,在iOS7前用得#import
,iOS7后系统都以那自行导入了。CoreAnimation动画都是意在layer上。

基本功动画、关键帧动画都属属性动画,就是经改属性值产生动画效果,开发人员只需要设置初始值和终止值,中间的进程动画(又受“补间动画”)由网自动计算出。和根基动画不同之凡重大帧动画好装多个属于性值,每半单特性中间的补间动画由系统自动完成,因此于这个角度而言基础动画又可作为是发出零星独至关重要帧的重要帧动画。

先期来拘禁下动画类的层级关系:

关系图

至于上图被的层级结构就待了解一下,用底差不多了,自然就记住了。本篇只讲述CABasicAnimation、CAKeyframeAnimation、CAAnimationGroup的应用。

1.  CABasicAnimation – 基础动画

使用

下面是个scale 缩放的例证:

点说了CA动画都是图在Layer上,而CA动画中改的啊是Layer的动画属性,可以起动画的layer属性也起Animatable标识。

 CABasicAnimation *scaleAnimation = [CABasicAnimation  

animationWithKeyPath:@”transform.scale“];

// 于1倍增放大到1.5倍增

scaleAnimation.fromValue = @(1.0);

scaleAnimation.toValue = @(1.5);

//scaleAnimation.beginTime = CACurrentMediaTime()+2;
//动画延迟执行时间

scaleAnimation.autoreverses = YES;
//设置这个特性表示完成动画后会回去执行动画前的状态

//这片个属性要协同设置,表示维持执行动画后底则不更换(要惦记fillMode有效,最好设置removedOnCompletion=NO)

//scaleAnimation.removedOnCompletion = NO;

//scaleAnimation.fillMode = kCAFillModeForwards;

//重复次数

//scaleAnimation.repeatCount = 1;

//动画时间

scaleAnimation.duration = 0.8;

scaleAnimation.delegate = self; //代理(CAAnimationDelegate)

[self.customView.layer addAnimation:scaleAnimation
forKey:@”scaleAnimation”]; 

1.CABasicAnimation

暂停/开始 动画:

CABasicAnimation动画主要是安装有动画属性之初始值fromValue和终止值toValue,来发出动画效果。

-(void)animationPause{

//取得指定图层动画的传媒时,后面参数用于指定子图层,这里不待

CFTimeInterval interval=[self.customView.layer
convertTime:CACurrentMediaTime() fromLayer:nil];

//设置时间偏移量,保证暂停时停在转的位置

self.customView.layer.timeOffset = interval;

//速度设置为0,暂停动画

self.customView.layer.speed=0;

}

-(void)animationResume{

//获得暂停的时空

CFTimeInterval beginTime= CACurrentMediaTime()-
self.customView.layer.timeOffset;

//设置偏移量

self.customView.layer.timeOffset=0;

//设置开始日

self.customView.layer.beginTime=beginTime;

//设置动画速度,开始走

self.customView.layer.speed=1.0;

}

先上个示范代码,将一个视图往上动一段距离:

代办就简单个回调:

CABasicAnimation*postionAnimation =
[CABasicAnimationanimationWithKeyPath:@”position.y”];

– (void)animationDidStart:(CAAnimation *)anim;

– (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;

postionAnimation.duration =1.0f;

解释下 fillMode 属性以及 “animationWithKeyPath:” 这个字符串参数:

postionAnimation.fromValue = @(self.squareView.center.y);

fillMode 有立四个门类:

/**

kCAFillModeRemoved
这个是默认值,也就是说当动画起来前与动画片结束后,动画对layer都未曾影响,动画结束后,layer会恢复至事先的状态?.

kCAFillModeForwards 当动画结束晚,layer会一直维系着卡通最后之状态.

kCAFillModeBackwards
在动画开始前,你要以动画加入了一个layer,layer便及时进入动画的初步状态并等候动画开始.
你得这么设定测试代码,将一个动画加入一个layer的时节延迟5秒执行.然后即会见发现以动画没有开的当儿,只要动画被投入了layer,layer便处于动画初始状态
( 这里代表未是颇清楚)

kCAFillModeBoth
这个其实就算是方两只底合成.动画在后开始前,layer便处于动画初始状态,动画结束晚layer保持动画最后的写

*/

“animationWithKeyPath:”  传的参数不能够蹭,比如上面的例子是缩放,就要写 
transform.scale“,如果想要设置水平要前后移动就待
transform.translation.x“或者 “transform.translation.y

postionAnimation.toValue = @(self.squareView.center.y -300);

实际参照下图:

postionAnimation.removedOnCompletion =NO;

可是装的性-1

postionAnimation.delegate =self;

2.CAAimationGroup –  动画组成

postionAnimation.autoreverses =YES;

相比之下叫CABasicAnimation 就大多了一个 用来存放在动画对象的 animations
 数组属性。

postionAnimation.fillMode = kCAFillModeForwards;

 下面是一个缩放平移绕y轴转动的构成卡通:

postionAnimation.timingFunction =
[CAMediaTimingFunctionfunctionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CABasicAnimation *scaleAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.scale”];

scaleAnimation.fromValue = @(1);

scaleAnimation.toValue = @(0.5);

scaleAnimation.autoreverses = YES;

CABasicAnimation *moveAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.translation.x”];

moveAnimation.fromValue = @(0);

moveAnimation.toValue = @(100);

moveAnimation.autoreverses = YES;

CABasicAnimation *rotateAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.rotation.y”];

rotateAnimation.fromValue = @(0);

rotateAnimation.toValue = @(2*M_PI);

rotateAnimation.autoreverses = YES;

CAAnimationGroup *groupAnnimation = [CAAnimationGroup
animation];

groupAnnimation.duration = 2;

groupAnnimation.autoreverses = YES;

groupAnnimation.animations = @[moveAnimation, scaleAnimation,
rotateAnimation];

groupAnnimation.repeatCount = MAXFLOAT;

[self.customView.layer addAnimation:groupAnnimation
forKey:@”groupAnnimation”];

[self.squareView.layer addAnimation:postionAnimation
forKey:@”posstionAnimation”];

3.CAKeyframeAnimation - 要帧动画 

卡通的始建以animationWithKeyPath:,因为运用的keyPath所以动画属性或者其结构体中元素还足以有动画。

下是一个施用  CAKeyframeAnimation 改变View 背景色的 小例子:

duration动画的时长。

CAKeyframeAnimation *color = [CAKeyframeAnimation
animationWithKeyPath:@”backgroundColor”];

color.values = @[(id)[UIColor redColor].CGColor,(id)[UIColor
yellowColor].CGColor,(id)[UIColor blueColor].CGColor];

color.keyTimes = @[@0, @0.4,@0.6, @0.8,@1.1];

color.repeatCount = 1;

color.autoreverses = YES;

color.duration = 3;

[self.customView.layer addAnimation:color forKey:@”color”];

fromValue和toValue是CABasicAnimation的属性,都是id类型的,所以一旦以着力型包装成靶子。

大概的牵线下常用之习性:

removedOnCompletion决定动画执行完毕后是不是将拖欠动画的影响移除,默认是YES,则layer回到动画前的状态。

values:就是上述的NSArray对象。里面的元素称为”关键帧”(keyframe)。动画对象见面于指定的时(duration)内,依次显示values数组中之各级一个要帧
.

fillMode是独枚举值(四种植),当removedOnCompletion设置为NO之后才会于作用。可以安装layer是保持动画开始前之状态还是动画结束晚底状态,或是其他的。

keyTimes:逐一显要帧的日决定。

autoreverses表示动画结束后是否 backwards(回退)
到动画开始前之状态。可及地方两独特性组合有不同功能。

path:可以装一个CGPathRef\CGMutablePathRef,让层就路径走。path只针对CALayer的anchorPoint和position起作用。如果你设置了path,那么values将于忽略

timingFunction动画的倒是匀速线性的尚是先抢后慢等,类似UIView动画的opitions。另外,CAMediaTimingFunction
方法可以打定义。

timingFunctions: 这个特性用以指定时间函数,类似于运动的加以速度。

delegate代理,两单卡通代理方:- (void)animationDidStart:(CAAnimation
*)anim; 和- (void)animationDidStop:(CAAnimation *)anim
finished:(BOOL)flag;

(1) kCAMediaTimingFunctionLinear//线性

(2) kCAMediaTimingFunctionEaseIn//淡入

(3) kCAMediaTimingFunctionEaseOut//淡出

(4) kCAMediaTimingFunctionEaseInEaseOut//淡入淡出

(5) kCAMediaTimingFunctionDefault//默认

-(void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString
*)key; 给某个layer添加动画,与的相应之移除某个动画是-
(void)removeAnimationForKey:(NSString *)key;

calculationMode:
该属性决定了体在每个子路径下是超过着走或匀速走。

还有一对另的性,就不一一介绍了,可以以采取的动去.h文件被查阅。

(1) const kCAAnimationLinear//线性,默认

(2) const
kCAAnimationDiscrete//离散,无中间经过,但keyTimes设置的时间仍然生效,物体跳跃地冒出于逐个重要帧上

(3) const kCAAnimationPaced//平均,keyTimes跟timeFunctions失效

(4) const kCAAnimationCubic//平均,同上

(5) const kCAAnimationCubicPaced//平均,同上

以此间大概介绍一下fillMode

脚是是 CAKeyframeAnimation 配合贝塞尔曲线 的简要例子: 

留意:fillMode这个特性,必须使配合下这个特性来使用。这个特性之默认值是YES(回到原处),此时fillMode是从未作用的设设置为NO那么就用装一个fillMode属性,就是卡通片结束之后的状态,如果不装,动画也会回去原处。

CAKeyframeAnimation *keyframeAnimation=[CAKeyframeAnimation
animationWithKeyPath:@”position”];

//2.安路径

//绘制贝塞尔曲线

UIBezierPath *path = [[UIBezierPath alloc] init];

[path moveToPoint:CGPointMake(self.customView.layer.position.x,
self.customView.layer.position.y)];

[path addCurveToPoint:CGPointMake(55, 400)
controlPoint1:CGPointMake(10, 300) controlPoint2:CGPointMake(160,
280)];

keyframeAnimation.path=path.CGPath;//设置path属性

//设置任何性能

keyframeAnimation.duration=8.0;

keyframeAnimation.beginTime=CACurrentMediaTime();//设置延迟2秒执行

keyframeAnimation.removedOnCompletion = NO;

keyframeAnimation.fillMode = kCAFillModeForwards;

//3.添加动画及图层,添加动画后就是见面实行动画

[self.customView.layer addAnimation:keyframeAnimation
forKey:@”KCKeyframeAnimation_Position”];

postionAnimation.removedOnCompletion = NO;

4. CATransition – 转场动画

kCAFillModeRemoved
这个是默认值,也就是说当动画起来前和卡通片结束晚,动画对layer都无影响,动画结束后,layer会恢复到事先的状态

简易的例子:

kCAFillModeForwards 当动画结束后,layer会一直保持在卡通最后之状态

CATransition *transition = [CATransition animation];

transition.duration = 2.0f;

transition.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];

transition.type = kCATransitionMoveIn;

transition.subtype = kCATransitionFromRight;

[self.customView.layer addAnimation:transition forKey:@”animation”];

kCAFillModeBackwards
这个和kCAFillModeForwards是相对的,就是以动画开始前,你要以动画加入了

简短的介绍下 几个属性:

一个layer,layer便立刻进动画的开始状态并听候动画开始.你可如此设定测试代码,将一个动画片加入一个

type : 有四栽档次:

layer的时节延迟5秒执行.然后就是见面发觉在动画没有从头的当儿,只要动画被在了layer,layer便处于动画初

kCATransitionFade                  //交叉淡化过渡

kCATransitionMoveIn              //移动覆盖原图

kCATransitionPush                    //新视图将旧视图推出去

kCATransitionReveal                //底部显出来

始状态

subType: 同样四种

kCAFillModeBoth
理解了地方两个,这个就死好掌握了,这个实在就算是上面两独底合成.动画在后开始的

kCATransitionFromRight;

kCATransitionFromLeft(默认值)

kCATransitionFromTop;

kCATransitionFromBottom

前,layer便处于动画初始状态,动画结束晚layer保持动画最后的状态.

参考链接:
http://www.cnblogs.com/wengzilin/p/4256468.html

Rotation旋转

             
http://www.bubuko.com/infodetail-1000965.html

Z轴

             
http://www.cocoachina.com/ios/20141022/10005.html

CABasicAnimation *rotationAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.rotation”];

             
http://www.cnblogs.com/wengzilin/p/4250957.html

rotationAnimation.fromValue = [NSNumber numberWithFloat:0.0];

rotationAnimation.toValue = [NSNumber numberWithFloat:2*M_PI];

rotationAnimation.repeatCount = MAXFLOAT;

rotationAnimation.duration =10;

[self.rotationImgView.layer addAnimation:rotationAnimation
forKey:@”transform.rotation.z”];

X轴

CABasicAnimation *rotationXAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.rotation.x”];

rotationXAnimation.fromValue = [NSNumber numberWithFloat:0.0];

rotationXAnimation.toValue = [NSNumber numberWithFloat:2*M_PI];

rotationXAnimation.repeatCount = MAXFLOAT;

rotationXAnimation.duration =3;

[self.rotationXImgView.layer addAnimation:rotationXAnimation
forKey:@”transform.rotation.x”];

Y轴

CABasicAnimation *rotationYAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.rotation.y”];

rotationYAnimation.fromValue = [NSNumber numberWithFloat:0.0];

rotationYAnimation.toValue = [NSNumber numberWithFloat:2*M_PI];

rotationYAnimation.repeatCount = MAXFLOAT;

rotationYAnimation.duration =10;

[self.rotationYImgView.layer addAnimation:rotationYAnimation
forKey:@”transform.rotation.y”];

Scale放大缩小

随意方向放大

CABasicAnimation *scaleAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.scale”];

scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];

scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];

scaleAnimation.autoreverses = YES;//自动反为执行动画效果

scaleAnimation.repeatCount = MAXFLOAT;

scaleAnimation.duration = 0.8;

[self.scaleImgView.layer addAnimation:scaleAnimation
forKey:@”FlyElephant.scale”];

X轴放大

CABasicAnimation *scaleXAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.scale.x”];

scaleXAnimation.fromValue = [NSNumber numberWithFloat:1.0];

scaleXAnimation.toValue = [NSNumber numberWithFloat:1.5];

scaleXAnimation.autoreverses = YES;//自动反往行动画效果

scaleXAnimation.repeatCount = MAXFLOAT;

scaleXAnimation.duration = 0.8;

[self.scaleXImgView.layer addAnimation:scaleXAnimation
forKey:@”FlyElephant.scale.x”];

Y轴放大

CABasicAnimation *scaleYAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.scale.y”];

scaleYAnimation.fromValue = [NSNumber numberWithFloat:1.0];

scaleYAnimation.toValue = [NSNumber numberWithFloat:1.5];

scaleYAnimation.autoreverses = YES;//自动反往实施动画效果

scaleYAnimation.repeatCount = MAXFLOAT;

scaleYAnimation.duration = 0.8;

[self.scaleYImgView.layer addAnimation:scaleYAnimation
forKey:@”FlyElephant.scale.y”];

Z轴放大

CABasicAnimation *scaleZAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.scale.z”];

scaleZAnimation.fromValue = [NSNumber numberWithFloat:1.0];

scaleZAnimation.toValue = [NSNumber numberWithFloat:1.5];

scaleZAnimation.autoreverses = YES;//自动反朝行动画效果

scaleZAnimation.repeatCount = MAXFLOAT;

scaleZAnimation.duration = 0.8;

[self.scaleZImgView.layer addAnimation:scaleZAnimation
forKey:@”FlyElephant.scale.z”];

Translation平移

X轴平移

CABasicAnimation *translationX=[CABasicAnimation
animationWithKeyPath:@”transform.translation.x”];

translationX.toValue=@(200);

translationX.duration=5;

translationX.removedOnCompletion=NO;

translationX.fillMode=kCAFillModeForwards;

translationX.repeatCount=MAXFLOAT;

translationX.autoreverses=YES;

[self.translationXImgView.layer addAnimation:translationX
forKey:@”FlyElephant.translation.x”];

Y轴平移

CABasicAnimation *translationY=[CABasicAnimation
animationWithKeyPath:@”transform.translation.y”];

translationY.toValue=@(100);

translationY.duration=5;

translationY.removedOnCompletion=NO;

translationY.fillMode=kCAFillModeForwards;

translationY.repeatCount=MAXFLOAT;

translationY.autoreverses=YES;

[self.translationYImgView.layer addAnimation:translationY
forKey:@”FlyElephant.translation.y”];

XY轴平移

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

translation.toValue=[NSValue valueWithCGPoint:CGPointMake(100, 100)];

translation.duration=5;

translation.removedOnCompletion=NO;

translation.fillMode=kCAFillModeForwards;

translation.repeatCount=MAXFLOAT;

translation.autoreverses=YES;

[self.translationImgView.layer addAnimation:translation
forKey:@”FlyElephant.translation”];

卡通实例图:

2.CAKeyframeAnimation

CAKeyframeAnimation我们一般叫关键帧动画,主要是运用其values属性,设置多只关键帧属性值,来出动画。

基于Scale变换:

CAKeyframeAnimation *keyAnimation = [CAKeyframeAnimation
animationWithKeyPath:@”transform”];

keyAnimation.duration = 1.0f;

keyAnimation.beginTime = CACurrentMediaTime() + 1.0;

CATransform3D transform1 = CATransform3DMakeScale(1.5, 1.5, 0);

CATransform3D transform2 = CATransform3DMakeScale(0.8, 0.8, 0);

CATransform3D transform3 = CATransform3DMakeScale(3, 3, 0);

keyAnimation.values = @[[NSValue
valueWithCATransform3D:transform1],[NSValue
valueWithCATransform3D:transform2],[NSValue
valueWithCATransform3D:transform3]];

keyAnimation.keyTimes = @[@0,@0.5,@1];

keyAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

keyAnimation.removedOnCompletion = NO;

keyAnimation.fillMode = kCAFillModeForwards;

[_someView.layer addAnimation:keyAnimation forKey:nil];

beginTime也是CAAnimation类的习性,可以设置动画延迟多久执行,示例代码是缓1秒执行。

values是CAKeyframeAnimation的性质,设置keyPath属性在几个根本帧的值,也是id类型的。

keyTimes也是CAKeyframeAnimation的性,每个值对许相应关键帧的时刻比例值。

timingFunctions也是CAKeyframeAnimation的属性,对诺每个动画段的卡通过渡状态;而timingFunction是CAAnimation的习性。

基于Point的变换:

CGPoint p1=CGPointMake(self.positionImgView.center.x,
self.positionImgView.center.y);

CGPoint p2=CGPointMake(80, 100);

CGPoint p3=CGPointMake(100, 120);

CGPoint p4=CGPointMake(120, 150);

CGPoint p5=CGPointMake(140, 160);

NSArray *values=[NSArray arrayWithObjects:[NSValue
valueWithCGPoint:p1],[NSValue valueWithCGPoint:p2],[NSValue
valueWithCGPoint:p3],[NSValue valueWithCGPoint:p4],[NSValue
valueWithCGPoint:p5], nil];

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

[animation setValues:values];

[animation setDuration:10.0];

[animation setCalculationMode:kCAAnimationCubic];

animation.timingFunction=[CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseIn];

[self.positionImgView.layer addAnimation:animation
forKey:@”FlyElephant.point”];

基于Path的变换:

CGMutablePathRef path = CGPathCreateMutable();

CGPathMoveToPoint(path,NULL,self.positionImgView.center.x,self.positionImgView.center.y);

for(NSInteger i = 1; i < 5 i++){

CGPathAddLineToPoint(path, NULL, self.positionImgView.center.x+i*10,   
self.positionImgView.center.y);

}

//曲线

CGPathAddCurveToPoint(path,NULL,50.0,275.0,150.0,275.0,70.0,120.0);

CGPathAddCurveToPoint(path,NULL,150.0,275.0,250.0,275.0,90.0,120.0);

CGPathAddCurveToPoint(path,NULL,250.0,275.0,350.0,275.0,110.0,120.0);

CGPathAddCurveToPoint(path,NULL,350.0,275.0,450.0,275.0,130.0,120.0);

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

[animation setPath:path];

[animation setDuration:3.0];

// [animation setAutoreverses:YES];

CFRelease(path);

[self.positionImgView.layer addAnimation:animation:@”FlyElephant”];

由此代码我们发现,Path和values接收都是一个屡组,而无是一个固定值,这中间我们从来不装keyTimes,下面看一个常见的振荡效果:

CAKeyframeAnimation *animation = [CAKeyframeAnimation animation];

animation.keyPath = @”position.x”;

animation.values = @[ @0, @20, @-20, @20, @0 ];

animation.keyTimes = @[ @0, @(1 /8.0), @(1/ 2.0), @(7/ 8.0), @1 ];

animation.duration =0.5;

animation.additive = YES;

[self.textField.layer addAnimation:animation
forKey:@”FlyElephant.Shake”];

3.CAAnimationGroup

CAAnimationGroup的用法及其他动画类一样,都是添加到layer上,比CAAnimation多了一个animations属性。

事先看示例代码,动画效果是视图一边向上移动,一边绕Y轴转动:

CABasicAnimation *rotationYAnimation = [CABasicAnimation
animationWithKeyPath:@”transform.rotation.y”];

rotationYAnimation.fromValue = @0;

rotationYAnimation.toValue = @(M_PI);

rotationYAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CABasicAnimation *postionAnimation = [CABasicAnimation
animationWithKeyPath:@”position.y”];

postionAnimation.fromValue = @(_markView.center.y);

postionAnimation.toValue = @(_markView.center.y – 100);

postionAnimation.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

CAAnimationGroup *animationGroup = [CAAnimationGroup animation];

animationGroup.duration = kUpDuration;

animationGroup.removedOnCompletion = NO;

animationGroup.fillMode = kCAFillModeForwards;

animationGroup.delegate = self;

animationGroup.animations = @[rotationYAnimation, postionAnimation];

[_markView.layer addAnimation:animationGroup forKey:kJumpAnimation];

CAAnimationGroup的animations中好拓宽任何任何动画类(包括CAAnimationGroup),需要小心的是animations里之动画片设置了duration之后动画可能会见起例外,一般里面不装,在无比外层设置group的duration即可。

AnimationWithKeyPath的值

极开始举行动画一般还见面对keyPath这个值莫名其妙,因为她不是常量,需要更换的早晚找不交相应的要安装的价值,如果你当网上寻找,很可能看到的凡就张图:

脚就张图你多是寻找不顶的,如下:

4.CATransition

CATransition一般来举行转场动画。先上gif动画效果

//修改视图的背景色

_someView.backgroundColor = [UIColor greenColor];

CATransition *animation = [CATransition animation];

animation.duration = 0.5;

/*
这里可是装的参数有:kCATransitionFade、kCATransitionPush、kCATransitionReveal、kCATransitionMoveIn、

“cube”、”suckEffect”、”oglFlip”、”rippleEffect”、”pageCurl”、”pageUnCurl”、”cameraIrisHollowOpen”、

“cameraIrisHollowClose”,这些还是动画类型

*/

animation.type = @”cube”;

//
动画执行的方向,kCATransitionFromRight、kCATransitionFromLeft、kCATransitionFromTop、kCATransitionFromBottom

animation.subtype = kCATransitionFromRight;

animation.timingFunction = UIViewAnimationOptionCurveEaseInOut;

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

//也可以写这里

//    _someView.backgroundColor = [UIColor greenColor];

才待以动画开始前还是动画片开始后替换掉视图上显得的内容即可。具体可扣押本身之即刻首博客iOS动画之CATransition动画

附加

叠加的内容是关于CALayer和UIBezierPath。个人觉得知道了UIBezierPath和CALayer,才会重新好之懂得CoreAnimation动画。

1.UIBezierPath

UIBezierPath主要是为此来绘制路径的,分为一品、二阶…..n阶。一阶段是直线,二阶以上才是曲线。而最后路的示还是得拄CALayer。用CoreGraphics将路径绘制出,最终也是绘制到CALayer上。

方式一致:构造bezierPath对象,一般用来打定义路径。

法二:绘制圆弧路径,参数1凡是骨干点位置,参数2是半径,参数3是初步的弧度值,参数4凡终结之弧度值,参数5凡是是否顺时针(YES是顺时针方向,NO逆时针)。

主意三:根据某路径绘制路径。

术四:根据某CGRect绘制内切圆或椭圆(CGRect是刚方形即为完善,为长方形则为椭圆)。

方式五:根据某CGRect绘制路径。

主意六:绘制带圆角的矩形路径,参数2啊个竞赛,参数3,横、纵向半径。

计七:绘制每个角都是圆角的矩形,参数2凡是半径。

起定义路径时为此底API:

– (void)moveToPoint:(CGPoint)point; // 移到某某点

– (void)addLineToPoint:(CGPoint)point; // 绘制直线

– (void)addCurveToPoint:(CGPoint)endPoint
controlPoint1:(CGPoint)controlPoint1
controlPoint2:(CGPoint)controlPoint2; //绘制贝塞尔曲线

– (void)addQuadCurveToPoint:(CGPoint)endPoint
controlPoint:(CGPoint)controlPoint; // 绘制规则的贝塞尔曲线

– (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius
startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle
clockwise:(BOOL)clockwise

// 绘制圆形曲线

– (void)appendPath:(UIBezierPath *)bezierPath; // 拼接曲线

假定将路径显示的绘画展示到视图上呢?

来三种植方式:1、直接以UIBezierPath的方式;2、使用CoreGraphics绘制;3、利用CAShapeLayer绘制。

以身作则代码如下,绘制一个右为弧型的视图:

– (void)drawRect:(CGRect)rect

{

UIColor *fillColor = [UIColor colorWithRed:0.0 green:0.722 blue:1.0
alpha:1.0];

UIBezierPath *bezierPath = [UIBezierPath bezierPath];

[bezierPath moveToPoint:CGPointMake(0, 0)];

[bezierPath addLineToPoint:CGPointMake(rect.size.width – spaceWidth,
0)];

[bezierPath addQuadCurveToPoint:CGPointMake(rect.size.width –
spaceWidth, rect.size.height) controlPoint:CGPointMake(rect.size.width –
spaceWidth + _deltaWith, rect.size.height * 0.5)];

[bezierPath addLineToPoint:CGPointMake(0, rect.size.height)];

[bezierPath addLineToPoint:CGPointMake(0, 0)];

[bezierPath closePath];

// 1、bezierPath方法

//    [fillColor setFill];

//    [bezierPath fill];

// 2、使用CoreGraphics

//    CGContextRef ctx = UIGraphicsGetCurrentContext();

//    CGContextAddPath(ctx, bezierPath.CGPath);

//    CGContextSetFillColorWithColor(ctx, fillColor.CGColor);

//    CGContextFillPath(ctx);

// 3.CAShaperLayer

[self.layer.sublayers
makeObjectsPerformSelector:@selector(removeFromSuperlayer)];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.path = bezierPath.CGPath;

shapeLayer.fillColor = fillColor.CGColor;

[self.layer addSublayer:shapeLayer];

}

及图这样的视图是故UIBezierPath用几近只CAShapeLayer制作出来的,而动画片效果就待改进度的layer的strokeEnd和改下面代表水面进度的视图位置即可。动画的结缘为足以产生多种计结合

动画片的言传身教代码:

– (void)setProgress:(CGFloat)progress animated:(BOOL)animated
duration:(NSTimeInterval)duration

{

CGFloat tempPro = progress;

if (tempPro > 1.0) {

tempPro = 1.0;

} else if (progress < 0.0){

tempPro = 0.0;

}

_progress = tempPro;

CABasicAnimation *pathAniamtion = [CABasicAnimation
animationWithKeyPath:@”strokeEnd”];

pathAniamtion.duration = duration;

pathAniamtion.timingFunction = [CAMediaTimingFunction
functionWithName:kCAMediaTimingFunctionEaseInEaseOut];

pathAniamtion.fromValue = [NSNumber numberWithFloat:0.0f];

pathAniamtion.toValue = [NSNumber numberWithFloat:_progress];

pathAniamtion.autoreverses = NO;

[_progressLayer addAnimation:pathAniamtion forKey:nil];

// 水位上升之动画片

if (!_showSolidAnimation) {

return;

}

dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0 *
NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

_imageView.transform = CGAffineTransformIdentity;

[UIView animateWithDuration:duration animations:^{

CGRect rect = _imageView.frame;

CGFloat dy = rect.size.height * progress;

_imageView.transform = CGAffineTransformMakeTranslation(0, -dy);

}];

});

}

在为此由定义之CAShapeLayer做动画时,建议于动画开始前先行用动画属性和最终的属性值一致,再开始动画,不要使removedOnCompletion控制最终之状态,这在WWDC苹果这样建议

相关文章

admin

网站地图xml地图