介绍
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)
点击按钮时按钮的动画效果
@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)
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。