Swift — 做個抽卡機（功能篇）

前言

應該會有人想要問：

Why？ 為什麼我要再做一次抽卡機？

我的回答是：

因為____的，我做得有點爛Ｒ～

前幾天的挑戰賽我們有實作了「 天堂m 」的抽卡機，但是當天實作的時候有些小細節沒有實現到很完美，其中有一點就是「 抽牌滾動速度是越來越慢的 」，而且當天也檢討了一點就是大部分的人的實作方法都是先生成一長串的圖片在遮罩後面滾動，但是假如今天你有 1000、甚至 10000 張，你敢保證你的程式不會卡頓、不會跑不動嗎？

因此當天我們工作室有一個聰明的工程師就想到了，像是他可以用兩張圖片來實現輪播效果，只要在第一張圖片離開畫面時移動到第二張圖片後面，如此這邊重複循環，看似有無限重複滾動的效果，其實只是兩張圖片不停更換圖片、不停位移。

真的，身為一個工程師，應該要想到有這些問題，而不是單純的應付過去。

因此，我才會打算重做一個抽卡機，改善上述所提到的所有問題，但我單純覺得這樣還不夠，所以我就開始思考有沒有除了 “ 兩張輪播 ” 這個方式以外的方法（ 就是不想跟別人做一樣的啦哈哈 ），就想到了：「 那我可不可以不斷的產生一張圖片跑一個動畫，我動畫結束之後就將這張圖片移除 ，只留下我抽中的最後一張圖片。 」於是就開始我的實作旅程。

自我挑戰開始：

首先我開始思考，哪些功能可以獨立出來，因此我想要先建立產生圖片以及圖片動畫兩種效果。

首先我們首先需要建立一個 View 做為我們的顯示圖片的 View，並且將他的 clipsToBounds 設置為 true，之後我們還需要幾個變數來使用：

var imageArray = [String]() // 之後會放入圖片名稱
var current = 0 // 顯示目前產生到第幾個圖片
var end = 0 // 最後一張圖片的數字
var time = 0.0 // 動畫時間以及 Timer 時間
var finalNumber = 0 // 紀錄顯示抽到的圖片名稱

• 建立圖片

func createRandomImage(createQuantity:Int,endNumber:Int,addView:UIView) {
let imageView = UIImageView()
let randomNumber = Int(arc4random() % UInt32(imageArray.count - 1)) + 1 // 用來取得我們 imageArray 中的隨機數
// 隨機圖片
imageView.image = UIImage(named: imageArray[randomNumber])
imageView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
imageView.layer.borderColor = UIColor.black.cgColor
imageView.layer.borderWidth = 5
imageView.clipsToBounds = true
finalNumber = randomNumber
addView.addSubview(imageView)
imageAnimation(imageView: imageView)
}

• 圖片動畫效果

func imageAnimation(imageView:UIImageView) {
imageView.center.x += imageView.frame.width
  UIView.animate(withDuration: time, animations: {
  imageView.center.x -= imageView.frame.width
  }) { (finish) in
    // 判斷當前值如果不等於結束值，就在執行一次動畫結束就 Remove 掉。
    // 因此我們會留下最後一張 View
    if self.current != self.end {
    UIView.animate(withDuration: self.time, animations: {
    imageView.center.x -= imageView.frame.width
  }, completion: { (finish) in
  imageView.removeFromSuperview()
  })
  } else {
  // if current == end ，抽中最後一張動畫效果。
  // 創建閃光效果的 View。
  let effectView = UIView()
  effectView.frame = CGRect(x: 0, y: 0, width: 300, height: 300)
  effectView.backgroundColor = UIColor.white
  effectView.alpha = 0
  imageView.addSubview(effectView)
  // 圖片閃光效果，結束後將 effectView 給 Remove 掉。
  UIView.animate(withDuration: 0.5, delay: 0, options: UIViewAnimationOptions.curveLinear, animations: {
  effectView.alpha = 1
  self.maskView.layer.borderColor = UIColor.green.cgColor
  self.maskView.layer.borderWidth = 5
  }, completion: { (finish) in
  effectView.alpha = 0
  effectView.removeFromSuperview()
  })
  }
 }
}

• 定義隨機圖片的方法

// 隨機產生圖片方法
func randomImage(addView:UIView) {
  Timer.scheduledTimer(withTimeInterval: time, repeats: false) { (timer) in
  self.current += 1 // 增加目前數量。
  self.time = self.time * 1.1 // 抽卡動畫時間漸慢。
  if self.current == self.end {
  // 如果 current == end ，停止 Timer。
  timer.invalidate()
  self.playButton.isEnabled = true
  self.playButton.backgroundColor = UIColor.green
  self.playButton.setTitle("Start!", for: UIControlState.normal)
  // 顯示抽卡資訊
  self.showCardInfo()
  } else {
  // 如果 current != end ，則在調用一次自己（ 這個方法 ）
  self.createRandomImage(createQuantity: self.current, endNumber:   self.end, addView: addView)
   self.randomImage(addView: addView)
  }
 }
}

Demo：

重做一個抽卡機

這邊文章因為時間關係（ 有點 Delay ），所以大部分是用程式碼來講解運作過程，請大家見諒，詳細 Demo 放在 Github 請大家小力鞭：

JeremyXue77/SlotMachineAnimation-Simple-