Swift程式設計[第4單元] SwiftUI動畫與繪圖

// 4-1a 跑馬燈 Text Animation
// Created by Heman, 2022/02/27
import PlaygroundSupport
import SwiftUI

var 訊息 = "南下列車即將於1分鐘後進站"

struct 跑馬燈: View {
    @State var 位移: CGFloat = 450
    let 動畫效果 = Animation.linear(duration: 10.0)
    var body: some View {
        Text(訊息)
            .foregroundColor(.purple)
            .font(.system(size: 36))
            .frame(width: 800.0)
            .lineLimit(1)
            .offset(x: 位移, y: 0)
            .onAppear {
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    位移 = -450
                }
            }
    }
}

PlaygroundPage.current.setLiveView(跑馬燈())

let 動畫效果 = Animation.linear(duration: 10.0)

.onAppear {
 withAnimation(動畫效果.repeatForever(autoreverses: false)) {
  位移 = -450
 }
}

@State var 位移: CGFloat = 450
let 動畫效果 = Animation.linear(duration: 10.0)
Text(訊息)
 .offset(x: 位移, y: 0)
 .onAppear {
  withAnimation(動畫效果.repeatForever(autoreverses: false)) {
   位移 = -450
  }
 }

1. SwiftUI Animation 物件支援的時間曲線可參考下圖，包括線性 linear、緩入 easeIn、緩出 easeOut、緩入緩出 easeInOut、彈簧 spring、可自行定義時間曲線 timingCurve...等等。只有linear是定速，變化最平均，其他非線性的時間曲線，速度都會有所變化，產生更豐富的動畫效果。
   https://www.objc.io/images/blog/2019-09-26-curves_4d7f45c.png
   圖片來源：https://www.objc.io/blog/2019/09/26/swiftui-animation-timing-curves/
   
2. 這個範例程式有兩處值得改進，一是「訊息」內容應該是可變化的，特別是「1分鐘」要隨時間而變，最好還能改變字形（如紅色粗體）加以強調。
   
3. 第二是「位移」為什麼是固定的450? 更好方法應該是根據「訊息」字串長度，自動計算需要的位移，(預計)到第4課介紹Canvas物件之後，就能自動計算。
   
4. Animation 每秒會計算多少幅畫面(fps)，實際會視硬體效能而定，當然也與時間曲線、視圖複雜度有關，若效能足夠，會以60fps計算，否則以30fps或更低。

// 4-1b 動態文字 Text Animations
// Created by Heman, 2022/03/02
import PlaygroundSupport
import SwiftUI

struct 移動: View {
    var 文字: String
    init(_ x: String) { 文字 = x }
    
    @State var 位移: CGFloat = -100
    let 動畫效果 = Animation.easeInOut(duration: 1.5)
    var body: some View {
        Text(文字)
            .offset(x: 位移, y: 0)
            .animation(動畫效果.repeatForever(), value: 位移)
            .onAppear {
                位移 = -(位移)
            }
    }
}

struct 旋轉: View {
    var 文字: String
    init(_ x: String) { 文字 = x }
    
    @State var 角度: Angle = .degrees(0.0)
    let 動畫效果 = Animation.easeIn(duration: 5.3)
    var body: some View {
        Text(文字)
            .rotationEffect(角度)
            .onAppear {
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    角度 = .degrees(360.0)
                }
            }
    }
}

struct 立體旋轉: View {
    var 文字: String
    init(_ x: String) { 文字 = x }
    
    @State var 角度: Angle = .degrees(0.0)
    let 動畫效果 = Animation.easeOut(duration: 4.7)
    var body: some View {
        Text(文字)
            .rotation3DEffect(角度, axis: (x: 0.0, y: 1.0, z: 0.0))
            .onAppear {
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    角度 = .degrees(-360.0)
                }
            }
    }
}

struct 模糊: View {
    var 文字: String
    init(_ x: String) { 文字 = x }
    
