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()
时间： 2024-08-04 18:20:49

Swift - 动画效果的实现方法总结（附样例）的相关文章

Swift - 数组排序方法（附样例）

下面通过一个样例演示如何对数组元素进行排序.数组内为自定义用户对象,最终要实现按用户名排序,数据如下: 1 2 3 4 var userList = [UserInfo]() userList.append(UserInfo(name: "张三", phone: "4234")) userList.append(UserInfo(name: "李四", phone: "1212")) userList.append(UserI

IOS开发－UIView之动画效果的实现方法（合集）

http://www.cnblogs.com/GarveyCalvin/p/4193963.html 前言:在开发APP中,我们会经常使用到动画效果.使用动画可以让我们的APP更酷更炫,最重要的是优化用户体验,但取决于动画的质量.像QQ.微信.新浪微博等APP,动画效果就很好了,至少我很喜欢它们的动画,让我使用起来感觉很顺畅,心情很开朗.本文会介绍UIView效果的实现方法,非核心动画. 一.使用UIView类实现动画 基本写法,代码必须放在Begin和Commit之间: [UIView beg

ADF Faces导出Excel文件【附样例工程】

本文提供一个基于ADF Face组件开发样例工程,工程的实现过程分为3个部分以应对Excel导出开发中常见的处理. 1.空模版文件下载:将Excel文件视为普通文件提供下载操作. 2.数据文件输出,将数据内容输出为Excel文件,目标文件尽在服务端内存中存在,这种方式需要对Excel文件的内容处理,需要引入响应的类库. 3.模版文件填充数据后下载,基于服务端的物理文件为模板,将业务数据填入约定位置后提供下载,在实现方面需要为工作簿对象指定源文件输入流,并完成后续内容处理. 实现的基本思路,由AD

selectpicker 使用简介附样例

最近开发中使用selectpicker下拉框选择国家及地区,以此为样例简单记录下使用方法. 1.从数据库取值初始化下拉框内容. html代码如下,multiple 属性为多选. 1 <select class="col-md-12 padding-none select" id="country" data-live-search="true" multiple > 2 </select> 此处省略后台代码,将数据data

ADF Faces 表格应用基础案例二：动态字段+事件处理【附样例工程】

本文提供一个基于ADF Face组件开发样例工程,实现表格开发中常见的处理: 1.Map对象+Bean对象填充表格的数据行. 2.使用静态列.动态列.嵌套列的实现方法. 3.介绍表格中表单组件的使用方法. 4.介绍表格单行选中事件的处理过程. 本文是基于"ADF Faces 表格应用基础案例一:应用List<Class>填充文本表格"编写的,会省去许多细节部分的介绍. 实现的基本思路: 将样例工程的创建过程分为几个小的阶段,每个阶段实现了不同的目标. 第一阶段: 表格数据:

JS - CommonJS、ES2015、AMD、CMD模块规范对比与介绍（附样例）

一.CommonJS 1,CommonJS 基本介绍 (1)CommonJS 是一种思想,它是为 JS 的表现来制定规范.由于 JS 没有模块系统.标准库较少.缺乏包管理工具,因此 CommonJS 应运而生. (2)CommonJS 的目标是希望 JS 可以在任何地方运行,不只是浏览器中.只要我们的 JavaScript 是根据 CommonJS API 编写的,那么就可以在与 CommonJS 兼容的系统上运行. (3)根据 CommonJS API 编写的 JavaScript 可以做下面

jquery 实现动画效果（各种方法）

1.show()和hide()和toggle()(这是show和hide的一个综合,一个按钮就实现显示和隐藏) 效果: 代码: <button type="button" class="show">普通show</button> <button type="button" class="show1">一秒show</button> <button type="bu

Swift - 使用ALAssetsLibrary获取相簿里所有图片，视频（附样例）

1,ALAssetsLibrary介绍 (1)通过创建ALAssetsLibrary的实例可以访问系统Photos里的图片与视频.这里图片不仅包括相机拍摄的照片,还包括从iTunes导入的和从其他设备里面导入的图片. (2)从ALAssetsLibrary实例中获取得到的对象的生命周期和ALAssetsLibrary这个实例的生命周期一致. (3)通过enumerateGroupsWithTypes方法可以遍历所有的照片分组,再用分组的enumerateAssetsUsingBlock方法可以遍

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

Swift - 动画效果的实现 在iOS中,实现动画有两种方法.一个是统一的animateWithDuration,另一个是组合出现的beginAnimations和commitAnimations.这三个方法都是类方法. 一,使用animateWithDuration来实现动画 (1)此方法共有5个参数: duration:动画从开始到结束的持续时间,单位是秒 delay:动画开始前等待的时间 options:动画执行的选项.里面可以设置动画的效果.可以使用UIViewAnimationOpt