在iOS中,实现动画有两种方法。一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations。这三个方法都是类方法。
(3)Transform(变化矩阵)的四个常用的变换方法
(4)样例1:方块初始缩小为原始尺寸1/10。在1秒的动画中复原到完整大小,同时还伴随旋转效果。
(5)样例2:只有从小变大的效果
(6)样例3:方块从不透明到透明的效果
二,使用beginAnimations和commitAnimations方法来实现动画
在beginAnimations和commitAnimations中间的代码中,我们可以设置各种动画的属性。比如持续时间,使用哪种预置的动画效果等。
(1)淡入,淡出,移动,改变大小动画
(2)两个视图切换的过渡动画
UIViewAnimationTransition定义了5种过渡动画类型:
一,使用animateWithDuration来实现动画
(1)此方法共有5个参数:
- duration:动画从开始到结束的持续时间,单位是秒
- delay:动画开始前等待的时间
- options:动画执行的选项。里面可以设置动画的效果。可以使用UIViewAnimationOptions类提供的各种预置效果
- anmations:动画效果的代码块
- completion:动画执行完毕后执行的代码块
- frame:此属性包含一个矩形,即边框矩形,此值确定了当前视图在其父视图坐标系中的位置与尺寸
- bounds:也是矩形,边界矩形,它指的是视图在其自己的坐标系中的位置和尺寸,左上角坐标永远是(0,0)
- center:确定视图的中心点在其父视图坐标系中的位置坐标。即定义当前视图在父视图中的位置
- alpha:视图的透明度。(但视图完全透明时,不能响应触摸消息)
- backgroundColor:背景色
- transform:这是一种3×3的变化矩阵。通过这个矩阵我们可以对一个坐标系统进行缩放、平移、旋转以及这两者的任意组操作。
- CGAffineTransformMake():返回变换矩阵
- CGAffineTransformMakeTranslation():返回平移变换矩阵
- CGAffineTransformMakeScale():返回缩放变换矩阵
- CGAffineTransformMakeRotation():返回旋转变换矩阵

|
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 UIKitclass ViewController: UIViewController { //游戏方格维度 var dimension:Int = 4 //数字格子的宽度 var 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. }} |
|
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) }) }) }} |
|
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结束一个动画块,并且动画块是允许嵌套的。
- 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.0UIView.commitAnimations()//淡入动画UIView.beginAnimations(nil, context: nil)UIView.setAnimationDuration(2.0)imageView.alpha = 1.0UIView.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种过渡动画类型:
None:无过渡动画效果
FlipFromLeft:从左侧向右侧翻转
FlipFromRight:从右侧向左侧翻转
CurlUp:向上卷数翻页
CurlDown:向下翻页
|
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() |
(3)页面或元件翻转效果
|
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() |