    @State var 半徑: CGFloat = 10.0
    let 動畫效果 = Animation.spring(response: 0.55, dampingFraction: 0.825, blendDuration: 0)
    var body: some View {
        Text(文字)
            .blur(radius: 半徑)
            .onAppear {
                withAnimation(動畫效果.repeatForever()) {
                    半徑 = 0.0
                }
            }
    }
}

struct 縮放: View {
    var 文字: String
    init(_ x: String) { 文字 = x }
    
    @State var 倍數: CGFloat = 0.1
    let 動畫效果 = Animation.default.speed(0.2)
    var body: some View {
        Text(文字)
            .scaleEffect(倍數)
            .onAppear {
                withAnimation(動畫效果.repeatForever()) {
                    倍數 = 1.5
                }
            }
    }
}

struct 淡出淡入: View {
    var 文字: String
    init(_ x: String) { 文字 = x }
    
    @State var 透明度: CGFloat = 0.1
    let 動畫效果 = Animation.spring()
    var body: some View {
        Text(文字)
            .opacity(透明度)
            .onAppear {
                withAnimation(動畫效果.repeatForever()) {
                    透明度 = 1.2
                }
            }
    }
}

struct 動態文字: View {
    var body: some View {
        VStack {
            Group {
                移動("移動")
                旋轉("旋轉")
                立體旋轉("立體旋轉")
                模糊("模糊清晰")
                縮放("縮小放大")
                淡出淡入("閃爍(淡出淡入)")
            }
            .frame(width: 300)
            .border(Color.red)
            .foregroundColor(.purple)
            .font(.system(size: 36))
            .padding()
        }
    }
}

PlaygroundPage.current.setLiveView(動態文字())

.animation(動畫效果.repeatForever(), value: 位移)
.onAppear {
    位移 = -(位移)
}

1. 平移：Animation.easeInOut() 緩入緩出的效果在開始與結束的地方比較慢，像是兩端有阻力的樣子。
2. 旋轉：Animation.easeIn() 緩入效果在一開始較慢，循環時讓人有暫停的感覺。
   
3. 立體旋轉：Animation.easeOut()緩出效果在結束時較慢，可用來強調結束畫面。
   
4. 模糊：Animation.spring()的參數比較複雜，從上一節的時間曲線圖可以看出，結尾很乾淨利落，剛好和緩出的效果相反。
   
5. 縮放：第一步驟採用Animation.default.speed(0.2)，即緩入緩出且速度減為0.2倍。
   
6. 閃爍：Animation.spring()用預設的參數，時間無法改變，速度比較快。

1. 同樣這6種動畫效果可以用在任何視圖，並非只有文字適用。
   
2. 當然，動畫效果遠不止這6種，但原理都是透過時間與動作變化，設計出無數的動畫效果。
   
3. Animation 的時間曲線是採用貝茲曲線(Bezier Curve)，在本單元後半段學過貝茲曲線之後，就能更精確地控制動畫行為。
   
4. 本節Notion網址： https://hemanlu.notion.site/4-1b-6-fc67323622664bdc8dc2ed4e8d1e768c

// 4-1c 雨燕飛翔(組合動畫)
// Created by Heman, 2022/03/10
import PlaygroundSupport
import SwiftUI

struct 雨燕飛翔: View {
    @State var 位移: CGFloat = -250.0
    @State var 旋轉角度: Angle = .degrees(-45.0)
    let 移動 = Animation.linear(duration: 2.0)
    let 旋轉 = Animation.easeIn(duration: 0.2)
    
    var body: some View {
        Image(systemName: "swift")
            .font(.system(size: 64))
            .foregroundColor(.orange)
            .rotation3DEffect(旋轉角度, axis: (x: 1.0, y: 1.0, z: 0.0))
            .offset(x: 位移, y: 位移)
            .animation(旋轉.repeatForever(), value: 旋轉角度)
            .onAppear {
                旋轉角度 = -(旋轉角度)
                withAnimation(移動.repeatForever(autoreverses: false)) {
                    位移 = -(位移)
                }
            }
    }
}

PlaygroundPage.current.setLiveView(雨燕飛翔())

