Swift 學習筆記

新海誠電影 app｜page control, button, gesture, AVFoundation

Kyle Lu

22 Mar 2025 • 9 min read

知道生命很短暫，我知道死亡隨時會來臨，即使如此，再一年、再一天，就算只是再一小時，我們都想活下去！
——《鈴芽之旅》

每一幀畫面都可以當桌布，這是我對新海誠動畫作品的印象。

從《秒速五公分》開始入坑新海誠宇宙，到後來的《言葉之庭》，災難三部曲《你的名字》、《天氣之子》到今年上映的《鈴芽之旅》，一開始會被精緻畫面吸引，再來會跟著故事劇情展開冒險，最後反覆回味新海誠想傳達的價值觀，作品既有娛樂性又富有寓意。

對他的稱呼也慢慢從新海誠、新海導演，變成誠哥，是這個世代我最喜歡的動畫導演。為了表達支持、瞭解他的創作理念和一窺幕後秘辛，很少買電影周邊的我，還入手了電影海報相框組、官方美術設定集和捨不得拆封的藍光光碟。

趁這次練習，就來簡單介紹他的災難三部曲吧！

學習目標

運用 page control, button & gesture 手勢滑動。
用 AVFoundation 框架來播放音樂。

Demo

操作示範 GIF

操作示範搭配音樂（注意影片音量）

開發過程

UI 與素材準備

從 Library 拖曳 UI 元件到 view 上，包含 UILabel、UIPageControl 和 UIButton：

UILabel：用來顯示文字，像是顯示每個頁面的標題或說明。
UIPageControl：3 個小圓點，顯示目前在哪一頁。
UIButton：控制音樂的播放、停止或上下一首。

把這些元件拖曳到 View 上各就各位，就可以開始來設定功能了。

控制上下一部電影：% 餘數

使用 % 餘數來實現循環播放的效果。當我們選到最後一部電影時，% 餘數讓我們可以回到第一部，創造一種無限循環的感覺，就像新海誠的電影總是讓人回味無窮一樣。

下一部電影：用 % 是為了整除為 0，回到第一部
上一部電影：假設 index 是 0 （第一部），用「總數 -1 」就會回到最後一部

請 GPT 整理成表格說明：

操作	代碼	邏輯說明	示例（假設 movie.count = 3）
下一部電影	`(index + 1) % movie.count`	將索引增加 1，然後用電影總數取餘數以循環回到開始位置	如果索引為 2，下一個索引為 (2 + 1) % 3 = 0
上一部電影	`(index + movie.count - 1) % movie.count`	將電影總數加到索引上，減去 1，然後取餘數以處理負索引情況	如果索引為 0，下一個索引為 (0 + 3 - 1) % 3 = 2

寫成 swift 會長這樣：

// 下一部電影
    
    @IBAction func next(_ sender: Any) {
        /*
         `% movie.count` 以 % 取餘數，讓計算結果等於 0，就會回到第一部重來，達到無限循環的效果。
         例如 movie.count 共 3 部電影，index 到第 2 部時 (2 + 1) % 3 = 0，回到第一部。
        */
        index = (index + 1) % movie.count
        updateUI()
        
    }
   
    
    
    // 上一部電影
    /*
     將電影總數加到 index 上，減去 1，然後取餘數避免變成負數
     如果 index 為 0，下一個 index 為 (0 + 3 - 1) % 3 = 2，回到最後一部
     */
    @IBAction func pre(_ sender: Any) {
        index = (index + movie.count - 1) % movie.count
        updateUI()
    }

有趣的是有這些常見生活案例都會用到：

圖片輪播器：例如臉書或 IG 常見的輪播圖片或廣告，電商或新聞網站也有。
新聞或文章滾動：在新聞網站或 APP 中，會有看不完的文章。
日曆或時間選擇器：時鐘或日期的循環顯示。
音樂播放器播放列表：循環播放音樂。
遊戲開發中的物件循環：例如跑酷遊戲的背景和障礙物。
社群媒體的動態消息：每次刷新臉書或 IG 的動態消息，也是會自動循環播放。

AVFoundation 載入背景音樂

這裡運用 AVFoundation 框架播放音樂，新海誠的配樂絕對是畫龍點睛，這裡就放我喜歡的三首《前前前世》（夢燈籠也很讚！）、《GrandEscape》和《KANATA HARUKA》，前奏太長還有特地剪過才放上來。

流程如下：

導入 AVFoundation：首先要導入框架，才能使用它的功能。
創建 AVPlayer：接著命名一個 AVPlayer，用來控制音樂播放。
更新 UI 並加載音樂：在 updateUI 函數中，我們加載音樂並更新播放器的狀態。
控制播放與暫停：定義相關的動作（action）來控制音樂的播放和暫停。
切換音樂曲目功能：透過函數來切換上一首和下一首。

這裡有一點要注意，匯入音樂時要放在專案資料夾，而不是 assets 裡面，這樣 code 才讀得到。

寫成 swift 會長這樣：

import UIKit
import AVFoundation

class ViewController: UIViewController {
    
    let audioPlayer = AVPlayer()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        updateUI()
    }
  
    // UI Updates
    func updateUI(){
        let url = Bundle.main.url(forResource: musicTracks[currentTrackIndex], withExtension: "mp3")!
                let playerItem = AVPlayerItem(url: url)
                audioPlayer.replaceCurrentItem(with: playerItem)
                audioPlayer.play()
        
    }
}

在 Swift 中使用 AVFoundation 來加載和播放音樂，就像邀請 RADWIMPS 搖滾樂團來幫新海誠配樂一樣，從畫面和音樂都讓人更沈浸在故事之中，鐵定要用新台幣下架支持！

https://github.com/shuhan0628/MovieGesture/blob/main/MovieGesture/MovieViewController.swift