如何对文本中的子字符串进行动画处理？

Question

目前，我在水平堆栈视图中使用多个

Text

来实现子字符串的动画。

正如您在上面的动画中看到的，文本

- conversation
- meeting
- lecture

有动画。

但是，这种方法也有缺点。

不同文本块之间的文本大小不一致。以下

Text

块具有不同的文本大小。

- Transform
- conversation/ meeting/ lecture
- to Quick Note

我们知道如何实现，以便所有文本块都具有相同的文本大小，以便它们看起来像 1 个句子吗？

或者，我们如何使文本块具有恒定的文本大小，但能够执行换行到下一行，以便它们看起来像 1 个句子？

目前，这是我正在使用的代码片段。

import SwiftUI

struct ContentView: View {
    var array = ["lecture", "conversation", "meeting"]
    
    @State var currentIndex : Int = 0
    @State var firstString : String = ""

    var body: some View {

        VStack {
            HStack {
                Text("Transform")
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                    .font(.title)
                
               Text(firstString)
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                    .font(.title)
                    .transition(AnyTransition.opacity.animation(.easeInOut(duration:1.0)))
                    .background(.yellow)
                
                Text("to Quick Note")
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                    .font(.title)
            }.padding()
        }
        .animation(.default)
        .onAppear {
            firstString = array[0]
            
            let timer = Timer.scheduledTimer(withTimeInterval: 2.0, repeats: true) { _ in
                if currentIndex == array.count - 1 {
                    self.firstString = array[0]
                    currentIndex = 0
                }
                else {
                    self.firstString = array[currentIndex+1]
                    currentIndex += 1
                }
            }
        }
    }
}

#Preview {
    ContentView()
}

Answer 1

要将其全部放在一行并具有一致的字体大小，请尝试以下更改：

• 将修改器

  .minimumScaleFactor

  移至

  HStack

  。
• 也将

  .scaledToFit

  应用于

  HStack

  。

其他建议：

• 将

  .font

  等修饰符应用于

  HStack

  比应用于每个单独的

  Text

  项目更简单。
• 您使用

  .animation

  修饰符的方式已被弃用。添加

  value

  参数来纠正此问题。
• 您实际上只需要一个状态变量，而不是两个。
• 请参阅此答案，了解触发定时更新的一些更好方法。

这是示例的更新版本。这也说明了如何使用

task(id:priority:_:)

来实现定时动画。

@State var currentIndex : Int = 0
//@State var firstString : String = ""

VStack {
    HStack {
        Text("Transform")

        Text(array[currentIndex])
            .transition(AnyTransition.opacity.animation(.easeInOut(duration:1.0)))
            .background(.yellow)

        Text("to Quick Note")
    }
    .lineLimit(1)
    .font(.title)
    .minimumScaleFactor(0.5)
    .scaledToFit()
    .padding()
}
.animation(.default, value: currentIndex)
.task(id: currentIndex) {
    try? await Task.sleep(for: .seconds(2))
    if currentIndex == array.count - 1 {
        currentIndex = 0
    } else {
        currentIndex += 1
    }
}