#2 SwiftUI 製作結合酷炫動畫效果的電子書 App

Annie

Published in

海大 SwiftUI iOS / Flutter App 程式設計

8 min readOct 23, 2022

github:https://github.com/0xani1818/Ebook

功能需求

使用 TabView 製作下面有 tab bar 的分頁。
使用 NavigationStack(NavigationView) & NavigationLink 切換頁面 & 傳資料到下一頁。

使用到酷炫動畫。
利用 transition 設定元件出現的動畫效果。

主頁的月亮按下去可播音樂和轉動

資料存在 array 裡，array 成員的型別是 struct 定義的自訂型別，遵從 protocol Identifiable。

struct moreSong{
    var song:String
    var intro:String
}let playsong = [
    moreSong(song:"Let You Down",intro:"Rosa Walton & Hallie Coggins"),
    moreSong(song:"This Fire ",intro:"Franz Ferdinand"),
    moreSong(song:"Major Crimes",intro:"HEALTH & Window Weather"),
    moreSong(song: "WHO'S READY FOR TOMORROW", intro:"Rat Boy & IBDY"),
    moreSong(song:"Friday Night Fire Fight",intro:"Aligns & Rubicones"),
    moreSong(song:"Juss Wine",intro:"Diego Cichy Don")]

使用 List 製作表格，至少一個頁面的 List 用到 Section 分類表格。
List 搭配遵從 protocol Identifiable 的資料。

List{
             Section(header:Header1(name:"邊緣行者")){
                  ScrollView(.horizontal){
                      HStack(spacing: 10.0){
                          ForEach(0..<walker.count){(index) in
                                NavigationLink(                                       destination:actor_detail(char:walker[index])){
                               role(char: walker[index])
                                }
                           }
                       }
                   }.frame(height:150)
              }

打開連結的 Link 按鈕。

Link("進入遊戲", destination:URL( string:"https://www.xbox.com/zh-  TW/games/store/2077/BX3M8L83BBRW/0001")!)

上下捲動的 List 裡有水平捲動的 ScrollView ＆ LazyHGrid。
使用 VideoPlayer 播放影片。

let url = Bundle.main.url(forResource: "video", withExtension: "mov")!
                VideoPlayer(player: AVPlayer(url: url))
                    .frame(width: 390, height: 230)

利用 extract subview 將 view 模組化。

struct EpRow: View {
    var ep:episode
    var body: some View {
        HStack(spacing: 30 ){
            Image(ep.num)
                .resizable()
                .scaledToFill()
                .frame(width: 140, height: 90)
                .clipped()
                .shadow(radius: 12)
            VStack(alignment:.leading){
            Text(ep.num)
                .padding(4)
                .foregroundColor(.white)
                .background(Color(hue: 1.0, saturation: 0.0, brightness: 0.665, opacity: 0.834))
                .cornerRadius(4)
            Text(ep.plot)
                    .font(.system(size: 12))
                    .fontWeight(.regular)
            }
            Spacer()
        }
    }
}//產生劇情簡介row的模組

使用到DisclosureGroup展開＆折疊清單。
加入音樂或音效。

加分功能

使用plist設定Launch Screen

漸層背景

使用 LazyHStack / LazyVStack 搭配卡住不動(pinned)的 header / footer

ScrollView{
            LazyVStack{
                ForEach(0..<video.count){(index)in
                    EpRow(ep:video[index])
                }
            }
  }

客製字型

Link("cyberpunk",destination:URL(
       string:"https://www.cyberpunk.net/us/zh-tw/")!)
             .font(Font.custom("Cyberpunk",size: 40))
             .foregroundColor(.black)       Text("EDGERUNNERS").font(.title3)
             .fontWeight(.semibold).italic()
             .offset(x:100,y:2)

加入音樂或音效

HStack(){
            Button(action: {
                let fileUrl = Bundle.main.url(forResource:song.song, withExtension: "mp3")
                let playerItem = AVPlayerItem(url: fileUrl!)
                self.player.replaceCurrentItem(with: playerItem)
                self.play.toggle()
                if self.play{
                    self.player.pause()
                }
                else{
                    self.player.play()
                }
                commandCenter.playCommand.addTarget { event in
                    if self.player.rate == 0.0 {
                            self.player.play()
                            return .success
                }
                    return .commandFailed
                }
                self.commandCenter.pauseCommand.addTarget { event in
                    if self.player.rate == 1.0 {
                            self.player.pause()
                            return .success
                    }
                    return .commandFailed
                }
            }){
                Image(systemName: play ? "play.circle.fill" : "pause.circle.fill")
                    .resizable()
                    .foregroundColor(Color(hue: 0.141, saturation: 0.19, brightness: 0.409))
                    .frame(width:30,height:30)
            }.buttonStyle(PlainButtonStyle())

心得

第二份作業明顯比上一份更有挑戰性，因為前陣子剛看完電馭叛客動畫深受感動，所以決定當作這次的主題。雖然花了很多時間，但也更熟悉swiftUI語法和技巧，除此之外，也學習一個應用程式整體呈現的邏輯和美觀，花了不少時間思考該如何編排，總覺得還需要加點什麼，但真的想不到了。希望之後能寫出來功能更完整的作品。謝謝Peter的指導，這次作業受益良多ᕙ(•̤᷆ ॒ ູ•̤᷇)ᕘ₊˚。

#2 SwiftUI 製作結合酷炫動畫效果的電子書 App

Written by Annie