iOS动画实践二(UIView的动画你真的会用吗?)

上一章,是我们一个动手实现动画的开头,围绕上一章节的动画,我们再来接着实现这个登录页面的其他功能,我们今天要加上的是登录点击过后的一些效果

给登录按钮加上动画

我们之前给head和输入框都加上了动画,但是点击按钮还是没有出现动画的,我们接下来,给点击按钮加上动画

在登录按钮,我们就不使用像上面的那种效果了,我们换一种,UIView中的弹动效果

在按钮出现之前,我们将按钮的y值增加50,并且alpha设置为0.0

1
2
loginBtn.alpha = 0.0
loginBtn.center.y += 30.0

在将要出现时,我们对他使用动画

1
2
3
4
UIView.animate(withDuration: 0.5, delay: 0.5, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: { 
self.loginBtn.center.y -= 30.0
self.loginBtn.alpha = 1.0
}, completion: nil)

这也是UIView自带的一种动画,其中的
usingSpringWithDamping代表抖动指数 0到1之间
initialSpringVelocity代表的是动画开始的初始速度

能够看到登录按钮有一个抖动的效果,为了效果能明显一点,我故意将值设置很大,在平时开发中,应该要和视觉商量

按钮点击动画

我们在按钮上加上一个动画,在我们点击按钮的时候,让按钮变长一些,并且带有弹簧效果的变长

在按钮的点击事件上,加上

1
2
3
4
5
6
7
8
9
//改变大小
UIView.animate(withDuration: 1.5, delay: 0.0, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [], animations: {
self.loginBtn.bounds.size.width += 80
}, completion: nil)

//改变位置
UIView.animate(withDuration: 0.33, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.0, options: [], animations: {
self.loginBtn.center.y += 60
}, completion: nil)

这种动画效果,和我们刚刚改变按钮的位置的动画效果是一种,spring动画,并且这个在动画未执行完的时候,再次点击,并不会再次从头执行动画

再加一朵菊花,加上一个按钮颜色变化

1
2
3
4
5
6
7
8
9
//菊花加到点击按钮上,先让他隐藏
spinner.frame = CGRect(x: -20.0, y: 6.0, width: 20.0, height: 20.0)
spinner.startAnimating()
spinner.alpha = 0.0
loginBtn.addSubview(spinner)

//在按钮点击的时候,显示出来
self.spinner.center = CGPoint(x: 40.0, y: self.loginBtn.frame.size.height/2)
self.spinner.alpha = 1.0

我们再将之前使用的delay的用户名和密码两个个元素改变一下,得到的效果又不一样

1
2
3
4
5
6
7
UIView.animate(withDuration: 0.5, delay: 0.3, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [], animations: {
self.usernameTextFiled.center.x += self.view.bounds.width
}, completion: nil)

UIView.animate(withDuration: 0.5, delay: 0.4, usingSpringWithDamping: 0.2, initialSpringVelocity: 0.0, options: [], animations: {
self.passwordTextFiled.center.x += self.view.bounds.width
}, completion: nil)

其实,我们可以看出,想要做出简单的动画,其实并不难,主要是参数的使用和方法的使用