登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

查看: 113|回复: 6

iOS UIView动画详解,ios uiviewcontroller

[复制链接]

185

主题

334

帖子

980

金钱

手工艺人

发表于 2018-1-11 14:35:50 | 显示全部楼层 |阅读模式

        

        现在的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。我简单解释一下:闭包是作为一个函数的某个参数出现的,但是在这个参数里面可以执行一些语句,执行一定的逻辑。你可以把闭包理解为一个匿名函数。

        

[Java] 查看源文件 复制代码
()->Void:表示参数为空,返回值为Void,必须要实现这个闭包函数;
((Bool) -> Void)?:表示参数为Bool类型,返回值为Void,后面的?表示这个闭包函数可以为空;

        

        (1)位置动画

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

        

[Java] 查看源文件 复制代码
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表示和正常情况下一样。

        

[Java] 查看源文件 复制代码
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的大小发生改变,按比例的放大缩小。

        

[Java] 查看源文件 复制代码
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在一个时间间隔内发生颜色的渐变,进行颜色的过渡。

        

[Java] 查看源文件 复制代码
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绕圆点进行旋转。

        

[Java] 查看源文件 复制代码
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)重复动画

        

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

        

[Java] 查看源文件 复制代码
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动画的速率效果。大家可以实践一下。

        

[mw_shl_code=java,true]
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.cen

0

主题

6984

帖子

-519

金钱

限制会员

发表于 2018-1-11 14:36:38 | 显示全部楼层
感谢大神分享,必须顶!

16

主题

7025

帖子

884

金钱

手工艺人

发表于 2018-1-11 14:37:49 | 显示全部楼层
感谢大神分享,必须顶!

20

主题

6997

帖子

2147

金钱

手工艺人

发表于 2018-1-11 14:38:13 | 显示全部楼层
内容很好,棒棒哒

23

主题

7021

帖子

1054

金钱

iOS大神

Rank: 6Rank: 6

分享大神

发表于 2018-1-11 14:42:27 | 显示全部楼层
帮帮顶顶!!

14

主题

6989

帖子

1335

金钱

手工艺人

发表于 2018-1-11 14:44:21 | 显示全部楼层
虽不明,但觉厉...

20

主题

7030

帖子

2157

金钱

手工艺人

发表于 2018-1-11 14:47:57 | 显示全部楼层
小弟学习了~支持,支持
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表