iOS HW 利用 viewDidLoad 客製 App 畫面-仰望星空0901

本週練習：

1. 運用SpriteKit Particle File產生螢火蟲閃爍效果
2. GIF動畫
3. 利用AVPlayerLooper重複播放音樂

本次作業的靈感來自電影：「十月的天空」、「星際效應」，希望能有一種嚮往外太空的感覺，並且音樂能帶有一種空靈感與濃濃的惆悵，藉此表示宇宙浩瀚無垠與人類的渺小的對比，感覺自己好像導演一樣。

有了以上的概念發想，素材也花了不少時間尋找，MP3也是聽了好多首，最後才決定這首的。

先看完成品：

mp3背景音樂的素材，可以用側錄的方式，下載”Moo0 AudioRecorder 錄音專家”，直接錄音選取中間音樂段落，蠻方便的，不用再剪接。

爱给网_音效配乐_3D模型_视频素材_免费下载

Moo0 AudioRecorder (Moo0 Voice Recorder) 1.49 中文版 — 免費錄音軟體

GIF的動畫素材也找了很久，因為要搭配外太空的感覺，後來發現剛好WIKI有我要的素材。

程式碼的部分：

import UIKit
import AVFoundation
import SwiftUI
import SpriteKit

class ViewController: UIViewController {
    
    var looper: AVPlayerLooper?

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        //增加太空背景
        let spaceImage = UIImage(named:"SKY3")
        let spaceImageView = UIImageView(image: spaceImage)
        spaceImageView.frame = CGRect(x: 0, y: 0, width: 428, height: 926)
        spaceImageView.contentMode = .scaleToFill
        view.addSubview(spaceImageView)
        
        //增加Gif地球旋轉
        let imageView = UIImageView(frame: CGRect(x: -15, y: 90, width: 240, height: 240))
        view.addSubview(imageView)
        let animatedImage = UIImage.animatedImageNamed("Rotating_earth_animated_transparent-", duration: 30)
        imageView.image = animatedImage
        
        //增加粒子
        let skView = SKView(frame: view.frame)
        view.insertSubview(skView, at: 1)
        skView.backgroundColor = UIColor.clear
        
        let scene = SKScene(size: skView.frame.size)
        scene.anchorPoint = CGPoint(x: 0.5, y: 0.5)
        scene.backgroundColor = UIColor.clear
        
        let emitterNode = SKEmitterNode(fileNamed: "MyParticle")
        scene.addChild(emitterNode!)
        skView.presentScene(scene)
        
        
        //增加循環播放音樂
        let player = AVQueuePlayer()
        let fileUrl = Bundle.main.url(forResource: "Outerspace", withExtension: "mp3")!
        let item = AVPlayerItem(url: fileUrl)
        self.looper = AVPlayerLooper(player: player, templateItem : item)
        player.play()

        
    }

}

作業參考資料：

1.放MP3進去注意

加入檔案時記得勾選 Copy items if needed

2.MP3相關設定

利用 AVAudioPlayer 或 AVPlayer 播放 App 裡的 mp3 檔

3. SpriteKit Particle File(程式還是有一些看不懂的地方)

利用 SpriteKit Particle File 製造下雪的粒子效果

4.客製字體(這次還沒用到，下次希望補上)

為 iOS App 加入客製字型 (custom font)

5.CAEmitterLayer (看了半天，這次還沒用到，下次希望補上)

利用 CAEmitterLayer 製作 Xmas 的下雪動畫

心得：

1. 這次有點誤打誤撞做出來的，原本程式有問題，看了很久還看不出問題，後來改了幾行又突然好了。不過，另一個問題，Xcode發出mp3的音樂一直有雜音而且蠻吵人，不知道哪裡出問題了。
2. 雖然程式碼短短幾行，但還是有一些看不懂，譬如好幾個堆疊的部分，之前一直遇到背景底圖沒出現或是其他問題，後來想還是要花點時間搞懂才行。
3. GIF動畫蠻好用的，但是重點好看的GIF素材下載都很麻煩(都要登陸綁帳號)，MP3也是，看來現在要找素材都要蠻花時間的。這次作業從看同學的案例、發想概念、找素材、寫程式再加上花時間理解程式，找程式的問題，做出成品與錄製影片，到最後寫成網誌，真的花不少時間，幾乎像是一個小專案了。
4. 原本想加一段小王子裡面的文字，當作畫龍點睛，但是後來又發現問題，也是覆蓋的問題造成，變成就沒放上去，有點遺憾，不然完成度可以更高，這次也有參考許多同學之前的案例都蠻厲害的，給我這次作業許多靈感來源。