iOS开发——动画篇Swift篇&动画效果的实现

时间：2015-07-23 00:15:30 收藏：0 阅读：1411

Swift - 动画效果的实现

在iOS中，实现动画有两种方法。一个是统一的animateWithDuration，另一个是组合出现的beginAnimations和commitAnimations。这三个方法都是类方法。

一，使用animateWithDuration来实现动画

（1）此方法共有5个参数：

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 import UIKit
 2  
 3 class ViewController: UIViewController {
 4      
 5     //游戏方格维度
 6     var dimension:Int = 4
 7     //数字格子的宽度
 8     var width:CGFloat = 50
 9     //格子与格子的间距
10     var padding:CGFloat = 6
11      
12     //保存背景图数据
13     var backgrounds:Array<UIView>!
14      
15     override func viewDidLoad()
16     {
17         super.viewDidLoad()
18         self.backgrounds = Array<UIView>()
19         setupGameMap()
20         playAnimation()
21     }
22      
23     func setupGameMap()
24     {
25         var x:CGFloat = 50
26         var y:CGFloat = 150
27          
28         for i in 0..<dimension
29         {
30             println(i)
31             y = 150
32             for j in 0..<dimension
33             {
34                 //初始化视图
35                 var background = UIView(frame:CGRectMake(x, y, width, width))
36                 background.backgroundColor = UIColor.darkGrayColor()
37                 self.view.addSubview(background)
38                 //将视图保存起来，以备后用
39                 backgrounds.append(background)
40                 y += padding + width
41             }
42             x += padding+width
43         }
44     }
45      
46     func playAnimation()
47     {
48         for tile in backgrounds{
49             //先将数字块大小置为原始尺寸的 1/10
50             tile.layer.setAffineTransform(CGAffineTransformMakeScale(0.1,0.1))
51              
52             //设置动画效果，动画时间长度 1 秒。
53             UIView.animateWithDuration(1, delay:0.01,
54                 options:UIViewAnimationOptions.TransitionNone, animations:
55                 {
56                     ()-> Void in
57                     //在动画中，数字块有一个角度的旋转。
58                     tile.layer.setAffineTransform(CGAffineTransformMakeRotation(90))
59                 },
60                 completion:{
61                     (finished:Bool) -> Void in
62                     UIView.animateWithDuration(1, animations:{
63                         ()-> Void in
64                         //完成动画时，数字块复原
65                         tile.layer.setAffineTransform(CGAffineTransformIdentity)
66                     })
67             })
68         }
69     }
70      
71     override func didReceiveMemoryWarning() {
72         super.didReceiveMemoryWarning()
73         // Dispose of any resources that can be recreated.
74     }
75 }

（5）样例2：只有从小变大的效果

 1 func playAnimation()
 2 {
 3     for tile in backgrounds{
 4         //先将数字块大小置为原始尺寸的 1/10
 5         tile.layer.setAffineTransform(CGAffineTransformMakeScale(0.1,0.1))
 6          
 7         //设置动画效果，动画时间长度 1 秒。
 8         UIView.animateWithDuration(1, delay:0.01,
 9             options:UIViewAnimationOptions.TransitionNone, animations:
10             {
11                 ()-> Void in
12                 tile.layer.setAffineTransform(CGAffineTransformMakeScale(1,1))
13             },
14             completion:{
15                 (finished:Bool) -> Void in
16                 UIView.animateWithDuration(0.08, animations:{
17                     ()-> Void in
18                     tile.layer.setAffineTransform(CGAffineTransformIdentity)
19                 })
20         })
21     }
22 }

（6）样例3：方块从不透明到透明的效果

 1 func playAnimation()
 2 {
 3     for tile in backgrounds{
 4         tile.alpha = 0;
 5          
 6         //设置动画效果，动画时间长度 1 秒。
 7         UIView.animateWithDuration(1, delay:0.01,
 8             options:UIViewAnimationOptions.CurveEaseInOut, animations:
 9             {
10                 ()-> Void in
11             },
12             completion:{
13                 (finished:Bool) -> Void in
14                 UIView.animateWithDuration(1, animations:{
15                     ()-> Void in
16                     tile.alpha = 1
17                 })
18         })
19     }
20 }

二，使用beginAnimations和commitAnimations方法来实现动画

beginAnimations：此方法开始一个动画块，调用commitAnimations结束一个动画块，并且动画块是允许嵌套的。
commitAnimations：此方法用于结束一个动画块，动画是在一个独立的线程中运行的，动画在生效时，所有应用程序不会中断。

在beginAnimations和commitAnimations中间的代码中，我们可以设置各种动画的属性。比如持续时间，使用哪种预置的动画效果等。

（1）淡入，淡出，移动，改变大小动画

 1 //淡出动画
 2 UIView.beginAnimations(nil, context: nil)
 3 UIView.setAnimationDuration(2.0)
 4 imageView.alpha = 0.0
 5 UIView.commitAnimations()
 6  
 7 //淡入动画
 8 UIView.beginAnimations(nil, context: nil)
 9 UIView.setAnimationDuration(2.0)
10 imageView.alpha = 1.0
11 UIView.commitAnimations()
12  
13 //移动动画
14 UIView.beginAnimations(nil, context: nil)
15 UIView.setAnimationDuration(2.0)
16 imageView.center = CGPointMake(250, 250)
17 UIView.setAnimationCurve(UIViewAnimationCurve.EaseOut) //设置动画相对速度
18 UIView.commitAnimations()
19  
20 //大小调整动画
21 UIView.beginAnimations(nil, context: nil)
22 UIView.setAnimationDuration(2.0)
23 imageView.frame = CGRectMake(100,180,50,50)
24 UIView.commitAnimations()

（2）两个视图切换的过渡动画
UIViewAnimationTransition定义了5种过渡动画类型：

None：无过渡动画效果
FlipFromLeft：从左侧向右侧翻转
FlipFromRight：从右侧向左侧翻转
CurlUp：向上卷数翻页
CurlDown：向下翻页

 1 var redView:UIView = UIView(frame: CGRectMake(50,50,150,400))
 2 redView.backgroundColor = UIColor.redColor()
 3 self.view.insertSubview(redView, atIndex: 0)
 4  
 5 var blueView:UIView = UIView(frame: CGRectMake(50,50,150,400))
 6 blueView.backgroundColor = UIColor.blueColor()
 7 self.view.insertSubview(blueView, atIndex: 1)
 8  
 9 UIView.beginAnimations(nil, context: nil)
10 UIView.setAnimationDuration(4.0)
11 UIView.setAnimationTransition(UIViewAnimationTransition.CurlUp, forView: self.view, cache: true)
12 self.view.exchangeSubviewAtIndex(1, withSubviewAtIndex: 0)
13 UIView.commitAnimations()

（3）页面或元件翻转效果

1 //将整个主视图面板实现一个翻转效果
2 UIView.beginAnimations("animation", context: nil)
3 UIView.setAnimationDuration(2)
4 UIView.setAnimationCurve(UIViewAnimationCurve.EaseInOut)
5 UIView.setAnimationTransition(UIViewAnimationTransition.FlipFromLeft, forView: self.view, cache: false)
6 UIView.commitAnimations()

iOS开发——动画篇Swift篇&amp;动画效果的实现

Swift - 动画效果的实现

iOS开发——动画篇Swift篇&动画效果的实现