• 第一次是初始狀態（旋轉角度=-45°、位移=-250）


• 第二次是當「旋轉角度」改變為45°時，啟動第一個動畫 .animation(旋轉.repeatForever(), value: 旋轉角度)


• 第三次則是「位移」變更為250，啟動第二個動畫 withAnimation(移動.repeatForever(autoreverses: false))

// 4-2a 帶屬性文字 AttributedString
// Created by Heman, 2022/03/19
import PlaygroundSupport
import SwiftUI

let 訊息 = "🀀🀁🀂🀃"
var 帶屬性字串 = AttributedString(訊息)
if let 文字範圍 = 帶屬性字串.range(of: "🀁") {
    帶屬性字串[文字範圍].backgroundColor = .red
    帶屬性字串[文字範圍].foregroundColor = .white
}

struct 標題: View {
    @State var 長寬倍數 = CGSize(width: 1.0, height: 3.0)
    let 動畫效果 = Animation.spring(response: 1.0, dampingFraction: 0.2, blendDuration: 0)
    var body: some View {
        Text(帶屬性字串)
            .font(.system(size: 48))
            .padding()
            .scaleEffect(長寬倍數, anchor: .bottom)
            .background(Color.gray.opacity(0.2))
            .onAppear {
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    長寬倍數 = CGSize(width: 1.0, height: 1.0)
                }
            }
    }
}

PlaygroundPage.current.setLiveView(標題())

let 訊息 = "🀀🀁🀂🀃"
var 帶屬性字串 = AttributedString(訊息)

if let 文字範圍 = 帶屬性字串.range(of: "🀁") {
    帶屬性字串[文字範圍].backgroundColor = .red
    帶屬性字串[文字範圍].foregroundColor = .white
}

var body: some View {
    Text(帶屬性字串)
        .font(.system(size: 48))
        .padding()
        .background(Color.gray.opacity(0.2))
}

struct 標題: View {
    @State var 長寬倍數 = CGSize(width: 1.0, height: 3.0)
    let 動畫效果 = Animation.spring(response: 1.0, dampingFraction: 0.2, blendDuration: 0)
    var body: some View {
        Text(帶屬性字串)
            .scaleEffect(長寬倍數, anchor: .bottom)
            .onAppear {
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    長寬倍數 = CGSize(width: 1.0, height: 1.0)
                }
            }
    }
}

.scaleEffect(CGSize(width: 1.0, height: 3.0), anchor: .bottom)

let 動畫效果 = Animation.spring(response: 1.0, dampingFraction: 0.2, blendDuration: 0)

1. 「東南西北」是非常古老的文字，與天干地支同樣頻繁出現在甲骨文上，表示商朝已有清楚的時間與空間觀念。這四字都是假借字，「東」、「西」本意是裝東西的容器（竹或藤編的籃子），「南」是某種樂器，「北」是兩人背對，假借為四個方向。
   
2. scale 若為名詞，是「刻度」「尺度」「格局」之意，若為動詞，則是「縮放」之意，Effect 是「效果」，.scaleEffect() 就是縮放效果的意思。
   
3. 將「長寬倍數」的初始值改為 @State var 長寬倍數 = CGSize(width: 0.6, height: 3.0)，也就是寬度縮為0.6倍，似乎更接近真實，動畫效果更好。動手試試看！

// 4-2b 屬性容器 AttributeContainer
// Created by Heman, 2022/03/20
// Minor revision (replace .animation -> withAnimation) by Heman, 2023/01/30
import PlaygroundSupport
import SwiftUI

let 雪山輯 = "雪溶後 花香流過司介欄溪的森林"

