manbetx官方网站

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

十月 18th, 2018  |  manbetx官方网站

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苹果这样建议

相关文章

标签:, ,

Your Comments

近期评论

    功能


    网站地图xml地图