Day12 - 约束动画

效果图

效果图

1、UI布局 第一个页面的布局很简单，就不做介绍了

• 重点讲下第二个的页面的布局
  1.1、在Main.storyboard中拖入一个ViewController

设置大小

1.2、拖入一个imageView，并设置约束下左右为0 上 -20

效果图

1.3、添加返回按钮和标题
拖入button

按钮

拖入label,设置字体居中

label

label

1.4 拖入两个textfiled
选择第一个拖入的textfiled

第一个textfiled

选择第二个textfiled,按住ctrl键

设置如图

如图

1.5、拖入一个button

第一步

第二步

然后在自己选择背景颜色，placehloder，设置image最后效果如下

最终效果

2、创建一个类，继承ViewController,并且和拖入的ViewController进行关联

然后把textfiled、button拖入到你创建的ViewController中

• 然后在点击storyboard中的textfiled

把约束拖入到Viewcontroller中

再次使用上面的方法把密码框的约束也拖入到viewcontroller中
首先先声明属性：PS（你的命名可以与我的不同，自己做出相应的修改）

//账号
    @IBOutlet weak var account: UITextField!

    //密码
    @IBOutlet weak var password: UITextField!
    
    //登录
    @IBOutlet weak var loginBtn: UIButton!
    
    //密码的约束
    @IBOutlet weak var passwordLine: NSLayoutConstraint!
    //账号的约束
    @IBOutlet weak var accouneLine: NSLayoutConstraint!
    
    //按钮的bounds
    var btnBounds : CGRect! = CGRectZero

然后重写下面两个方法

override func viewWillAppear(animated: Bool) {
        super.viewWillAppear(animated)
        passwordLine.constant -= UIScreen.mainScreen().bounds.width
        accouneLine.constant -= UIScreen.mainScreen().bounds.width
        
        btnBounds = loginBtn.bounds
    }
    
    
    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)
        
        UIView.animateWithDuration(0.75) {
            self.accouneLine.constant = 0
            self.view.layoutIfNeeded()
        }
        
        UIView.animateWithDuration(0.75, delay: 0.2, options: UIViewAnimationOptions.CurveLinear, animations: {
            self.passwordLine.constant = 0
            self.view.layoutIfNeeded()
            }, completion: nil)
    }

监听登录按钮点击事件和按下事件

@IBAction func btnTouchDown(sender: UIButton) {
        UIView.animateWithDuration(0.25) { 
            sender.bounds = CGRect(x: self.btnBounds.origin.x + 20, y: 0, width: self.btnBounds.size.width - 40, height: self.btnBounds.size.height)
        }
    }
    
    @IBAction func loginBtnClick(sender: UIButton) {
        UIView.animateWithDuration(0.75, delay: 0, usingSpringWithDamping: 0.35, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: {
            sender.enabled = false
            sender.bounds = CGRect(x: self.btnBounds.origin.x - 40, y: self.btnBounds.origin.y, width: self.btnBounds.size.width + 80, height: self.btnBounds.size.height)
            
            }) { (_) in
                sender.enabled = true
        }
    }

监听返回按钮的点击事件

@IBAction func btn(sender: UIButton) {
        dismissViewControllerAnimated(true, completion: nil)
    }

最后在ViewDidLoad中设置圆角

override func viewDidLoad() {
        super.viewDidLoad()
        loginBtn.layer.cornerRadius = 5
        account.layer.cornerRadius = 5
        password.layer.cornerRadius = 5
        
        
    }

Demo - buttonAnimation