這篇文章主要是為了制作彈簧效果的動畫，用戶交互時的動畫效果

思想：為了讓界面看上去的效果就想綁定到了彈簧上，則把a(bǔ)點到b點的位移動畫進(jìn)行修改，添加類似彈簧效果的路徑動畫，則可以實現(xiàn)。而每一次路徑的方向和位移設(shè)置也要有所不同才行。每一次的位移逐漸的減?。杭吹谝淮螐腶點到b點，沖出b點，返回不可以達(dá)到到a點，以此循環(huán)，知道b點停止。

核心代碼：

• usingSpringWithDamping:為控制阻抑的量，逐漸減少，知道控件到達(dá)最終的位置。越接近于0.0，則表示越具有彈簧型
  initialSpringVelocity：標(biāo)示動畫的初始速度

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)

這種彈簧動畫也可以應(yīng)用到用戶的輸入交互上

@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地址

變形動畫的實現(xiàn)

截下來認(rèn)識變形動畫的實現(xiàn)，以及混合變形動畫。即這次探討的是如何以動畫的方式將視圖進(jìn)行呈現(xiàn)，或者如何以動畫的方式將這些動畫進(jìn)行移除。目前，我們知道可以將視圖進(jìn)行淡入或淡出現(xiàn)效果，但是，我們是不是可以通過tran si ti o n的方式進(jìn)行實現(xiàn)呢

transtion 即是可以應(yīng)用到視圖上，有系統(tǒng)預(yù)編譯好的動畫，不是控制器呈現(xiàn)在視圖上顯示出來的，而是隨著動畫的運行呈現(xiàn)到視圖上的動畫效果

截下來我就實現(xiàn)一個點擊登錄之后，在其上方顯示正在認(rèn)證的動畫效果

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
           //變形動畫完成后執(zhí)行的操作
        })
    }

`

`
額外價格知識點，就是當(dāng)模擬器執(zhí)行動畫的時候，動畫的執(zhí)行速度是很快的，我們可以如此設(shè)置，以更清楚的在模擬器上查看動畫

模擬器顯示動畫.png

如何設(shè)置一連串位置的動畫？此時仍是一剛顯示出來的banner作為例子

思路：首先保存當(dāng)前banner的位置，進(jìn)而利用這個位置設(shè)置下一個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)
    }

讓界面上的云朵進(jìn)行動畫的移動

思路：設(shè)置云朵的速度，讓云朵以一個特定的時間穿出屏幕。統(tǒng)一到達(dá)屏幕的右側(cè)，當(dāng)動畫結(jié)束的時候設(shè)置云朵到他的左側(cè)，循環(huán)上述操作

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地址