相信大家在做電商類的App的時候，一定都會遇到關於購物車的需求，這時候，如果給購物車新增一些動畫，這樣的話，效果會更加的逼真。

直接進入正題吧。還是老規矩，有圖有真相：

1.效果圖：

這是效果圖

2.文章要點：

1.使用組合動畫組。 2.拋物線的實現。 在這裡筆者會通過使用上述兩個支援點來梳理購物車的實現邏輯。筆者只會講解關節程式碼部分，如有需要的demo的，我下面也會有此篇demo的下載連結。

3.實現物體旋轉的程式碼。

   //負責旋轉 rotation
        let basicAnimation = CABasicAnimation(keyPath: "transform.rotation")
        basicAnimation.isRemovedOnCompletion = true
        basicAnimation.fromValue = NSNumber(value: 0)
        basicAnimation.toValue = NSNumber(value: 3 * 2 * M_PI)//這裡是旋轉的角度 共是：3圈 （2 * M_PI）是一圈
        basicAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
 

這裡是的keyPath的路徑'transform.rotation.z'，當然這裡不要是不寫z的話，也是可以的，因為預設的也是繞Z軸旋轉，順便說一下，我們iOS手機端的是左手定則，mac開發是右手定則。 M_PI是半圈，所以這裡的3 * 2 * M_PI是三圈。

4.物體移動路線的制定。

//建立路徑 其路徑是拋物線
        let path : UIBezierPath = UIBezierPath()
        path.move(to: (layer?.position)!)
        path.addQuadCurve(to: finishPoint, controlPoint:CGPoint(x: myWindow.frame.size.width/2, y: rect.origin.y - 40))
        
        //這裡要使用組合動畫 一個負責旋轉，另一個負責曲線的運動
        //建立 關鍵幀動畫 負責曲線的運動
        let pathAnimation : CAKeyframeAnimation = CAKeyframeAnimation(keyPath: "position")//位置的平移
        pathAnimation.path = path.cgPath
 

估計有的同學也猜到了，這裡的keyPath是'position'。當然這裡指的是物體的位移（Z座標為0,平移）,可能有同學對addQuadCurve(),不是特別的瞭解，下面的我也上傳一張圖片，估計大部分都會瞬間懂了。
不是很簡單呀，這是在初三的時候學的拋物線。二次方程，不過在這裡我要感謝我的龔成同學。 這裡的裡面的controllPoint點就A，B,C，中的A點，是不是瞬間大家都懂了。

5.組合動畫的實現的程式碼

     let groups : CAAnimationGroup = CAAnimationGroup()
     groups.animations = [pathAnimation,basicAnimation]
     groups.duration = 1.5//國際單位制 S
     groups.fillMode = kCAFillModeForwards
     groups.isRemovedOnCompletion = false
     groups.delegate = self
     self.layer?.add(groups, forKey: "groups")
 

這裡面就是設定一些動畫的時間和代理什麼的。好了，到此為止，關鍵的程式碼都已經講解完了。 如有問題的可直接評論，或者通過以下方式聯絡筆者： qq: 3145419760 微訊號：WsMl0612 郵箱：[email protected]