Swift - 动画效果的实现方法总结(附样例)
- duration:动画从开始到结束的持续时间,单位是秒
- delay:动画开始前等待的时间
- options:动画执行的选项。里面可以设置动画的效果。可以使用UIViewAnimationOptions类提供的各种预置效果
- anmations:动画效果的代码块
- completion:动画执行完毕后执行的代码块
(2)UIView支持动画效果的属性
- frame:此属性包含一个矩形,即边框矩形,此值确定了当前视图在其父视图坐标系中的位置与尺寸
- bounds:也是矩形,边界矩形,它指的是视图在其自己的坐标系中的位置和尺寸,左上角坐标永远是(0,0)
- center:确定视图的中心点在其父视图坐标系中的位置坐标。即定义当前视图在父视图中的位置
- alpha:视图的透明度。(但视图完全透明时,不能响应触摸消息)
- backgroundColor:背景色
- transform:这是一种3×3的变化矩阵。通过这个矩阵我们可以对一个坐标系统进行缩放、平移、旋转以及这两者的任意组操作。
(3)Transform(变化矩阵)的四个常用的变换方法
- CGAffineTransformMake():返回变换矩阵
- CGAffineTransformMakeTranslation():返回平移变换矩阵
- CGAffineTransformMakeScale():返回缩放变换矩阵
- CGAffineTransformMakeRotation():返回旋转变换矩阵
(4)样例1:方块初始缩小为原始尺寸1/10。在1秒的动画中复原到完整大小,同时还伴随旋转效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
import UIKit
class ViewController : UIViewController {
//游戏方格维度
var dimension: Int = 4
//数字格子的宽度
var width: CGFloat = 50
//格子与格子的间距
var padding: CGFloat = 6
//保存背景图数据
var backgrounds: Array < UIView >!
override func viewDidLoad()
{
super .viewDidLoad()
self .backgrounds = Array < UIView >()
setupGameMap()
playAnimation()
}
func setupGameMap()
{
var x: CGFloat = 50
var y: CGFloat = 150
for i in 0..<dimension
{
println (i)
y = 150
for j in 0..<dimension
{
//初始化视图
var background = UIView (frame: CGRectMake (x, y, width, width))
background.backgroundColor = UIColor .darkGrayColor()
self .view.addSubview(background)
//将视图保存起来,以备后用
backgrounds.append(background)
y += padding + width
}
x += padding+width
}
}
func playAnimation()
{
for tile in backgrounds{
//先将数字块大小置为原始尺寸的 1/10
tile.layer.setAffineTransform( CGAffineTransformMakeScale (0.1,0.1))
//设置动画效果,动画时间长度 1 秒。
UIView .animateWithDuration(1, delay:0.01,
options: UIViewAnimationOptions . TransitionNone , animations:
{
()-> Void in
//在动画中,数字块有一个角度的旋转。
tile.layer.setAffineTransform( CGAffineTransformMakeRotation (90))
},
completion:{
(finished: Bool ) -> Void in
UIView .animateWithDuration(1, animations:{
()-> Void in
//完成动画时,数字块复原
tile.layer.setAffineTransform( CGAffineTransformIdentity )
})
})
}
}
override func didReceiveMemoryWarning() {
super .didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}
|
(5)样例2:只有从小变大的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
func playAnimation()
{
for tile in backgrounds{
//先将数字块大小置为原始尺寸的 1/10
tile.layer.setAffineTransform( CGAffineTransformMakeScale (0.1,0.1))
//设置动画效果,动画时间长度 1 秒。
UIView .animateWithDuration(1, delay:0.01,
options: UIViewAnimationOptions . TransitionNone , animations:
{
()-> Void in
tile.layer.setAffineTransform( CGAffineTransformMakeScale (1,1))
},
completion:{
(finished: Bool ) -> Void in
UIView .animateWithDuration(0.08, animations:{
()-> Void in
tile.layer.setAffineTransform( CGAffineTransformIdentity )
})
})
}
}
|
(6)样例3:方块从不透明到透明的效果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
func playAnimation()
{
for tile in backgrounds{
tile.alpha = 0;
//设置动画效果,动画时间长度 1 秒。
UIView .animateWithDuration(1, delay:0.01,
options: UIViewAnimationOptions . CurveEaseInOut , animations:
{
()-> Void in
},
completion:{
(finished: Bool ) -> Void in
UIView .animateWithDuration(1, animations:{
()-> Void in
tile.alpha = 1
})
})
}
}
|
二,使用beginAnimations和commitAnimations方法来实现动画
- beginAnimations:此方法开始一个动画块,调用commitAnimations结束一个动画块,并且动画块是允许嵌套的。
- commitAnimations:此方法用于结束一个动画块,动画是在一个独立的线程中运行的,动画在生效时,所有应用程序不会中断。
在beginAnimations和commitAnimations中间的代码中,我们可以设置各种动画的属性。比如持续时间,使用哪种预置的动画效果等。
(1)淡入,淡出,移动,改变大小动画
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//淡出动画
UIView .beginAnimations( nil , context: nil )
UIView .setAnimationDuration(2.0)
imageView.alpha = 0.0
UIView .commitAnimations()
//淡入动画
UIView .beginAnimations( nil , context: nil )
UIView .setAnimationDuration(2.0)
imageView.alpha = 1.0
UIView .commitAnimations()
//移动动画
UIView .beginAnimations( nil , context: nil )
UIView .setAnimationDuration(2.0)
imageView.center = CGPointMake (250, 250)
UIView .setAnimationCurve( UIViewAnimationCurve . EaseOut ) //设置动画相对速度
UIView .commitAnimations()
//大小调整动画
UIView .beginAnimations( nil , context: nil )
UIView .setAnimationDuration(2.0)
imageView.frame = CGRectMake (100,180,50,50)
UIView .commitAnimations()
|
(2)两个视图切换的过渡动画
UIViewAnimationTransition定义了5种过渡动画类型:
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var redView: UIView = UIView (frame: CGRectMake (50,50,150,400))
redView.backgroundColor = UIColor .redColor()
self .view.insertSubview(redView, atIndex: 0)
var blueView: UIView = UIView (frame: CGRectMake (50,50,150,400))
blueView.backgroundColor = UIColor .blueColor()
self .view.insertSubview(blueView, atIndex: 1)
UIView .beginAnimations( nil , context: nil )
UIView .setAnimationDuration(4.0)
UIView .setAnimationTransition( UIViewAnimationTransition . CurlUp , forView: self .view, cache: true )
self .view.exchangeSubviewAtIndex(1, withSubviewAtIndex: 0)
UIView .commitAnimations()
|
1
2
3
4
5
6
|
//将整个主视图面板实现一个翻转效果
UIView .beginAnimations( "animation" , context: nil )
UIView .setAnimationDuration(2)
UIView .setAnimationCurve( UIViewAnimationCurve . EaseInOut )
UIView .setAnimationTransition( UIViewAnimationTransition . FlipFromLeft , forView: self .view, cache: false )
UIView .commitAnimations()
|
Swift - 动画效果的实现方法总结(附样例)相关推荐
- Swift - SwiftyJSON的使用详解(附样例,用于JSON数据处理)
转自:http://www.hangge.com/blog/cache/detail_968.html Swift - SwiftyJSON的使用详解(附样例,用于JSON数据处理) 2016-01- ...
- Swift - 数组排序方法(附样例)
下面通过一个样例演示如何对数组元素进行排序.数组内为自定义用户对象,最终要实现按用户名排序,数据如下: 1 2 3 4 var userList = [UserInfo]() userList.app ...
- 威纶通触摸屏通过移动图形元件实现动画效果的具体方法
威纶通触摸屏通过移动图形元件实现动画效果的具体方法 如下图所示,首先需要创建我们需要的图库,具体步骤可参考如下:点击"工程文件"-"图片"-"图库&q ...
- 几种实现动画效果的优化方法(will-change属性的使用)
几种实现动画效果的优化方法: 准备知识 GPU是图形处理器,专门处理和绘制图形相关的硬件.GPU是专为执行复杂的数学和几何计算而设计的,使得CPU从图形处理的任务中解放出来,可以执行其他更多的系 ...
- html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
- html如何防止内部撑开,CSS3 流式图片的设置,避免图片撑开所在的容器(附样例)...
CSS3 流式图片效果在许多的图片网站中我们有看到了,下文我们一起来看一篇关于CSS3 流式图片的设置,避免图片撑开所在的容器(附样例)例子,具体的一起来看看. 一般来说,图片占用的空间取决于其内容, ...
- UIView之动画效果的实现方法(合集)
前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量.像QQ.微信.新浪微博等APP,动画效果就很好了,至少我很喜欢它们的动画 ...
- IOS开发-UIView之动画效果的实现方法(合集)
前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量.像QQ.微信.新浪微博等APP,动画效果就很好了,至少我很喜欢它们的动画 ...
- [绍棠_Swift] SwiftyJSON的使用详解(附样例,用于JSON数据处理)
1,SwiftyJSON介绍与配置 SwiftyJSON是个使用Swift语言编写的开源库,可以让我们很方便地处理JSON数据(解析数据.生成数据). GitHub地址:https://github. ...
- android 圆圈扩大动画,Android 实现圆圈扩散水波动画效果两种方法
两种方式实现类似水波扩散效果,先上图为敬 自定义view实现 动画实现 自定义view实现 思路分析:通过canvas画圆,每次改变圆半径和透明度,当半径达到一定程度,再次从中心开始绘圆,达到不同层级 ...
最新文章
- 自定义GridView分页模板
- 10行Python代码自动清理电脑内重复文件,释放双手!
- 工程能力提升管理之道
- 如何使用PHP解析JSON文件? [重复]
- java component创建_spring--打印hello--注解component--自动创建对象
- Ubuntu18.04下安装MySQL
- 按自己喜欢的方式过一生?
- 2019年开源安全现状调查报告发布
- 切图崽的自我修养-[ES6] 编程风格规范
- 学习Java的9张思维导图
- 惠普打印机P1108驱动无法安装怎么处理?
- 基于vue的手机阅读小说类webapp
- 什么是数据标准化、中心化、归一化?SPSS又如何实现?
- 如何double你的能力
- java 实现Word或Excel 转Pdf
- plsql的注册激活
- 黑暗星空中的秘密——《黑暗森林》简评
- https安全证书过期的原因
- python plot坐标轴显示比例一致_绘图,x轴和y轴的比例相同
- 61、弱电工程数据中心的网络架构及其设计思路