#17 讓天空的星星閃爍 animatedImageNamed 動畫實作

做了從 playground 調色去背圖片的題目後，再來練習一下實作這個類似 gif 的效果, 讓天空的星星閃爍。

操作畫面的GIF:

就這樣，天空熱鬧起來了。

開始

前一個題目用了Preview程式製作透明背景的png圖片，並且把二張圖片疊加做出改變背景顏色及圖片的效果，在前景圖片增加透明度來改變背景的顏色。這篇要讓天空的星星動起來。

#16 從 playground 調色去背圖片 (hw#4–6)

主要是使用這個UIImage 這個 Method API，下面是Apple手冊的說明

animatedImageNamed(_:duration:)

此方法透過將一系列數字附加到 name 參數中提供的基本檔案名稱來載入一系列檔案。 例如，如果 name 參數的內容為“image”，則此方法將嘗試從名稱為“image0”、“image1”等一直到“image1024”的檔案中載入圖片。 動畫圖像中包含的所有圖像應具有相同的尺寸和比例。

我們先準備要播放的圖片，這三張天空加了不同位置的星星圖示。

把他拉進 Assets.xcassets 裡，要注意檔名前方的名字都要一樣，只有最後編號不同。

在 ViewController 的 viewDidLoad() 裡加上載入圖片的程式

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let houseImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 871, height:  867))
        houseImageView.contentMode = .scaleAspectFill

        //把圖片加入到View裡面
        view.addSubview(houseImageView)
        //animatedImageNamed 第一個參數檔名最後的編號不要打他，才會跑全部的圖片
        //duration 這些圖片要在幾秒內跑完
        let animatedImage = UIImage.animatedImageNamed("a-", duration: 3)
        //顯示圖片
        houseImageView.image = animatedImage
        
    }
}

題目：

在StoryBoard上，使用animatedImageNamed 製作多張圖連續播放動畫 (hw#4–6.2)
⭐️ 自訂 controller 類別和利用 viewDidLoad 客製 App 畫面 (hw#7–1)

參考：

課堂作業-在StoryBoard上製作多張圖連續播放動畫

作業#29 自訂controller類別＆viewDidLoad練習