这篇文章主要是为了制作弹簧效果的动画，用户交互时的动画效果
思想：为了让界面看上去的效果就想绑定到了弹簧上，则把a点到b点的位移动画进行修改，添加类似弹簧效果的路径动画，则可以实现。而每一次路径的方向和位移设置也要有所不同才行。每一次的位移逐渐的减小：即第一次从a点到b点，冲出b点，返回不可以达到到a点，以此循环，知道b点停止。
核心代码：
- usingSpringWithDamping:为控制阻抑的量，逐渐减少，知道控件到达最终的位置。越接近于0.0，则表示越具有弹簧型
initialSpringVelocity：标示动画的初始速度
UIView.animate(withDuration: 0.5, delay: 0.4, usingSpringWithDamping: 0.5, initialSpringVelocity: 0.0, options: [], animations: {
() -> Void in
self.loginButton.center.y -= 30
self.loginButton.alpha = 1.0
}, completion: nil)
这种弹簧动画也可以应用到用户的输入交互上
@IBAction func login(_ sender: Any) {
view.endEditing(true)
UIView.animate(withDuration: 1.5, delay: 0.0, usingSpringWithDamping: 0.1, initialSpringVelocity: 0.0, options: [], animations: {
() -> Void in
self.loginButton.bounds.size.width += 80
}, completion: nil)
UIView.animate(withDuration: 0.33, delay: 0.0, usingSpringWithDamping: 0.7, initialSpringVelocity: 0.0, options: [], animations: {
() -> Void in
self.loginButton.center.y += 60.0
self.loginButton.backgroundColor = UIColor(red: 0.85 ,green : 0.83,blue:0.45,alpha: 1.0);
}, completion: nil)
}
``
效果图：
弹簧动画.gif
变形动画的实现
截下来认识变形动画的实现，以及混合变形动画。即这次探讨的是如何以动画的方式将视图进行呈现，或者如何以动画的方式将这些动画进行移除。目前，我们知道可以将视图进行淡入或淡出现效果，但是，我们是不是可以通过tran si ti o n的方式进行实现呢
transtion 即是可以应用到视图上，有系统预编译好的动画，不是控制器呈现在视图上显示出来的，而是随着动画的运行呈现到视图上的动画效果
截下来我就实现一个点击登录之后，在其上方显示正在认证的动画效果
func showMesage(index index : Int) -> () {
label.text = messages[index]
UIView.transition(with: status, duration: 0.33, options: [.curveEaseOut,.transitionCurlDown], animations: {() -> Void in
self.status.isHidden = false
}, completion: {
(_) -> Void in
//变形动画完成后执行的操作
})
}
`
`
额外价格知识点，就是当模拟器执行动画的时候，动画的执行速度是很快的，我们可以如此设置，以更清楚的在模拟器上查看动画
模拟器显示动画.png
如何设置一连串位置的动画？此时仍是一刚显示出来的banner作为例子
思路：首先保存当前banner的位置，进而利用这个位置设置下一个banner的位置
核心代码：
func removeMessage(index index: Int){
UIView.animate(withDuration: 0.33, delay: 0.0, options: [], animations: {
self.status.center.x += self.view.frame.size.width
}) { (_) -> Void in
self.status.isHidden = true
self.status.center = self.statusPosition
self.showMesage(index: index + 1)
}
}
func resetForm() {
UIView.transition(with: status, duration: 0.2, options: .transitionCurlUp, animations: {
self.status.isHidden = true
self.status.center = self.statusPosition
}, completion: nil)
UIView.animate(withDuration: 0.2, delay: 0.0, options: [], animations: {
self.spinner.center = CGPoint(x: -20.0, y: 16.0)
self.spinner.alpha = 0.0
self.loginButton.backgroundColor = UIColor(red: 0.63, green: 0.84, blue: 0.35, alpha: 1.0)
self.loginButton.bounds.size.width -= 80.0
self.loginButton.center.y -= 60.0
}, completion: nil)
}
让界面上的云朵进行动画的移动
思路：设置云朵的速度，让云朵以一个特定的时间穿出屏幕。统一到达屏幕的右侧，当动画结束的时候设置云朵到他的左侧，循环上述操作
func animateCloud(cloud: UIImageView) {
let cloudSpeed = 45.0 / view.frame.size.width
let duration = (view.frame.size.width - cloud.frame.origin.x) * cloudSpeed
UIView.animate(withDuration: TimeInterval(duration), delay: 0.0, options: .curveLinear, animations: {
cloud.frame.origin.x = self.view.frame.size.width
}, completion: {_ in
cloud.frame.origin.x = -cloud.frame.size.width
self.animateCloud(cloud: cloud)
})
}
``
运行效果：
变形动画.gif
