iOS动画篇：UIView动画

最新推荐文章于 2019-05-08 20:41:05 发布
最新推荐文章于 2019-05-08 20:41:05 发布
阅读量484 收藏
点赞数

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);
}

动画效果：

1644426-f0c6747fb4bcd06e.gif

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];
}

动画效果：

1644426-8db4a85698c4032e.gif

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 //运算模式:平滑均匀

各种运算模式的直观比较如下图：

1644426-2ff1cf991b2e0372.png

增加关键帧的方法：

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(@ "动画结束" );
}];
}

动画效果：

1644426-f0c6747fb4bcd06e (1).gif

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(@ "动画结束" );
}];
}

动画效果：

1644426-5c04af0a0045466f.gif

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(@ "动画结束" );
}];
}

动画效果：

1644426-3e24ae361ce10dc3 (1).gif

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(@ "动画结束" );
}];
}

动画效果：

1644426-20fc02571b2aa0ac.gif

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(@ "动画结束" );
}];
}

动画效果：

1644426-8db4a85698c4032e (1).gif


原文作者: 明仔Su（简书作者）

原文链接：http://www.jianshu.com/p/5abc038e4d94

00烽火连城00
关注
UIView动画
rccrx的博客
05-08 2765
UIView记录 对属性修改加动画：frame、bound、center、transform、alpha、backgroundColor UIViewAnimationOptions一些选项的使用示例、嵌套动画、transition动画、弹簧动画 关键帧动画 +performSystemAnimation:onViews:options:animations:completion: +performWithoutAnimation: +setAnimationsEnabled:
UIView的动画
Cola
03-10 368
iOS开发－UIView之动画效果的实现方法（合集） 前言：在开发APP中，我们会经常使用到动画效果。使用动画可以让我们的APP更酷更炫，最重要的是优化用户体验，但取决于动画的质量。像QQ、微信、新浪微博等APP，动画效果就很好了，至少我很喜欢它们的动画，让我使用起来感觉很顺畅，心情很开朗。本文会介绍UIView效果的实现方法，非核心动画。 一、使用
iOS开发经验分享：UIView应用与移动互联网趋势
这篇资源主要围绕iOS应用开发中的UIView类进行讲解，结合两年的开发经验进行了总结。UIView是iOS开发中非常基础且重要的组件，它是一个空白的画板，允许开发者在其上添加各种视图元素和交互功能。 在iOS开发技术...
iOS动画入门：UIViewAnimation与CABasicAnimation解析
"这篇文档介绍了iOS中两种主要的动画实现方式：UIViewAnimation和CABasicAnimation，并给出了使用示例和特点分析。" 在iOS开发中，动画是提升用户体验的重要手段。这里我们关注的是如何在iOS平台上进行简单的动画...
iOS动画实战：钓鱼小游戏实现与代码解析
这篇教程通过一个简单的钓鱼小游戏实例，展示了如何利用基本的iOS动画技术创建有趣的游戏场景。游戏主要由四个部分构成，其中鱼类的动态表现最为关键。 首先，准备素材是非常重要的一步。在这个游戏中，鱼类的游动...
iOS 动画篇----UIView动画
热门推荐
LOLITA0164的博客
07-04 1万+
一、UIView动画介绍UIView动画实质上是对Core Animation的封装，提供简洁的动画接口。我们可以同过UIView的动画类别来改变控件的frame、bounds、transform、alpha等等，使用界面看起来跟流畅优雅，增加用户交互上等体验。二、UIView 类方法动画1、方法解析：// 动画开始。animationID：动画标识、context：附加参数在设置了代理的情况下，此
入门动画篇之UIview动画（一）
风随花落的博客
01-27 901
在iOS开发中，制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果，吸引他们的眼光 —— 这对于app而言是非常重要的。
iOS 开发之动画篇 - 从 UIView 动画说起
jx_zf的博客
02-17 466
原帖地址：http://www.cocoachina.com/ios/20160215/15262.html 作者：Sindri的小巢 毋庸置疑的：在iOS开发中，制作动画效果是最让开发者享受的环节之一。一个设计严谨、精细的动画效果能给用户耳目一新的效果，吸引他们的眼光 —— 这对于app而言是非常重要的。 本文作为动画文集的第一篇，最开始是想做个qq下拉刷新的水滴动画的制作讲解
ios UIView动画
猴子和派大星
03-22 339
1.导入UIColor+FlatColors和ZLSwipeableView 2.创建uiview .h //主view @property (nonatomic,strong)UIView *Vi; //收藏图片 @property (nonatomic,strong)UIButton *CollectionBtn; //主图片 @property (nonatomic,strong)UIIma...
iOS动画：UIViewPropertyAnimator动画之贝塞尔曲线（15）
tania的专栏
05-08 1147
使用内置的curves效果 前面我们一直使用的系统内置的一些curves效果，比如：linear, ease in, ease out, ease in out。 打开LockScreenViewController.swift添加如下代码 func blurAnimation(_ blurred: Bool) -> () -> Void { return { ...
iOS动画 UIView动画
花小懒的博客
11-02 436
动画效果是iOS界面的重要特色，恰当的使用能给用户视觉上的体验iOS上的动画有三种实现方式： 1.UIView动画 2.CATransition动画 3.CAAnimation动画（核心动画）1.UIView动画//在延展中声明方法 #import "ViewController.h" @interface ViewController () @property (weak,
动画---UIView动画
Nero的专栏
03-25 3895
iOS的动画有很多种 其中UIView的动画的动画比较简单 先介绍一下UIViewAnimationOptions UIViewAnimationOptionLayoutSubviews //提交动画的时候布局子控件，表示子控件将和父控件一同动画。 UIViewAnimationOptionAllowUserInteraction //动画时允许用户交流，比如触摸 UIVi
iOS－UIView动画
980404514_凡凡的专栏
04-06 1158
iOS－UIView动画 今天的主题是UIView的动画。 在iOS中UIView的动画是基于CALayer动画封装。 动画就是静态的图片通过一定频率显示，给人们动画的效果。 UIView动画有基于类方法的实现和基于Block方法块的实现。 一.UIView基于类方法的实现的使用 类方法列表： @interface UIView(UIViewAnimation) +
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值