[Swift通天遁地]八、媒體與動畫-(11)實現音樂播放的動態視覺效果
本文將演示使用第三方類庫實現音樂播放的動態視覺效果。
首先確保已經安裝了所需的第三方類庫。雙擊查看安裝配置文件【Podfile】
1 platform :ios, ‘12.0’ 2 use_frameworks! 3 4 target ‘DemoApp‘ do 5 source ‘https://github.com/CocoaPods/Specs.git‘ 6 pod ‘AudioIndicatorBars‘ 7 end
根據配置文件中的相關設置,安裝第三方類庫。
安裝完成之後,雙擊打開項目文件【DemoApp.xcodeproj】
在左側的項目導航區,打開故事板文件【Main.storyboard】
點擊控件庫圖標,打開控件庫的列表窗口。雙擊視圖控件,往故事板中插入一個視圖。
點擊背景顏色【Background】背景顏色右側的下拉箭頭,彈出顏色預設面板,
選擇一種顏色作為視圖的背景顏色。
點擊尺寸檢查器圖標,進入尺寸設置面板,修改視圖在故事板中的位置。
點擊控件庫圖標,打開控件庫的列表窗口。
雙擊按鈕控件,往故事板中插入一個【Play】按鈕控件。
在尺寸檢查器中設置按鈕的X軸和Y軸坐標,設置按鈕的Width和Height。
點擊屬性檢查器圖標,設置按鈕的標題文字。設置按鈕的背景顏色Background。
繼續添加一個【Stop】按鈕並進行相同的設置。選擇視圖對象,點擊身份檢查器圖標,進入身份設置面板。
Class:AudioIndicatorBarsView
返回屬性設置面板,此時在屬性設置面板中,多了三個屬性設置選項:Corner、Bars、Color
現在將故事板中的控件,與類文件中的屬性和方法進行連接。
點擊顯示輔助器圖標,點擊隱藏右邊的面板區。
在視圖上按下鼠標右鍵,並拖動到右側的類文件中,從而建立一個和視圖綁定的屬性。
【Name】:AudioIndicatorBarsView,輸入屬性的名稱。
點擊【Connect】,在類文件中,創建一個和視圖控件相連接的屬性。
接著對【Play】按鈕進行連接,
【Connection】:Action
【Name】:PlayAnimation
點擊【Connect】,在類文件中,創建一個和按鈕控件相連接的動作。
同樣對【Play】按鈕進行連接,
【Connection】:Action
【Name】:StopAnimation
點擊【Connect】,在類文件中,創建一個和按鈕控件相連接的動作。
選擇用於顯示動態視覺效果的視圖對象,
打開身份設置面板,設置視圖控件的模塊屬性:【Module】:AudioIndicatorBars
在左側的項目導航區,打開視圖控制器的代碼文件【ViewController.swift】
1 import UIKit 2 //引入已經安裝的第三方類庫 3 import AudioIndicatorBars 4 5 class ViewController: UIViewController { 6 7 @IBOutlet var audioIndicatorBarsView: AudioIndicatorBarsView! 8 override func viewDidLoad() { 9 super.viewDidLoad() 10 // Do any additional setup after loading the view, typically from a nib. 11 12 } 13 14 //在響應播放按鈕點擊事件的方法中, 15 @IBAction func playAnimation(_ sender: AnyObject) { 16 //通過調用視圖對象的開始方法,開始播放視覺動畫。 17 self.audioIndicatorBarsView.start() 18 } 19 20 //在響應停止按鈕點擊事件的方法中, 21 @IBAction func stopAnimation(_ sender: AnyObject) { 22 //通過調用視圖對象的停止方法,結束視覺動畫的播放。 23 self.audioIndicatorBarsView.stop() 24 } 25 26 override func didReceiveMemoryWarning() { 27 super.didReceiveMemoryWarning() 28 // Dispose of any resources that can be recreated. 29 } 30 }
[Swift通天遁地]八、媒體與動畫-(11)實現音樂播放的動態視覺效果