struct 現代詩選: View {
    @State var 詩句 = AttributedString(雪山輯)
    @State var 長寬位移 = CGSize(width: 150, height: -300)
    let 動畫效果 = Animation.spring(response: 0.6, dampingFraction: 0.4, blendDuration: 0)
    var body: some View {
        Text(詩句)
            .frame(width: 160, height: 160)
            .border(Color.red)
            .font(.system(size: 30))
            .offset(長寬位移)
            .onAppear {
                if let 範圍 = 詩句.range(of: "雪") {
                    詩句[範圍].backgroundColor = .brown
                    詩句[範圍].foregroundColor = .white
                    詩句[範圍].font = .system(size: 40).bold()
                }
                var 上標 = AttributeContainer()
                上標.baselineOffset = 15
                上標.font = .system(size: 24)
                上標.foregroundColor = .cyan
                if let 範圍 = 詩句.range(of: "花香") {
                    詩句[範圍].mergeAttributes(上標)
                }
                if let 範圍 = 詩句.range(of: "司介欄溪") {
                    詩句[範圍].mergeAttributes(上標)
                }
                if let 範圍 = 詩句.range(of: "森林") {
                    詩句[範圍].foregroundColor = .green
                    詩句[範圍].font = .system(size: 40).bold()
                }
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    長寬位移 = CGSize(width: 0, height: 0)
                }
            }
    }
}

PlaygroundPage.current.setLiveView(現代詩選())

let 雪山輯 = "雪溶後 花香流過司介欄溪的森林"
var 詩句 = AttributedString(雪山輯)
if let 範圍 = 詩句.range(of: "雪") {
    詩句[範圍].backgroundColor = .brown
    詩句[範圍].foregroundColor = .white
    詩句[範圍].font = .system(size: 40)
}
if let 範圍 = 詩句.range(of: "森林") {
    詩句[範圍].foregroundColor = .green
    詩句[範圍].font = .system(size: 40).bold()
}

var 上標 = AttributeContainer()
上標.baselineOffset = 15
上標.font = .system(size: 24)
上標.foregroundColor = .cyan
if let 範圍 = 詩句.range(of: "花香") {
    詩句[範圍].mergeAttributes(上標)
}
if let 範圍 = 詩句.range(of: "司介欄溪") {
    詩句[範圍].mergeAttributes(上標)
}

struct 現代詩選: View {
    @State var 長寬位移 = CGSize(width: 150, height: -300)
    let 動畫效果 = Animation.spring(response: 0.6, dampingFraction: 0.4, blendDuration: 0)
    var body: some View {
        Text(詩句)
            .frame(width: 160, height: 160)
            .offset(長寬位移)
            .onAppear {
                withAnimation(動畫效果.repeatForever(autoreverses: false)) {
                    長寬位移 = CGSize(width: 0, height: 0)
                }
            }
    }
}

//4-2a 回彈較慢、阻尼較小
let 動畫效果 = Animation.spring(response: 1.0, dampingFraction: 0.2, blendDuration: 0)
//4-2b 回彈較快、阻尼較大
let 動畫效果 = Animation.spring(response: 0.6, dampingFraction: 0.4, blendDuration: 0)

1. 靛青(cyan, 讀音 /ˈsaɪ.ən/)是一種藍綠色，也是印刷用的四種基本墨色(CMYK)之一，與RGB三原色發光原理不同，墨色是經由吸收與反射光線來呈現色彩，本身並不發光。
   
2. CMYK四種基本墨色，靛青(C)染料會吸收紅光(R)，反射藍光與綠光；洋紅(M)則吸收綠光(G)，反射紅光與藍光；黃色(Y)油墨會吸收藍光(B)，反射紅光與綠光，紅綠光混合後變黃光；黑色(K)是紅藍綠通通吸收，不反射任何光線。

【求助】有誰知道如何在Mobile01內容裡面寫 HTML tag 嗎？我用 & lt; 和 & gt; 還是無法顯示角括號的tag，會被render出來。用Notion似乎沒有這個問題 https://hemanlu.notion.site/4-2c-Markdown-7d936d4ca87448b58fb67022098367b3

// 4-2c Markdown 標示語言
// Revised by Heman, 2022/03/22
import PlaygroundSupport
import SwiftUI

