iOS UIView动画详解

现在的iOS开发中，有很多的动画框架可以使用，包括苹果自带的CoreAnimation框架，Facebook的Pop等等，这些的确都是程序员的利器。但是如果我们仅仅是想要实现一些比较简单的动画呢？杀鸡焉用牛刀。我们直接用UIView就可以了。今天我们就来好好聊聊UIView动画，使用Swift编写（大家可以看到我有时候用OC，有时候用Swift，现在的iOS学习的基本技能看着OC代码能写出Swift，照着Swift能写出OC，哈哈）。本示例代码上传至 https://github.com/chenyufeng1991/iOS-UIView-Animation
。

这里方法的调用中常常会用到Swift中的闭包closure，类似于OC中的块block。我简单解释一下：闭包是作为一个函数的某个参数出现的，但是在这个参数里面可以执行一些语句，执行一定的逻辑。你可以把闭包理解为一个匿名函数。

()->Void:表示参数为空，返回值为Void，必须要实现这个闭包函数；
((Bool) -> Void)?：表示参数为Bool类型，返回值为Void，后面的？表示这个闭包函数可以为空；

（1）位置动画

PositionAnimation可以实现View的移动，最简单的就是X轴，Y轴的移动。这里实现几个小方块的移动。

import UIKit

class PositionViewController: UIViewController {

  @IBOutlet weak var greenSquare: UIView!
  @IBOutlet weak var redSquare: UIView!
  @IBOutlet weak var blueSquare: UIView!

  override func viewDidLoad() {
    super.viewDidLoad()

  }

  override func viewDidAppear(animated: Bool) {

    //闭包函数的定义；
    //注意调用动画的方法中的animations,completion使用的都是闭包函数；可以直接在外面定义，里面调用，这样代码更加清晰；
    //这里的闭包需要传入的参数是一个BOOl值；返回值为空；
    //这个是动画执行完成后的回调；
    func completeGreen(v:Bool){
      print("Green Completion")
    }

    func completeRed(v:Bool){
      print("Red Completion")
    }

    func completeBlue(v:Bool){
      print("Blue Completion")
    }

    //这里的闭包参数为空；
    func animGreen(){
      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
    }

    func animRed(){
      self.redSquare.center.y = self.view.bounds.height - self.redSquare.center.y
    }

    func animBlue(){
      self.blueSquare.center.y = self.view.bounds.height - self.blueSquare.center.y
      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
    }

    //参数delay表示延迟，第一个参数表示动画时间；
    //注意调用闭包函数；
    UIView.animateWithDuration(1, delay: 0, options: [], animations: animGreen, completion: completeGreen)
    UIView.animateWithDuration(1, delay: 0.5, options: [], animations: animRed, completion: completeRed)
    UIView.animateWithDuration(1, delay: 1, options: [], animations: animBlue, completion: completeBlue)

  }
}

（2）透明度动画

透明度动画可以让某个View的透明度在0~1之间改变。透明度为1表示全透明，看不见了。透明度为1表示和正常情况下一样。

import UIKit

class OpacityViewController: UIViewController {

    @IBOutlet weak var greenSquare: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        func anim(){
            self.greenSquare.alpha = 0.2   //改变透明度到0.2
        }
        UIView.animateWithDuration(2, animations: anim)//时常为2s；
    }

}

（3）缩放动画

缩放动画可以让一个View的大小发生改变，按比例的放大缩小。

import UIKit

class ScaleViewController: UIViewController {

    @IBOutlet weak var greenSquare: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        func anim(){
            self.greenSquare.transform = CGAffineTransformMakeScale(0.5, 0.5)//缩小为原来的0.5倍；
        }
        UIView.animateWithDuration(1, animations: anim)
    }
}

（4）颜色动画

颜色动画可以让一个View在一个时间间隔内发生颜色的渐变，进行颜色的过渡。

import UIKit

class ColorViewController: UIViewController {

    @IBOutlet weak var greenSquare: UIView!
    @IBOutlet weak var swiftText: UILabel!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        func anim(){
            self.greenSquare.backgroundColor = UIColor.blackColor()
            self.swiftText.textColor = UIColor.blueColor()
        }
        UIView.animateWithDuration(2, animations: anim)
    }

}

（5）旋转动画

