这篇文章主要是为了制作弹簧效果的动画，用户交互时的动画效果

思想：为了让界面看上去的效果就想绑定到了弹簧上，则把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

demo地址

变形动画的实现

截下来认识变形动画的实现，以及混合变形动画。即这次探讨的是如何以动画的方式将视图进行呈现，或者如何以动画的方式将这些动画进行移除。目前，我们知道可以将视图进行淡入或淡出现效果，但是，我们是不是可以通过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

变形动画的demo地址