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