iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0
Mobile Development

轉職App開發打怪雜記系列 第 14

客製化帶背景音樂與畫面淡出的launchScreen

  • 分享至 

  • xImage
  •  

緣由:

從UIUX那邊總是會收到各種有趣的需求,這次收到的新需求為希望launch頁面可以停止個幾秒讓指定的背景音樂播完再淡出進入主頁,原本內建的launch頁似乎比較難達成這個要求(假如可以請大神指導我,Thx),於是我查找了一些資訊,決定不用內建的launch頁,直接建個新的viewcontroller來達成,背景音樂的部分.caf或.mp3都可以播放,這邊是放進專案裡,再來就是畫面動畫的部分可以限制需要幾秒的動畫,以搭配音樂共進退,來完成這個需求

實作:

首先,因為需要播放音樂須先引用多媒體庫
import AVFoundation
然後因為是偽launch頁,所以在viewDidLoad的地方就要先設定好音樂,要在此檢查網路狀態也是可以的
先建立播放器的實體
let player = AVPlayer()
然後抓取放在專案裡的音樂檔

override func viewDidLoad() {
    super.viewDidLoad()
    let fileUrl = Bundle.main.url(forResource: "launch", withExtension: "mp3")!
    let playerItem = AVPlayerItem(url: fileUrl)
    player.replaceCurrentItem(with: playerItem)
}

等到viewDidAppear時要同時出現畫面與音樂
確認一下背景音樂的秒數決定動畫要運行的時間
因為要淡出畫面所以設定了self.view.alpha = 0
淡出後的處理是全螢幕跳轉進另一個頁面
期間伴隨著背景音樂的播放

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        UIView.animate(withDuration: 3, delay: 3, options: .curveEaseInOut, animations: {
            self.view.alpha = 0
        }) { (finished) in
            let storyBoard = UIStoryboard.init(name: "Main", bundle: nil)
            if let vc = storyBoard.instantiateViewController(withIdentifier: "MainView") as? MainViewController {
                vc.modalPresentationStyle = .fullScreen
                self.present(vc, animated: true, completion: nil)
            }
        }
        self.player.play()
}

上一篇
更新ruby&cocoapods
下一篇
用程式碼畫個1/4圓的按鈕
系列文
轉職App開發打怪雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言