電子書App — Another Eden 穿越時空的貓

操作影片:

Github 連結:

https://github.com/ytchao0234/iosHW/HW2-EBook

App畫面:

功能需求:

• 使用 TabView 製作下面有 tab bar 的分頁。

• 使用 NavigationView & NavigationLink 切換頁面 & 傳資料到下一頁，navigation bar 上要顯示標題。

• 利用 page 實現分頁瀏覽。

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

1. StoryView

• LazyVStack 讓圖片按鈕不會一次全部生成，滑到時才發生 animation。
• Button 上有 animation 讓圖片按鈕在剛生成時出現下移(offset)及淡入(opacity)效果。
• Button action 有 withAnimation，下方文字上有 transition animation，在按按鈕時讓下方文字出現淡入(opacity)效果。

2. CharacterDetailView

• Image 上有 transition animation，在生成時出現放大(scale)、旋轉(rotationEffect)及淡入(opacity)效果。
• 自定義 AnyTransition。
• 自定義 ViewModifier。

3. MapDetailView

• LazyVStack 讓圖片按鈕不會一次全部生成，滑到時才發生 animation。
• Image 上直接加入 animation 效果，圖片生成時出現放大(scale)及淡入(opacity)效果。

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

• 使用 List 製作表格，至少一個頁面的 List 用到 Section 分類表格。

• 生成 List 時搭配 id 或 Identifiable。

• 打開連結的 Link 按鈕。

• 支援 dark mode & light mode。

1. 背景 topLeading 顏色(launchColor)和 bottomTrailing 顏色。

2. Image icon 齒輪顏色和圖片換色。

• 支援 iPhone & iPad。

• 使用到 Spacer 、 offset 調整元件位置。

Spacer:

offset:

• 使用 SF Symbol。

• 使用格子狀排列的 LazyVGrid 實現照片牆。

• 上下捲動的 List 裡有水平捲動的 ScrollView ＆ LazyHGrid。

• 使用 VideoPlayer 播放影片。

1. 播放影片時暫停背景音樂、暫停影片時播放背景音樂

• 設定 App Icon & 名稱。

• 利用 extract subview 將 view 模組化。

加分功能:

• 使用 plist 設定開頭畫面。

• 漸層背景。

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

• 客製字型。

• 利用 mask 或 clipShape 將圖片裁切特別的形狀。

• 加入音樂或音效。

• 像 IG App 一樣更換 iOS App Icon。