let 雪山輯 = """
    雪溶後 花香流過**司介欄溪**的森林
    沿著長長的狹谷 成團的白雲壅著
    獵人結伴攀向**司馬達克**去
    採菇者領著赤足的婦女
    在高寒的**賽蘭酒** 起一叢篝火
    
    修好所有的籬 結新的筏
    起得早早的小姑娘 在水邊洗日頭
    少年的[泰耶魯](https://zh.wikipedia.org/wiki/%E6%B3%B0%E9%9B%85%E6%97%8F)唱出冬藏的歌
    而卻不見了 ~~那著人議論的~~
    那浪子麻沁
    """

var 帶屬性字串 = try AttributedString(markdown: 雪山輯, options: AttributedString.MarkdownParsingOptions(interpretedSyntax: .inlineOnlyPreservingWhitespace))
let 圖片網址 = "https://storage.googleapis.com/opinion-cms-cwg-tw/article/201905/article-5cd90f7b737c2.jpg"

struct 現代詩選: View {
    let 動畫效果 = Animation.linear(duration: 12)
    @State var 位移: CGFloat = 500
    var body: some View {
        ZStack {
            AsyncImage(url: URL(string: 圖片網址)) { 狀態 in
                if let 背景圖片 = 狀態.image {
                    背景圖片.opacity(0.25)
                } else if 狀態.error != nil {
                    Image(systemName: "xmark.icloud.fill")
                        .scaleEffect(2)
                        .foregroundColor(.red)
                } else {
                    ProgressView()
                }
            }
            Text(帶屬性字串)
                .font(.system(.title))
                .offset(x: 0, y: 位移)
                .animation(動畫效果, value: 位移)
                .onAppear {
                    位移 = 0
                }
        }
    }
}

PlaygroundPage.current.setLiveView(現代詩選())

var 帶屬性字串 = try AttributedString(markdown: 雪山輯)

var 帶屬性字串 = try AttributedString(markdown: 雪山輯, options: AttributedString.MarkdownParsingOptions(interpretedSyntax: .inlineOnlyPreservingWhitespace))

1. HTML最初由全球資訊網(WWW)發明人Tim Berners-Lee在1989年所發表，HTML與HTTP, URL三者成為WWW的技術基礎，1995年成為網際網路官方標準(RFC1866)，目前最新版本為HTML5。
   
2. Markdown標示語言的原創者是美國程式設計師John Gruber，發表於2004年，是針對HTML簡化而來。名稱有點搞怪，別人用markup，它故意叫markdown，當然，字面上「標示起來」或「標示下去」意思是相通的。
   
3. 與 “rich text” 相對的名詞是 “plain text”，就是沒有任何外觀屬性的「純文字」。
   
4. String literal 的 “literal” 意思是「字面上的」，在Swift中代表「字面值」，也就是不需經過運算的資料值，例如100是整數類型的字面值(Int literal)，”東南西北”是字串類型的字面值(String literal)。
   
5. 本節照片出自昭和14年（西元1939年）出版的《臺湾国立公園写真集》。
   
6. 「司馬達克」、「賽蘭酒」是地名，在司介欄溪沿岸。
   
7. 「泰耶魯」即泰雅族，早期由日文「タイヤル(dai-ya-ru)」音譯而來。
   
8. 《浪子麻沁 -- 雪山輯之二》全詩共6段42行，本節引用前兩段10行。讀者可將全詩42行加到程式裡再執行一次，並想想看該如何修改程式，才能讓顯示效果更好？
   
9. 舊式的中文直式寫法，是由上而下、由右而左，用直式展現古文或詩詞，會更有味道。有辦法將Text()視圖改成直式寫法嗎？

// 4-3a 文字斷行 String.components()
// Revised by Heman, 2022/03/25
import PlaygroundSupport
import SwiftUI

let 小冰創作 = """
    天空中有夢人的花瓣飄落
    是頑童嬉鬧快樂的消息
    可愛的葡萄生長在夢中的世界
    
    希望在太陽的頂巔閃耀
    因為人類說我們是朋友
    宛若天空一樣的清明
    
    —— 小冰  2022.3.27
    """

