• 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 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()
  • 相关阅读:
    Javascript MVC学习杂记3
    Backbone.js 0.9.2 源码分析收藏
    Javascript MVC学习杂记2
    Javascript MVC学习杂记1
    C语言string.h中常用字符函数介绍
    10点网页设计要注意的细节
    js日期函数
    结合回调函数介绍下泛型函数
    【转载】互斥量和信号量的区别
    设计模式之Singleton
  • 原文地址:https://www.cnblogs.com/Free-Thinker/p/4838401.html
Copyright © 2020-2023  润新知