UIView动画补充
我自己的总结：
// 第一种： Duration 时间 animations：动画体
/*
[UIView animateWithDuration:4 animations:^{
CGRect rect = redView.frame;
rect.origin.y += 25;
redView.frame = rect;
}];
*/
// 第二种： Duration 时间 animations：动画体 动画优点卡顿 相比第一种动画结束增加了一个回调
/*
[UIView animateWithDuration:4 animations:^{
CGRect rect = redView.frame;
rect.origin.y += 25;
redView.frame = rect;
} completion:^(BOOL finished) {
//动画结束
CGRect rect = redView.frame;
rect.origin.y -= 25;
redView.frame = rect;
}];
*/
//第三种：相比前两种增加一个延时，
/*
[UIView animateWithDuration:2 delay:0 options:UIViewAnimationOptionCurveLinear animations:^{
CGRect rect = redView.frame;
rect.origin.y += 100;
redView.frame = rect;
} completion:^(BOOL finished) {
}];
*/
//第四种： 弹簧效果动画
//usingSpringWithDamping：弹簧动画的阻尼值，也就是相当于摩擦力的大小，该属性的值从0.0到1.0之间，越靠近0，阻尼越小，弹动的幅度越大，反之阻尼越大，弹动的幅度越小，如果大道一定程度，会出现弹不动的情况。
// initialSpringVelocity：弹簧动画的速率，或者说是动力。值越小弹簧的动力越小，弹簧拉伸的幅度越小，反之动力越大，弹簧拉伸的幅度越大。这里需要注意的是，如果设置为0，表示忽略该属性，由动画持续时间和阻尼计算动画的效果。
/*
[UIView animateWithDuration:2 delay:0 usingSpringWithDamping:0.1 initialSpringVelocity:0.5 options:UIViewAnimationOptionCurveLinear animations:^{
CGRect rect = redView.frame;
rect.origin.y += 100;
redView.frame = rect;
} completion:^(BOOL finished) {
}];
*/
/**
UIViewAnimationOptionTransitionNone = 0 << 20, // default
UIViewAnimationOptionTransitionFlipFromLeft = 1 << 20,
UIViewAnimationOptionTransitionFlipFromRight = 2 << 20,
UIViewAnimationOptionTransitionCurlUp = 3 << 20,
UIViewAnimationOptionTransitionCurlDown = 4 << 20,
UIViewAnimationOptionTransitionCrossDissolve = 5 << 20,
UIViewAnimationOptionTransitionFlipFromTop = 6 << 20,
UIViewAnimationOptionTransitionFlipFromBottom = 7 << 20,
*/
//第五种： 翻页，旋转
/*
[UIView transitionWithView:redView duration:2 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
} completion:^(BOOL finished) {
}];
*/
//第六种： 页面反动
/*
[UIView transitionFromView:blueView toView:redView duration:5 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
[UIView transitionFromView:redView toView:blueView duration:5 options:UIViewAnimationOptionTransitionFlipFromLeft completion:^(BOOL finished) {
}];
}];
*/
//第六种： 页面反动,系统动画performSystemAnimation只有一种删除动画，不知道为什么
/*
[UIView performSystemAnimation:UISystemAnimationDelete onViews:@[redView] options:UIViewAnimationOptionTransitionNone animations:^{
} completion:^(BOOL finished) {
}];
*/
[UIView animateKeyframesWithDuration:5 delay:0 options:UIViewKeyframeAnimationOptionAutoreverse animations:^{
[UIView addKeyframeWithRelativeStartTime:0 relativeDuration:1 animations:^{
CGRect rect = redView.frame;
rect.origin.y += 500;
redView.frame = rect;
}];
[UIView addKeyframeWithRelativeStartTime:1 relativeDuration:3 animations:^{
CGRect rect = redView.frame;
rect.origin.y -= 700;
redView.frame = rect;
}];
[UIView addKeyframeWithRelativeStartTime:3 relativeDuration:5 animations:^{
CGRect rect = redView.frame;
rect.origin.y += 1000;
redView.frame = rect;
}];
} completion:^(BOOL finished) {
}];
别人转载：http://www.cocoachina.com/ios/20160727/17199.html
一.大小动画（改变frame）
1.展示效果
fram大小变化
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
11
|
-(void)changeFrame{ CGRect originalRect = self.anView.frame; CGRect rect = CGRectMake(self.anView.frame.origin.x-20, self.anView.frame.origin.y-120, 160, 80); [UIView animateWithDuration:1 animations:^{ self.anView.frame = rect; } completion:^(BOOL finished) { [UIView animateWithDuration:1 animations:^{ self.anView.frame = originalRect; }]; }];} |
二.拉伸动画（改变bounds）
1.展示效果
bounds变化
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)changeBounds{ CGRect originalBounds = self.anView.bounds; //尽管这个rect的x，y跟原始的不同，动画也只是改变了宽高 CGRect rect = CGRectMake(0, 0, 300, 120); [UIView animateWithDuration:1 animations:^{ self.anView.bounds = rect; } completion:^(BOOL finished) { [UIView animateWithDuration:1 animations:^{ self.anView.bounds = originalBounds; }]; }];} |
三.转移动画（改变center）
1.展示效果
center变化.gif
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
11
|
-(void)changeCenter{ CGPoint originalPoint = self.anView.center; CGPoint point = CGPointMake(self.anView.center.x, self.anView.center.y-170); [UIView animateWithDuration:0.3 animations:^{ self.anView.center = point; } completion:^(BOOL finished) { [UIView animateWithDuration:1 animations:^{ self.anView.center = originalPoint; }]; }];} |
谢谢二爷的示范，经典的表情也勾起很多人的回忆。好，我们回到现实，以上的3个例子，大家不难发现共同的特点和重复性。
1.都是改变UIView的属性就可以产生动画
2.都是带有block做结束回调，对结束监控
3.动画大小和位置变化可以通过多种方式实现
“佛爷，是不是很好奇我们并没有使用Tom先生很多图片组逐一显示？来，也请您下矿一走！”。“哈哈，好！不过那碗河水我还是要倒的”，“行，随你翻腾~”。
四.旋转动画(改变transform)
1.展示效果
transform变化.gif
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)transform{ CGAffineTransform originalTransform = self.anView.transform; [UIView animateWithDuration:2 animations:^{ //self.anView.transform = CGAffineTransformMakeScale(0.6, 0.6);//缩放 //self.anView.transform = CGAffineTransformMakeTranslation(60, -60); self.anView.transform = CGAffineTransformMakeRotation(4.0f); } completion:^(BOOL finished) { [UIView animateWithDuration:2 animations:^{ self.anView.transform = originalTransform; }]; }];} |
五.透明度动画(改变alpha)
1.展示效果
alpha变化.gif
2.Show Code
|
1
2
3
4
5
6
7
8
9
|
-(void)alpha{ [UIView animateWithDuration:2 animations:^{ self.anView.alpha = 0.3; } completion:^(BOOL finished) { [UIView animateWithDuration:2 animations:^{ self.anView.alpha = 1; }]; }];} |
卓先生，停停停，来，回到我们舞台中间来。就以上5中都能让您玩的这么愉快，以上都是仅仅修改本身的属性值，我再介绍剩下三种基于UIView特别的动画，一个是Keyframe，一个Spring和Transition动画。一人一个轮着来，卓先生你先。
六.背景颜色Keyframes动画（改变background）
1.展示效果
background变化.gif
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
-(void)changeBackground{ [UIView animateKeyframesWithDuration:9.0 delay:0.f options:UIViewKeyframeAnimationOptionCalculationModeLinear animations:^{ [UIView addKeyframeWithRelativeStartTime:0.f relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.9475 green:0.1921 blue:0.1746 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:1.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.1064 green:0.6052 blue:0.0334 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:2.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.1366 green:0.3017 blue:0.8411 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor colorWithRed:0.619 green:0.037 blue:0.6719 alpha:1.0]; }]; [UIView addKeyframeWithRelativeStartTime:3.0 / 4 relativeDuration:1.0 / 4 animations:^{ self.anView.backgroundColor = [UIColor whiteColor]; }]; } completion:^(BOOL finished) { NSLog(@"动画结束"); }];} |
七.Spring动画（iOS 7.0起）
1.展示效果
spring动画.gif
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
11
12
|
-(void)springAnimation{ CGRect originalRect = self.anView.frame; CGRect rect = CGRectMake(self.anView.frame.origin.x-80, self.anView.frame.origin.y, 120, 120); [UIView animateWithDuration:0.4 delay:0 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{ self.anView.frame = rect; } completion:^(BOOL finished) { [UIView animateWithDuration:1 delay:1 usingSpringWithDamping:0.5 initialSpringVelocity:4 options:UIViewAnimationOptionCurveLinear animations:^{ self.anView.frame = originalRect; } completion:^(BOOL finished) { }]; }];} |
八.transition动画
1.展示效果
transition动画.gif
2.Show Code
|
1
2
3
4
5
6
7
8
9
10
|
-(void)transitionAnimation{ [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromLeft animations:^{ //self.anView.backgroundColor = [UIColor blueColor]; } completion:^(BOOL finished) { [UIView transitionWithView:self.anView duration:2.0 options:UIViewAnimationOptionTransitionFlipFromRight animations:^{ //self.anView.backgroundColor = [UIColor greenColor]; } completion:^(BOOL finished) { }]; }];} |
九.关于参数option选择说明
1.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 //转场，从下向上旋转翻页 |
2.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 //运算模式 :平滑均匀 |
就UIView的动画而言，UIViewKeyframeAnimationOptions紧在Keyframes，其余的都是UIViewAnimationOptions。
十.总结和扩展
1.UIView动画主要是变化UIView的自带属性
2.UIView动画可以有很多种方式实现同一效果
3.Spring动画iOS 7.0以上才有
4.UIViewKeyframeAnimationOptions用着Keyframes动画，其余都用UIViewAnimationOptions枚举
UIView动画补充的更多相关文章
- iOS之UIview动画
一.UIView动画(首尾) 1.简单说明 UIKit直接将动画集成到UIView类中,当内部的一些属性发生改变时,UIView将为这些改变提供动画支持 执行动画所需要的工作由UIView类自动完成, ...
- iOS核心动画以及UIView动画的介绍
我们看到很多App带有绚丽狂拽的特效,别出心裁的控件设计,很大程度上提高了用户体验,在增加了实用性的同时,也赋予了app无限的生命力.这些华丽的效果很多都是基于iOS的核心动画原理实现的,本文介绍一些 ...
- 转一篇简洁的UIView动画编程方法
iOS 中的 UIView 动画编程其实还是很简单的,像 CSS3 一样,在给定的时间内完成状态连续性的变化呈现.比如背景色,Frame 大小,位移.翻转,特明度等. 以前我使用的编程方式都是用下面 ...
- UIView动画
UIView动画 一.commitAnimations方式使用UIView动画 1.commitAnimations方式使用UIView动画 [UIView beginAnimations:@&quo ...
- UIView动画效果
做出UI界面,实现程序功能,是重中之重,但是通过动画提升使用体验,一般人应该不会拒绝吧. 那么问题又来了,怎么做? 一: 稳扎稳打: 一步一步来吧,毕竟,心急吃不了热豆腐. 1.开启一个动画 2,设置 ...
- 核心动画和UIView动画的区别
核心动画和UIView动画的区别 1.核心动画制作用在Layer 2.核心动画的修改的属性都是假象,他的真实位置没有发生变化()
- 个人学习对UIView动画的总结
我的博客之前已经开通五个月了,但是一直没有写东西.一是不敢写,二是也不知道写啥.毕竟是一个刚刚入行大半年的菜鸟,现在总想通过各种办法提高自己.之前总感觉用到一些东西,只是当时搞懂了一点,加上并没有总结 ...
- UIView动画学习笔记
UIView的动画是通过修改控件的属性来达到动画的效果,如:渐变, 移动. 废话不多说,直接上代码: - (void)loadView{ [super loadView]; _leftView = [ ...
- iOS动画篇：UIView动画
iOS的动画效果一直都很棒很,给人的感觉就是很炫酷很流畅,起到增强用户体验的作用.在APP开发中实现动画效果有很多种方式,对于简单的应用场景,我们可以使用UIKit提供的动画来实现. UIView动画 ...
随机推荐
- 几个shell程序设计小知识(shell常识部分)
[转自]http://blog.chinaunix.net/uid-168249-id-2860686.html 引用:一.用户登陆进入系统后的系统环境变量: $HOME 使用者自己的目录 $PA ...
- Sprite和UI Image的区别
Unity3D最初是一个3D游戏引擎,而从4.3开始,系统加入了Sprite组件,Unity也终于有了2D游戏开发的官方解决方案.4.6更是增加了新的UI系统uGUI,使得使用Unity开发2D游戏效 ...
- 再不学会这些技巧，你就OUT了！
俗话说的好:技多不压身!这句话真是一点都没错,尤其是在21世纪的今天,作为老师的你,如果不会使用下面所要说的这款神器,恐怕你就像玩游戏一样,要被get out!那到底是什么呢?它就是现在正在全国初高中 ...
- 判断字符串String是否为空问题
一.判断一个字符串str不为空的方法有: 1.str == null; 2."".equals(str): 3.str.length <= 0; 4.str.isEmpty( ...
- NopCommerce的定时任务分析和应用
NOP的定时任务也是群里听群友听说,我很少在WEB端做定时任务,所以尝鲜下,看看效果怎么样. 主要涉及到下面几个类和配置文件配置: web.config <configSections> ...
- libui-node体验笔记
简介 libui-node是基于libui库的node封装.libui库是一个简便的将本地原生的GUI封装的C语言库,并支持各平台(Mac,Linux,windows).官网提供了第三方封装文档,开发 ...
- ch6-定制数据对象（打包代码和数据）
为了看出数据属于哪个选手,教练向各个选手的数据文件中添加了标识数据:选手全名,出生日期,计时数据. 例如:sarah文件的数据更新为: Sarah Sweeney,2002-6-17,2:58,2.5 ...
- Linux 虚拟终端：screen
screen 是一个虚拟终端,我们可以把执行时间很长的命令放在虚拟终端中执行,即使终端断开,这个虚拟终端也会在后台执行 [root@localhost ~]$ yum install -y scree ...
- 查询软件和硬件列表清单[将文章里代码另存为 list.vbs,双击运行就会出现一个html页面]
'==========================================================================' Name: 查询软件和硬件列表清单' 不支持W ...
- Effective C++ —— 让自己习惯C++（一）
条款01 : 视C++为一个语言联邦 C++ == C(C基本语法) + Object-Oriented C++(类,封装,继承,多态……) + Template C++(泛型编程) + STL(容器 ...