iOS动画编程-View动画[ 2 ] Spring动画

转载地址：  http://segmentfault.com/a/1190000003891753  

介绍

iOS中SpringAnimation是一种常见的动画，其效果就像弹簧一样，会在end point周围摆动几下后再回到end point，这里我们来介绍一下SpringAnimation的使用方法

我们会用到的Method

UIView.animateWithDuration(_:, delay:, 
 usingSpringWithDamping:, 
 initialSpringVelocity:, options:, 
 animations:, completion:)

这次的函数相比上次增加了两个参数:

• usingSpringWithDamping: 参数的范围为0.0f到1.0f，数值越小「弹簧」的振动效果越明显。可以视为弹簧的劲度系数

• initialSpringVelocity: 表示动画的初始速度，数值越大一开始移动越快。

Demo

继续上次的Demo，我们在viewWillAppear中先修改控件位置

  override func viewWillAppear(animated: Bool) {
    super.viewWillAppear(animated)
    heading.center.x -= view.bounds.width
    username.center.x -= view.bounds.width
    password.center.x -= view.bounds.width
    loginButton.center.y += 30.0
    loginButton.alpha = 0
    }

加特技!

隐藏登录按钮

UIView.animateWithDuration(1.0, delay: 0.8, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
        //先隐藏登录按钮
        self.loginButton.center.y -= 30.0
        self.loginButton.alpha = 1.0
        }, completion: nil)

 在viewDidAppear方法中，使用Spring动画使按钮弹出，同时透明度变成1

UIView.animateWithDuration(1.0, delay: 0.8, usingSpringWithDamping: 0.5, initialSpringVelocity: 0, options: UIViewAnimationOptions.CurveEaseOut, animations: { () -> Void in
self.loginButton.center.y -= 30.0
self.loginButton.alpha = 1.0
}, completion: nil)

点击按钮时按钮的动画效果

  
  

   
   全选<button href="javascript:void(0);" _xhe_href="javascript:void(0);" class="copyCode btn btn-xs" data-clipboard-text="" @ibaction="" func="" login()="" {"="" data-toggle="tooltip" data-placement="top" title="" style="overflow: visible; color: rgb(255, 255, 255); font-family: inherit; font-size: 12px; font-style: inherit; font-variant: inherit; line-height: 1.5; margin: 0px 0px 0px 5px; cursor: pointer; vertical-align: middle; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 1px 5px; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; -webkit-user-select: none; outline: 0px; background-color: rgba(0, 0, 0, 0.74902);">复制
   
   放进笔记
  
  
@IBAction func login() {
view.endEditing(true)
    
let bounds = self.loginButton.bounds
//使按钮的位置向下移动20，宽度增加80
UIView.animateWithDuration(1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 20, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
        self.loginButton.bounds = CGRect(x: bounds.origin.x-20, y: bounds.origin.y, width: bounds.size.width+80, height: bounds.size.height)
        }) { _ in
            //完成的动作
}
    //spinner出现，调整位置，调整Button颜色
    UIView.animateWithDuration(0.33, delay: 0, options: UIViewAnimationOptions.CurveEaseInOut, animations: { () -> Void in
        self.loginButton.center.y += 60
        self.spinner.alpha = 1.0
        self.spinner.center = CGPoint(x: 40, y: self.loginButton.frame.size.height/2)
        self.loginButton.backgroundColor = UIColor(red: 0.85, green: 0.83, blue: 0.45, alpha: 1.0)
        
        }, completion: nil)
    
  }

• ios