可以让某个View绕圆点进行旋转。

import UIKit

class RotationViewController: UIViewController {

    @IBOutlet weak var wheel: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

    }

    func spin(){
        UIView.animateWithDuration(1, delay: 0, options: .CurveLinear, animations: {
            self.wheel.transform = CGAffineTransformRotate(self.wheel.transform, CGFloat(360))//第二个参数是角度；
            }) {
                //结束后仍旧调用spin()函数；
                (finished)-> Void in
                self.spin()
        }

    }//spin()

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        self.spin()
    }

}

（6）重复动画

该动画可以让某个动画过程反复执行。

import UIKit

//重复动画；
class RepeatViewController: UIViewController {

  @IBOutlet weak var blueSquare: UIView!
  @IBOutlet weak var redSquare: UIView!
  @IBOutlet weak var greenSquare: UIView!

  override func viewDidLoad() {
    super.viewDidLoad()

  }

  override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated);

    UIView.animateWithDuration(1) { () -> Void in
      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
    }

    UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.Repeat, animations: { () -> Void in
      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x;
      }, completion: nil)

    //注意这里options的表达式；
    UIView.animateWithDuration(1, delay: 0, options:[UIViewAnimationOptions.Repeat ,UIViewAnimationOptions.Autoreverse], animations: { () -> Void in
      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x;
      }, completion: nil)

  }

}

（7）缓冲动画

这里主要使用了beisaier曲线的效果来改变View动画的速率效果。大家可以实践一下。

import UIKit

class EasingViewController: UIViewController {

  @IBOutlet weak var blueSquare: UIView!
  @IBOutlet weak var redSquare: UIView!
  @IBOutlet weak var greenSquare: UIView!

  @IBOutlet weak var yellowSquare: UIView!

  override func viewDidLoad() {
    super.viewDidLoad()

  }

  override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated);

    UIView.animateWithDuration(1) { () -> Void in

      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x
    }

    UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseIn, animations: { () -> Void in
      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x
      }, completion: nil)

    UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x
      }, completion: nil)

    UIView.animateWithDuration(1, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
      self.yellowSquare.center.x = self.view.bounds.width - self.yellowSquare.center.x
      }, completion: nil)

  }

}

（8）弹簧动画

该动画执行过程中类似弹簧的真实效果，你可以设置弹簧的阻尼和初始速度来达到非常逼真的弹簧抖动。

import UIKit

class SpringViewController: UIViewController {

  @IBOutlet weak var blueSquare: UIView!
  @IBOutlet weak var redSquare: UIView!
  @IBOutlet weak var greenSquare: UIView!

  override func viewDidLoad() {
    super.viewDidLoad()

  }

  override func viewDidAppear(animated: Bool) {

    UIView.animateWithDuration(1) { () -> Void in
      self.blueSquare.center.x = self.view.bounds.width - self.blueSquare.center.x;
    }

    //第三个参数是阻尼，第四个参数是初始速度；第五个参数是动画类型；
    UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0, options: UIViewAnimationOptions.TransitionNone, animations: { () -> Void in
      self.redSquare.center.x = self.view.bounds.width - self.redSquare.center.x;
      }) { (Bool) -> Void in
    }

    UIView.animateWithDuration(1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 1, options: UIViewAnimationOptions.TransitionNone, animations: { () -> Void in
      self.greenSquare.center.x = self.view.bounds.width - self.greenSquare.center.x;
      }) { (Bool) -> Void in
    }

  }

}

这里实现的动画都是非常的简单，大家可以通过下载代码自己尝试一下。后续我会给大家讲解更为高级炫酷的动画。尽请期待。

github主页：https://github.com/chenyufeng1991 。欢迎大家访问！

时间： 2024-10-10 09:20:03

iOS UIView动画详解

iOS UIView动画详解的相关文章

iOS UIView动画详解(Objective-C)

iOS交互式动画详解（上）：iOS 10以下的实现

iOS动画详解(学习动画看这一篇就够了)

"MindManager"学习iOS系列之"CAAnimation-核心动画"详解，让你的应用“动”起来。

android动画详解三动画API概述

iOS开发者证书-详解

转：iOS中socket详解

android动画详解四创建动画

Animation动画详解(十一)——layoutAnimation与gridLayoutAnimation