SwiftUI + iOS17 – 应用不透明度的文本动画问题

SwiftUI + iOS17 – Text animation issues with opacity applied

提问人:BlackWolf 提问时间:10/5/2023 更新时间:10/5/2023 访问量:132

问:

我目前正在调查 iOS17 上的动画问题,并发现了一些与 iOS16 不同的行为,我试图理解这些行为。我已经对此进行了调试,因为当某些修饰符应用于 时,iOS17 的行为会有所不同,例如 或 ,然后对文本更改进行动画处理。Text.opacity.blur

没有 .opacity 的文本

@State var text = "Start"
    
var body: some View {
    Text(text)
        .animation(.linear(duration: 1.0), value: text)
        .background(Color.red)
        .onAppear {
            text = "Text after animation"
        }
}

结果

结果:

enter image description here

具有 .opacity 的文本

现在考虑相同的代码,但应用了不透明度修饰符:

@State var text = "Start"
    
var body: some View {
    Text(text)
        .opacity(0.5)
        .animation(.linear(duration: 1.0), value: text)
        .background(Color.red)
        .onAppear {
            text = "Text after animation"
        }
}

结果

iOS16 上的结果与上述相同。然而,在 iOS17 上,结果是这样的: enter image description here

所以我有两个基本问题:

  • 这是我错过的苹果方面的一些变化吗?有人可以解释为什么它的行为不同吗?
  • 在我看来,iOS17 的新结果是不受欢迎的——如果我有文本更改,我通常希望在不移动的情况下交叉淡入淡出文本。我有一个生产应用程序,这会导致文本的微小移动,看起来不干净。如何在 iOS17 上恢复 iOS16 动画?
动画 SwiftUI 文本 不透明度 iOS17

评论

0赞 lorem ipsum 10/5/2023
您是否尝试过向上和/或向下移动动画修改器?这可以改变行为
0赞 lorem ipsum 10/5/2023
此外,请尝试将多行文本对齐方式更改为居中。似乎锚点发生了变化。
0赞 BlackWolf 10/5/2023
谢谢你的建议!我试过了,但似乎没有改变任何事情。将动画修饰符移动到 .opacity 上方基本上有相同的结果,只是文本移动没有动画(“开始”现在只是向左跳,这也不是一个干净的动画).multilineTextAlignment

答:

1赞 Benzy Neez 10/5/2023 #1

解决方法是,每次重绘视图时,都可以强制更改 id:

Text(text)
    .id(UUID()) // <- ADDED
    .opacity(0.5)
    .animation(.linear(duration: 5.0), value: text)
    .background(Color.red)
    .onAppear {
        text = "Text after animation"
    }

我想,这给你的是从旧视图到新视图的过渡,而不是对现有视图的动画更改。

评论

0赞 BlackWolf 10/5/2023
是的,谢谢,这至少给了我一个像样的动画!在我的(生产)案例中,出于某种原因,我不得不将文本包装在 HStack(spacing: 0) 中,然后将 应用于文本和 HStack。提示:您可以使用以避免不必要的文本重绘。.id.animation.id(text)
0赞 Benzy Neez 10/5/2023
很高兴听到您找到了解决方法!是的,我想过使用字符串作为 id,只是不确定如果可能存在重复的情况,这是否是一个好主意。Ps. 如果对答案有帮助,欢迎您投赞成票;)