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

﹏ヽ暗。殇╰゛Y 2022-08-19 04:51 158阅读 0赞

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

# 介绍 #

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

# 我们会用到的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][]

[bVqtmv]: /images/20220731/cddee843d5b045babe204b28b7e5bd38.png
[ios]: http://segmentfault.com/t/ios/blogs