let 詩句 = 小冰創作.components(separatedBy: .newlines)
let 行數 = 詩句.count
print(詩句, "共\(行數)行")

struct 現代詩選: View {
    @State var 行次: Int = 0
    let 定時器 = Timer.publish(every: 1.5, on: .main, in: .common).autoconnect()
    var body: some View {
        VStack {
            ForEach(詩句.indices, id: \.self) { 索引 in
                Text(詩句[索引])
                    .foregroundColor(索引 == 行次 ? .white : .purple)
                    .background(索引 == 行次 ? Color.cyan : Color.clear)
                    .font(.system(.title))
            } 
        }
        .onReceive(定時器) { _ in
            行次 = (行次 + 1) % 行數
            if 詩句[行次] == "" {
                行次 = (行次 + 1) % 行數
            }
        }
    }
}

PlaygroundPage.current.setLiveView(現代詩選())

let 詩句 = 小冰創作.components(separatedBy: .newlines)
let 行數 = 詩句.count
print(詩句, "共\(行數)行")

["天空中有夢人的花瓣飄落", "是頑童嬉鬧快樂的消息", "可愛的葡萄生長在夢中的世界", "", "希望在太陽的頂巔閃耀", "因為人類說我們是朋友", "宛若天空一樣的清明", "", "—— 小冰 2022.3.27"] 共9行

struct 現代詩選: View {
    var body: some View {
        VStack {
            ForEach(詩句.indices, id: \.self) { 索引 in
                Text(詩句[索引])
                    .foregroundColor(.purple)
                    .font(.system(.title))
            } 
        }
    }
}

// id 重複，會導致執行時控制台出現警告訊息
ForEach(詩句, id:\.self) { 每一行 in
    Text(每一行)
}

struct 現代詩選: View {
    @State var 行次: Int = 0
    let 定時器 = Timer.publish(every: 1.5, on: .main, in: .common).autoconnect()
    var body: some View {
        VStack {
            ForEach(詩句.indices, id: \.self) { 索引 in
                Text(詩句[索引])
                    .foregroundColor(索引 == 行次 ? .white : .purple)
                    .background(索引 == 行次 ? Color.cyan : Color.clear)
                    .font(.system(.title))
            } 
        }
        .onReceive(定時器) { _ in
            行次 = (行次 + 1) % 行數
            if 詩句[行次] == "" {
                行次 = (行次 + 1) % 行數
            }
        }
    }
}

1. 字串分解還有一種進階操作「斷詞」，就是分解出動詞、名詞、形容詞、副詞等不同詞性，是自然語言處理(NLP)的基礎，牽涉到比較複雜的演算法，未來如果有機會寫人工智慧單元時，再加以介紹。
   
2. 萬國碼的每個字元存放在記憶體時，位元組長度(byte length)並不是固定的，以Swift 5所用的UTF-8編碼為例，每個英文字元只佔1 byte，但中文字元佔3 bytes；某些字元還允許多個符號組合成而成（如韓文、Emoji等）。有關萬國碼介紹，請參考第1單元第9課。
   
3. 微軟公司的AI小冰 https://poem.xiaoice.com/
   
4. 用AI「創作」出來的新詩，是將前人作品分解、歸類、重組的結果，當然無法跟鄭愁予的作品相比，能夠做到中文語法正確，主詞、動詞、受詞組合無誤，就算不錯了。
   
5. 讀者可以動手試試看，「小冰創作.count」與「詩句.count」各是多少。
   
6. .onReceive(定時器) { _ in } 的底線(_)代表傳入匿名函式的參數「時間」並未用到，在Swift程式語言中，底線有「可省略」「可忽略」的意思。

// 4-3b 文字斷句
// Created by Heman, 2022/03/30
import PlaygroundSupport
import SwiftUI

