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 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种过渡动画类型：

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()