感谢作者Sindri的小巢的文章iOS动画-从UIView动画说起，里面详细介绍关于UIView动画更多的基础知识
用UIView动画做的登录页面，很简单一看就懂直接能用适合像我一样的初学者，这里用到了杜蕾斯动画和杜蕾斯弹簧动画和snapkit约束
UIview动画.gif
杜蕾斯动画的闭包和几个参数的意思
UIView.animate(withDuration: TimeInterval, delay: TimeInterval, options: UIViewAnimationOptions, animations: {
code
}) { (Bool) in
code
}
1.duration： 动画时长
2.delay： 动画在延迟多久之后执行
3.options：动画的展示
4.animations：动画执行的代码块
5.completion：动画结束后执行的代码块
杜蕾斯弹簧动画
UIView.animate(withDuration: TimeInterval, delay: TimeInterval, usingSpringWithDamping: CGFloat, initialSpringVelocity: CGFloat, options: UIViewAnimationOptions, animations: {
code
}) { (true) in
code
}
1.damping：速度衰减比例。取值范围0 ~ 1，值越低震动越强
2.initialSpringVelocity：初始化速度，值越高则物品的速度越快
基础工作就准备到这了，下面就是代码的实现过程
变量的声明
var l1: UILabel?
var l2: UILabel?
var button: UIButton?
初始化UI
override func viewDidLoad() {
super.viewDidLoad()
setupUI()
}
func setupUI() {
//初始化UI
l1 = UILabel()
l1?.text = "boom"
l1?.backgroundColor = UIColor.red
l2 = UILabel()
l2?.text = "live"
l2?.backgroundColor = UIColor.green
button = UIButton()
button?.backgroundColor = UIColor.red
button?.setTitle("我是一个button", for: .normal)
button?.addTarget(self, action: #selector(click), for: .touchUpInside)
button?.alpha = 0
self.view.addSubview(l1!)
self.view.addSubview(l2!)
self.view.addSubview(button!)
//snapkit布局代码
self.l1?.snp.makeConstraints({ (make) in
make.left.equalTo(10)
make.width.equalTo(100)
make.height.equalTo(30)
make.top.equalTo(100)
})
self.l2?.snp.makeConstraints({ (make) in
make.left.equalTo(10)
make.width.equalTo(100)
make.height.equalTo(30)
make.top.equalTo(200)
})
self.button?.snp.makeConstraints({ (make) in
make.left.equalTo(50)
make.width.equalTo(200)
make.height.equalTo(30)
make.top.equalTo(300)
})
}
进入页面后的动画实现
override func viewWillAppear(_ animated: Bool) {
//每次页面进来之前要先把l1和l2移到屏幕左侧看不见的位置，当然也可以在布局时直接设在外面
self.l1?.snp.updateConstraints({ (make) in
make.left.equalTo(-100)
})
self.l2?.snp.updateConstraints({ (make) in
make.left.equalTo(-100)
})
}
override func viewDidAppear(_ animated: Bool) {
//实现杜蕾斯动画闭包，这里会用到闭包嵌套闭包
UIView.animate(withDuration: 1, delay: 0.2, options: .curveEaseIn, animations: {
//通过更改约束的left属性，让l1和l2从左侧进来
self.l1?.snp.updateConstraints({ (make) in
make.left.equalTo(100)
})
self.l2?.snp.updateConstraints({ (make) in
make.left.equalTo(100)
})
//一定要调用layoutIfNeeded，否则动画不执行
self.view.superview?.layoutIfNeeded()
}) { (true) in
//当label动画做完后追加button的动画实现淡入效果
UIView.animate(withDuration: 1.5, delay: 0, options: .curveEaseIn, animations: {
//只需要把透明值设成1 就可以了
self.button?.alpha = 1
}, completion: nil)
}
}
按钮动画实现
func click(){
//实现杜蕾斯弹性动画
UIView.animate(withDuration: 1, delay: 0, usingSpringWithDamping: 0.2, initialSpringVelocity: 8, options: [], animations: {
//最好使用bounds x和y的坐标 要与变化的width和height相对应 增大多少就要相应的减少多少
self.button?.bounds = CGRect(x: (self.button?.bounds.origin.x)! - 20, y: (self.button?.bounds.origin.y)! - 1, width: (self.button?.bounds.size.width)! + 40, height: (self.button?.bounds.size.height)! + 2)
//动画时间使按钮不能点击
self.button?.isEnabled = false
}) { (true) in
//恢复按钮
self.button?.isEnabled = true
}
//记得要不bounds设置回去，一定要写在闭包外边，请自行试试写在动画执行后的代码块completion里是什么效果
self.button?.bounds.size = CGSize(width: 200, height: 30)
}
代码到这里就ok了，动画这方面实在是个坑啊 想要把动画做好需要花费大量的时间研究，建议最好先把app整体实现了，在考虑往里边加动画，相信我绝对不晚，如果是新手的话上来就实现动画逻辑会很耽误很多时间的，当然前端开发者如果能作的一手好动画相信你的工资一定会加的。