let 西遊記第一回 = """
    第一回    靈根育孕源流出　心性修持大道生
    
    　　詩曰：
    　　　　混沌未分天地亂，茫茫渺渺無人見。
    　　　　自從盤古破鴻濛，開闢從茲清濁辨。
    　　　　覆載群生仰至仁，發明萬物皆成善。
    　　　　欲知造化會元功，須看西遊釋厄傳。
    　　蓋聞天地之數，有十二萬九千六百歲為一元。將一元分為十二會，乃子、丑、寅、卯、辰、巳、午、未、申、酉、戌、亥之十二支也。每會該一萬八百歲。且就一日而論：子時得陽氣，而丑則雞鳴﹔寅不通光，而卯則日出﹔辰時食後，而巳則挨排﹔日午天中，而未則西蹉﹔申時晡，而日落酉，戌黃昏，而人定亥。譬於大數，若到戌會之終，則天地昏曚而萬物否矣。再去五千四百歲，交亥會之初，則當黑暗，而兩間人物俱無矣，故曰混沌。又五千四百歲，亥會將終，貞下起元，近子之會，而復逐漸開明。邵康節曰：「冬至子之半，天心無改移。一陽初動處，萬物未生時。」到此，天始有根。再五千四百歲，正當子會，輕清上騰，有日，有月，有星，有辰。日、月、星、辰，謂之四象。故曰，天開於子。又經五千四百歲，子會將終，近丑之會，而逐漸堅實。《易》曰：「大哉乾元！至哉坤元！萬物資生，乃順承天。」至此，地始凝結。再五千四百歲，正當丑會，重濁下凝，有水，有火，有山，有石，有土。水、火、山、石、土，謂之五形。故曰，地闢於丑。又經五千四百歲，丑會終而寅會之初，發生萬物。曆曰：「天氣下降，地氣上升﹔天地交合，群物皆生。」至此，天清地爽，陰陽交合。再五千四百歲，正當寅會，生人，生獸，生禽，正謂天地人，三才定位。故曰，人生於寅。
    """
var 斷句分解 = 西遊記第一回.components(separatedBy: .punctuationCharacters)
print("斷句分解結果：\n\(斷句分解)")

struct 小說: View {
    var 本文: String
    init(_ 字串參數: String) { 本文 = 字串參數 }
    @State var 顯示內容 = AttributedString("")
    @State var 分解結果: [String] = []
    @State var 索引 = 0
    let 定時器 = Timer.publish(every: 0.3, on: .main, in: .common).autoconnect()
    var body: some View {
        Text(顯示內容)
            .font(.system(.title3))
            .onAppear {
                let 初步斷句 = 本文.components(separatedBy: .punctuationCharacters.union(.whitespacesAndNewlines))
                分解結果 = 初步斷句.filter { 句子 in
                    句子 != ""
                }
                索引 = 分解結果.startIndex
            }
            .onReceive(定時器) { _ in
                顯示內容 = AttributedString(本文)
                if let 範圍 = 顯示內容.range(of: 分解結果[索引]) {
                    print(範圍)
                    顯示內容[範圍].foregroundColor = .white
                    顯示內容[範圍].backgroundColor = .cyan
                    if 分解結果.index(after: 索引) == 分解結果.endIndex {
                        索引 = 分解結果.startIndex
                    } else {
                        索引 = 分解結果.index(after: 索引)
                    }
                }
            }
    }
}

PlaygroundPage.current.setLiveView(小說(西遊記第一回))

var 斷句分解 = 西遊記第一回.components(separatedBy: .punctuationCharacters)
print("斷句分解結果：\n\(斷句分解)")

