#12 在iOS App播放動畫- 利用UIImageView、陣列array

利用 UIImageView 及array實現多張圖片連續播放的動畫

GIF動畫其實是由很多張連續動作的圖片組成的，在iOS App中無法直接播放GIF，但透過UIImageView就可以做出多張圖片播放的動畫效果。

（左）連續播放動畫；（右）只播放動畫2次。

操作步驟：
1. 網路下載GIF或自己製作動畫圖片。
2. 將GIF轉成多張圖片，在xcode中，只能使用JPG及PNG的圖片。
3. 將圖片們加入Assets.xcassets。
4. 在ViewController.swift裡的func viewDidLoad裡設定image view播放動畫。

實際操作：

1. GIF轉檔並加入xcode的Assets。

GIF動畫可以自己做，如透過RoughAminator或Clip Studio Paint等軟體，但這次重點在程式，所以直接在網路上下載GIF圖片來使用。

下載的GIF其實是多張圖片組成，但檔案還是只有1個，需要轉檔轉成多張圖片。

下載的GIF其實是多張圖片組成，但檔案還是只有1個，需要轉檔轉成多張圖片。

把GIF轉檔為多張PNG。

GIF分解成57張PNG。

把檔案加入xcode的Assets。

2. 在ViewController.swift裡的func viewDidLoad裡設定image view播放連續動畫。

》》》… 讓動畫一直跑一直跑的方法：

程式概念：在fun viewDidLoad裡寫上程式。
1. 產生UIImageView，設定動畫在App上要出現的位置（座標）及尺寸
   ☞ let imageView = UIImageView(frame: CGFrect(x:, y:, width:, height:)
2. 把imageView加到view Controller裡（view controller也是一個view)，imageView是view的subview。
   ☞ view.addSubview(imageView)
3. 產生動畫的UIImage，把之前分解好的圖片加入，並設定時間(duration，sec.)
   ☞ let animatedImage = UIImage.animatedImageNamed("a06fc2aa3f2a4968e4716e36f4a0cb3b-", duration: 1)
4. 把生成的動畫UIImage指定到UIImageView
   ☞ imageView.image = animatedImage
5. 開始動畫
   ☞ imageView.startAnimating()

＊ 分解的圖片名稱結尾必須是數字，並依序遞增，因為 function animatedImageNamed 將以此決定圖片動畫的順序。
＊ 傳入UIImage.animatedImageNamed的圖片檔名結束在「-」，之後的xcode會自動依圖片名稱尾數抓圖片的順序。
＊ 圖片名字結尾的數字最大可以到 1024，因此我們最多可以用 1025 張圖片組合出動畫

》》》動畫跑固定次數時？

要改用 animationImages 才能限制動畫播放的次數！

程式概念：
1. 產生UIImageView，設定動畫在App上要出現的位置（座標）及尺寸
   ☞ let imageView = UIImageView(frame: CGFrect(x:, y:, width:, height:)
2. 把imageView加到view Controller裡（view controller也是一個view)，imageView是view的subview。
   ☞ view.addSubview(imageView)

------ 以下開始設定固定次數，用array及animationImages ---------

3. 產生動畫圖片的array，將它存到image view的animationImages
   ☞ var images = [UIImage]()
        for i in 0...7 {
            images.append(UIImage(named: "a06fc2aa3f2a4968e4716e36f4a0cb3b-\(i)")!)
        }
     imageView.animationImages = images
4. 設定動畫播放相關參數
   - 動畫時間 ☞ imageView.animationDuration = 1
   - 動畫播放次數 ☞ imageView.animationRepeatCount = 1
   - 設定image view的圖片為動畫的最後一張圖 
     ☞ imageView.image = images.last
       
     (如果沒有設最後一張圖，動畫結束時就會直接消失在畫面中）
5. 開始動畫
   ☞ imageView.startAnimating()

完整程式：連續播放動畫

//連續播放動畫
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//改變view controller的背景顏色
view.backgroundColor = UIColor(red: 236/255, green: 226/255, blue: 140/255, alpha: 1)
let animatedImageView = UIImageView(frame: CGRect(x: 40, y: 100, width: 300, height: 300))
view.addSubview(animatedImageView)
let animatedImage = UIImage.animatedImageNamed("619f837be5984330a664cdd6dfa5f06fyjk38PhIEvke4wHO-", duration: 4)
animatedImageView.image = animatedImage
animatedImageView.startAnimating()
}
}

完整程式：播放動畫2次

//播放動畫2次
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor(red: 180/255, green: 235/255, blue: 227/255, alpha: 1)
let catImageView = UIImageView(frame: CGRect(x: 40, y: 100, width: 300, height: 300))
view.addSubview(catImageView)

var catImage = [UIImage]()
for i in 0...57 {
catImage.append(UIImage(named: "619f837be5984330a664cdd6dfa5f06fyjk38PhIEvke4wHO-\(i)")!)
}
catImageView.animationImages = catImage
catImageView.animationDuration = 4
catImageView.animationRepeatCount = 2
catImageView.image = catImage.last
catImageView.startAnimating()
}
}

補充：

陣列(array)的概念: 容納多個東西
- 當變數無敵多的時候（ex:喜歡吃的食物有很多、做成動畫的多張圖片...），我們不太可能每一筆資料都存成var，這時候就是array出場的時候了。
- 任何型別的資料都可以存在array裡面，但存在array裡的資料都是同一型別。
- 資料存在array裡面後，再讀取[號碼]，也就是array裡的第？個資料，從0開始。

相關參考連結：

圖片來源：

現場猫とかいう猫wwwwwww | おもしろ猫のミーム, 猫のイラスト, 動物 かわいい

利用 UIImageView 實現多張圖片連續播放的動畫