iOS的动画效果一直都很棒很,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用。在APP开发中实现动画效果有很多种方式,对于简单的应用场景,我们可以使用UIKit提供的动画来实现。
UIView动画简介
UIView动画实质上是对CoreAnimation的封装,提供简洁的动画接口。
UIView动画可以设置的动画属性有:
1、大小变化(frame)
2、拉伸变化(bounds)
3、中心位置(center)
4、旋转(transform)
5、透明度(alpha)
6、背景颜色(backgroundColor)
7、拉伸内容(contentStretch)
UIview类方法动画
1)动画的开始和结束方法
1.1动画开始标记
1
|
[UIViewbeginAnimations:(nullableNSString*)context:(nullablevoid*)]; |
第一个参数:动画标识
第二个参数:附加参数,在设置了代理的情况下,此参数将发送到setAnimationWillStartSelector和setAnimationDidStopSelector所指定的方法。大部分情况下,我们设置为nil即可。
1.2结束动画标记
[UIViewcommitAnimations];
2)动画参数的设置方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
//动画持续时间 [UIViewsetAnimationDuration:(NSTimeInterval)]; //动画的代理对象 [UIViewsetAnimationDelegate:(nullableid)]; //设置动画将开始时代理对象执行的SEL [UIViewsetAnimationWillStartSelector:(nullableSEL)]; //设置动画结束时代理对象执行的SEL [UIViewsetAnimationDidStopSelector:(nullableSEL)]; //设置动画延迟执行的时间 [UIViewsetAnimationDelay:(NSTimeInterval)]; //设置动画的重复次数 [UIViewsetAnimationRepeatCount:(float)]; //设置动画的曲线 [UIViewsetAnimationCurve:(UIViewAnimationCurve)]; UIViewAnimationCurve的枚举值如下: UIViewAnimationCurveEaseInOut, //慢进慢出(默认值) UIViewAnimationCurveEaseIn, //慢进 UIViewAnimationCurveEaseOut, //慢出 UIViewAnimationCurveLinear //匀速 //设置是否从当前状态开始播放动画 [UIViewsetAnimationBeginsFromCurrentState:YES]; |
假设上一个动画正在播放,且尚未播放完毕,我们将要进行一个新的动画:
当为YES时:动画将从上一个动画所在的状态开始播放
当为NO时:动画将从上一个动画所指定的最终状态开始播放(此时上一个动画马上结束)
1
2
3
4
5
6
|
//设置动画是否继续执行相反的动画 [UIViewsetAnimationRepeatAutoreverses:(BOOL)]; //是否禁用动画效果(对象属性依然会被改变,只是没有动画效果) [UIViewsetAnimationsEnabled:(BOOL)]; //设置视图的过渡效果 [UIViewsetAnimationTransition:(UIViewAnimationTransition)forView:(nonnullUIView*)cache:(BOOL)]; |
第一个参数:UIViewAnimationTransition的枚举值如下
1
2
3
4
5
|
UIViewAnimationTransitionNone, //不使用动画 UIViewAnimationTransitionFlipFromLeft, //从左向右旋转翻页 UIViewAnimationTransitionFlipFromRight, //从右向左旋转翻页 UIViewAnimationTransitionCurlUp, //从下往上卷曲翻页 UIViewAnimationTransitionCurlDown, //从上往下卷曲翻页 |
第二个参数:需要过渡效果的View
第三个参数:是否使用视图缓存,YES:视图在开始和结束时渲染一次;NO:视图在每一帧都渲染
3)实例代码:
1、属性变化动画(以frame变化为例)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
-(void)changeFrame{ [UIViewbeginAnimations:@ "FrameAni" context:nil]; [UIViewsetAnimationDuration:1.0]; [UIViewsetAnimationDelegate:self]; [UIViewsetAnimationWillStartSelector:@selector(startAni:)]; [UIViewsetAnimationDidStopSelector:@selector(stopAni:)]; [UIViewsetAnimationRepeatCount:1]; [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut]; self.cartCenter.frame=self.centerShow.frame; [UIViewcommitAnimations]; } -(void)startAni:(NSString*)aniID{ NSLog(@ "%@start" ,aniID); } -(void)stopAni:(NSString*)aniID{ NSLog(@ "%@stop" ,aniID); } |
动画效果:
2、转场效果动画(以Flip效果为例)
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)flipAni{ [UIViewbeginAnimations:@ "FlipAni" context:nil]; [UIViewsetAnimationDuration:1.0]; [UIViewsetAnimationDelegate:self]; [UIViewsetAnimationWillStartSelector:@selector(startAni:)]; [UIViewsetAnimationDidStopSelector:@selector(stopAni:)]; [UIViewsetAnimationRepeatCount:1]; [UIViewsetAnimationCurve:UIViewAnimationCurveEaseInOut]; [UIViewsetAnimationTransition:UIViewAnimationTransitionFlipFromLeftforView:self.centerShowcache:YES]; self.centerShow.image=[UIImageimageNamed:@ "service" ]; [UIViewcommitAnimations]; } |
动画效果:
UIviewBlock动画
iOS4.0以后,增加了Block动画块,提供更简洁的方式来实现动画。
1)Block动画方法
1、最简洁的Block动画:包含时间和动画
1
2
3
4
|
[UIViewanimateWithDuration:(NSTimeInterval) //动画持续时间 animations:^{ //执行的动画 }]; |
2、带有动画完成回调的Block动画
1
2
3
4
5
6
|
[UIViewanimateWithDuration:(NSTimeInterval) //动画持续时间 animations:^{ //执行的动画 }completion:^(BOOLfinished){ //动画执行完毕后的操作 }]; |
3、可设置延迟时间和过渡效果的Block动画
1
2
3
4
5
6
7
8
|
[UIViewanimateWithDuration:(NSTimeInterval) //动画持续时间 delay:(NSTimeInterval) //动画延迟执行的时间 options:(UIViewAnimationOptions) //动画的过渡效果 animations:^{ //执行的动画 }completion:^(BOOLfinished){ //动画执行完毕后的操作 }]; |
UIViewAnimationOptions的枚举值如下,可组合使用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件 UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互 UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewAnimationOptionRepeat //无限重复执行动画 UIViewAnimationOptionAutoreverse //执行动画回路 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置 UIViewAnimationOptionOverrideInheritedCurve //忽略嵌套动画的曲线设置 UIViewAnimationOptionAllowAnimatedContent //转场:进行动画时重绘视图 UIViewAnimationOptionShowHideTransitionViews //转场:移除(添加和移除图层的)动画效果 UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置 UIViewAnimationOptionCurveEaseInOut //时间曲线,慢进慢出(默认值) UIViewAnimationOptionCurveEaseIn //时间曲线,慢进 UIViewAnimationOptionCurveEaseOut //时间曲线,慢出 UIViewAnimationOptionCurveLinear //时间曲线,匀速 UIViewAnimationOptionTransitionNone //转场,不使用动画 UIViewAnimationOptionTransitionFlipFromLeft //转场,从左向右旋转翻页 UIViewAnimationOptionTransitionFlipFromRight //转场,从右向左旋转翻页 UIViewAnimationOptionTransitionCurlUp //转场,下往上卷曲翻页 UIViewAnimationOptionTransitionCurlDown //转场,从上往下卷曲翻页 UIViewAnimationOptionTransitionCrossDissolve //转场,交叉消失和出现 UIViewAnimationOptionTransitionFlipFromTop //转场,从上向下旋转翻页 UIViewAnimationOptionTransitionFlipFromBottom //转场,从下向上旋转翻页 |
4、Spring动画
iOS7.0后新增Spring动画(iOS系统动画大部分采用SpringAnimation,适用于所有可被添加动画效果的属性)
1
2
3
4
5
6
7
8
9
10
11
|
[UIViewanimateWithDuration:(NSTimeInterval) //动画持续时间 delay:(NSTimeInterval) //动画延迟执行的时间 usingSpringWithDamping:(CGFloat) //震动效果,范围0~1,数值越小震动效果越明显 initialSpringVelocity:(CGFloat) //初始速度,数值越大初始速度越快 options:(UIViewAnimationOptions) //动画的过渡效果 animations:^{ //执行的动画 } completion:^(BOOLfinished){ //动画执行完毕后的操作 }]; |
5、Keyframes动画
iOS7.0后新增关键帧动画,支持属性关键帧,不支持路径关键帧
1
2
3
4
5
6
7
8
9
|
[UIViewanimateKeyframesWithDuration:(NSTimeInterval) //动画持续时间 delay:(NSTimeInterval) //动画延迟执行的时间 options:(UIViewKeyframeAnimationOptions) //动画的过渡效果 animations:^{ //执行的关键帧动画 } completion:^(BOOLfinished){ //动画执行完毕后的操作 }]; |
UIViewKeyframeAnimationOptions的枚举值如下,可组合使用:
1
2
3
4
5
6
7
8
9
10
11
12
|
UIViewAnimationOptionLayoutSubviews //进行动画时布局子控件 UIViewAnimationOptionAllowUserInteraction //进行动画时允许用户交互 UIViewAnimationOptionBeginFromCurrentState //从当前状态开始动画 UIViewAnimationOptionRepeat //无限重复执行动画 UIViewAnimationOptionAutoreverse //执行动画回路 UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套动画的执行时间设置 UIViewAnimationOptionOverrideInheritedOptions //不继承父动画设置 UIViewKeyframeAnimationOptionCalculationModeLinear //运算模式:连续 UIViewKeyframeAnimationOptionCalculationModeDiscrete //运算模式:离散 UIViewKeyframeAnimationOptionCalculationModePaced //运算模式:均匀执行 UIViewKeyframeAnimationOptionCalculationModeCubic //运算模式:平滑 UIViewKeyframeAnimationOptionCalculationModeCubicPaced //运算模式:平滑均匀 |
各种运算模式的直观比较如下图:
增加关键帧的方法:
1
2
3
4
5
|
[UIViewaddKeyframeWithRelativeStartTime:(double) //动画开始的时间(占总时间的比例) relativeDuration:(double) //动画持续时间(占总时间的比例) animations:^{ //执行的动画 }]; |
6、转场动画
6.1从旧视图转到新视图的动画效果
1
2
3
4
5
6
7
|
[UIViewtransitionFromView:(nonnullUIView*) toView:(nonnullUIView*) duration:(NSTimeInterval) options:(UIViewAnimationOptions) completion:^(BOOLfinished){ //动画执行完毕后的操作 }]; |
在该动画过程中,fromView会从父视图中移除,并讲toView添加到父视图中,注意转场动画的作用对象是父视图(过渡效果体现在父视图上)。
调用该方法相当于执行下面两句代码:
1
2
|
[fromView.superviewaddSubview:toView]; [fromViewremoveFromSuperview]; |
6.2单个视图的过渡效果
1
2
3
4
5
6
7
8
9
|
[UIViewtransitionWithView:(nonnullUIView*) duration:(NSTimeInterval) options:(UIViewAnimationOptions) animations:^{ //执行的动画 } completion:^(BOOLfinished){ //动画执行完毕后的操作 }]; |
2)实例代码:
1、普通动画
下面三段代码都实现了相同的视图frame的变化,不同之处只在于其延迟时间、过渡效果和结束回调。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
-(void)blockAni1{ [UIViewanimateWithDuration:1.0animations:^{ self.cartCenter.frame=self.centerShow.frame; }]; } -(void)blockAni2{ [UIViewanimateWithDuration:1.0animations:^{ self.cartCenter.frame=self.centerShow.frame; }completion:^(BOOLfinished){ NSLog(@ "动画结束" ); }]; } -(void)blockAni3{ [UIViewanimateWithDuration:1.0delay:1.0options:UIViewAnimationOptionCurveEaseInOutanimations:^{ self.cartCenter.frame=self.centerShow.frame; }completion:^(BOOLfinished){ NSLog(@ "动画结束" ); }]; } |
动画效果:
2、Spring动画
1
2
3
4
5
6
7
|
-(void)blockAni4{ [UIViewanimateWithDuration:1.0delay:0.fusingSpringWithDamping:0.5initialSpringVelocity:5.0options:UIViewAnimationOptionCurveLinearanimations:^{ self.cartCenter.frame=self.centerShow.frame; }completion:^(BOOLfinished){ NSLog(@ "动画结束" ); }]; } |
动画效果:
3、Keyframes动画
这里以实现视图背景颜色变化(红-绿-蓝-紫)的过程来演示关键帧动画。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
-(void)blockAni5{ self.centerShow.image=nil; [UIViewanimateKeyframesWithDuration:9.0delay:0.foptions:UIViewKeyframeAnimationOptionCalculationModeLinearanimations:^{ [UIViewaddKeyframeWithRelativeStartTime:0.frelativeDuration:1.0/4animations:^{ self.centerShow.backgroundColor=[UIColorcolorWithRed:0.9475green:0.1921blue:0.1746alpha:1.0]; }]; [UIViewaddKeyframeWithRelativeStartTime:1.0/4relativeDuration:1.0/4animations:^{ self.centerShow.backgroundColor=[UIColorcolorWithRed:0.1064green:0.6052blue:0.0334alpha:1.0]; }]; [UIViewaddKeyframeWithRelativeStartTime:2.0/4relativeDuration:1.0/4animations:^{ self.centerShow.backgroundColor=[UIColorcolorWithRed:0.1366green:0.3017blue:0.8411alpha:1.0]; }]; [UIViewaddKeyframeWithRelativeStartTime:3.0/4relativeDuration:1.0/4animations:^{ self.centerShow.backgroundColor=[UIColorcolorWithRed:0.619green:0.037blue:0.6719alpha:1.0]; }]; }completion:^(BOOLfinished){ NSLog(@ "动画结束" ); }]; } |
动画效果:
4、转场动画
4.1单个视图的过渡效果
1
2
3
4
5
6
7
|
-(void)blockAni6{ [UIViewtransitionWithView:self.centerShowduration:1.0options:UIViewAnimationOptionTransitionCrossDissolveanimations:^{ self.centerShow.image=[UIImageimageNamed:@ "Service" ]; }completion:^(BOOLfinished){ NSLog(@ "动画结束" ); }]; } |
动画效果:
4.2从旧视图转到新视图的动画效果
1
2
3
4
5
6
7
|
-(void)blockAni7{ UIImageView*newCenterShow=[[UIImageViewalloc]initWithFrame:self.centerShow.frame]; newCenterShow.image=[UIImageimageNamed:@ "Service" ]; [UIViewtransitionFromView:self.centerShowtoView:newCenterShowduration:1.0options:UIViewAnimationOptionTransitionFlipFromLeftcompletion:^(BOOLfinished){ NSLog(@ "动画结束" ); }]; } |
动画效果:
原文作者: 明仔Su(简书作者)
原文链接:http://www.jianshu.com/p/5abc038e4d94