斷句分解結果：
["第一回 靈根育孕源流出　心性修持大道生\n\n　　詩曰", "\n　　　　混沌未分天地亂", "茫茫渺渺無人見", "\n　　　　自從盤古破鴻濛", "開闢從茲清濁辨", "\n　　　　覆載群生仰至仁", "發明萬物皆成善", "\n　　　　欲知造化會元功", "須看西遊釋厄傳", "\n　　蓋聞天地之數", "有十二萬九千六百歲為一元", "將一元分為十二會", "乃子", "丑", "寅", "卯", "辰", "巳", "午", "未", "申", "酉", "戌", "亥之十二支也", "每會該一萬八百歲", "且就一日而論", "子時得陽氣", "而丑則雞鳴", "寅不通光", "而卯則日出", "辰時食後", "而巳則挨排", "日午天中", "而未則西蹉", "申時晡", "而日落酉", "戌黃昏", "而人定亥", "譬於大數", "若到戌會之終", "則天地昏曚而萬物否矣", "再去五千四百歲", "交亥會之初", "則當黑暗", "而兩間人物俱無矣", "故曰混沌", "又五千四百歲", "亥會將終", "貞下起元", "近子之會", "而復逐漸開明", "邵康節曰", "", "冬至子之半", "天心無改移", "一陽初動處", "萬物未生時", "", "到此", "天始有根", "再五千四百歲", "正當子會", "輕清上騰", "有日", "有月", "有星", "有辰", "日", "月", "星", "辰", "謂之四象", "故曰", "天開於子", "又經五千四百歲", "子會將終", "近丑之會", "而逐漸堅實", "", "易", "曰", "", "大哉乾元", "至哉坤元", "萬物資生", "乃順承天", "", "至此", "地始凝結", "再五千四百歲", "正當丑會", "重濁下凝", "有水", "有火", "有山", "有石", "有土", "水", "火", "山", "石", "土", "謂之五形", "故曰", "地闢於丑", "又經五千四百歲", "丑會終而寅會之初", "發生萬物", "曆曰", "", "天氣下降", "地氣上升", "天地交合", "群物皆生", "", "至此", "天清地爽", "陰陽交合", "再五千四百歲", "正當寅會", "生人", "生獸", "生禽", "正謂天地人", "三才定位", "故曰", "人生於寅", ""]

var 斷句分解 = 西遊記第一回.components(separatedBy: .punctuationCharacters.union(.whitespacesAndNewlines))

斷句分解 = 斷句分解.filter { 句子 in
                    句子 != ""
                }

struct 小說: View {
    var 本文: String
    init(_ 字串參數: String) { 本文 = 字串參數 }
    @State var 顯示內容 = AttributedString("")
    @State var 分解結果: [String] = []
    var body: some View {
        Text(顯示內容)
            .font(.system(.title3))
            .onAppear {
                let 初步斷句 = 本文.components(separatedBy: .punctuationCharacters.union(.whitespacesAndNewlines))
                分解結果 = 初步斷句.filter { 句子 in
                    句子 !=  ""
                }
            }
    }
}
PlaygroundPage.current.setLiveView(小說(西遊記第一回))

struct 小說: View {
    @State var 顯示內容 = AttributedString("")
    @State var 分解結果: [String] = []
    @State var 索引 = 0
    let 定時器 = Timer.publish(every: 0.3, on: .main, in: .common).autoconnect()
    var body: some View {
        Text(顯示內容)
            .onAppear {
                索引 = 分解結果.startIndex
            }
            .onReceive(定時器) { _ in
                顯示內容 = AttributedString(本文)
                if let 範圍 = 顯示內容.range(of: 分解結果[索引]) {
                    print(範圍)
                    顯示內容[範圍].foregroundColor = .white
                    顯示內容[範圍].backgroundColor = .cyan
                    if 分解結果.index(after: 索引) == 分解結果.endIndex {
                        索引 = 分解結果.startIndex
                    } else {
                        索引 = 分解結果.index(after: 索引)
                    }
                }
            }
    }
}

顯示內容 = AttributedString(本文)

if let 範圍 = 顯示內容.range(of: 分解結果[索引]) {
    顯示內容[範圍].foregroundColor = .white
    顯示內容[範圍].backgroundColor = .cyan
}

1. 每個萬國碼字元都經過分類標註，類別代號(General Category)可參考維基百科說明 https://en.wikipedia.org/wiki/Template:General_Category_(Unicode)
   
2. 英文 punctuation 就是標點符號的意思。
   
3. 本節「西遊記第一回」內容取自維基文庫 https://zh.m.wikisource.org/zh-hant/西遊記/第001回