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

介绍

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

2663363188-56274814570c3.png

我们会用到的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)

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

@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实际开发中常用的动画无非是以下四种:UIView动画,核心动画,帧动画,自定义转场动画。 1.UIView...
    请叫我周小帅阅读 3,142评论 1 23
  • 前言 本文只要描述了iOS中的Core Animation(核心动画:隐式动画、显示动画)、贝塞尔曲线、UIVie...
    GitHubPorter阅读 3,651评论 7 11
  • 先看看CAAnimation动画的继承结构 CAAnimation{ CAPropertyAnimation { ...
    时间不会倒着走阅读 1,678评论 0 1
  • IOS FACEBOOK POP动画详解 POP框架介绍 POP 的架构 架构知识了解下就行 POP 目前由四部...
    leonardni阅读 3,114评论 0 11
  • 作为一个平日只喝白开水的地道的北方人,茶好像很熟悉,因为每年临近暑热时单位都会发两大盒,至于这个茶那个茶多多少少知...
    刘丽赏阅读 415评论 0 5