SwiftUI中的动画文本 [英] Animating Text in SwiftUI

问题描述

SwiftUI具有出色的动画功能，但是它处理 Text 视图内容中的更改的方式存在问题.它为文本框的更改设置动画，但无需动画即可立即更改文本.结果，当 Text 视图的内容变长时，动画过渡会导致省略号(…)出现，直到文本框达到其完整宽度为止.例如，在这个小应用程序中，按下 Toggle (切换)按钮会在短文本和长文本之间进行切换:

SwiftUI has wonderful animation features, but the way it handles changes in Text View content is problematic. It animates the change of the text frame but changes the text immediately without animation. As a result, when the content of a Text View is made longer, animating the transition causes an ellipsis (…) to appear until the text frame reaches its full width. For example, in this little app, pressing the Toggle button switches between shorter and longer text:

这是代码:

import SwiftUI

struct ContentView: View {
    @State var shortString = true
    var body: some View {
        VStack {
            Text(shortString ? "This is short." : "This is considerably longer.").font(.title)
                .animation(.easeInOut(duration:1.0))
            Button(action: {self.shortString.toggle()}) {
                Text("Toggle").padding()
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

问题是:如何避免省略号?将一个字符串动画化为两个字符串时，情况甚至更糟，因为短字符串动画化为较长字符串时完全被省略号代替.

The question is: how to avoid the ellipsis? When animating a one character string into a two character string the situation is even worse, because the short string is completely replaced by the ellipsis while it animates into the longer string.

一种可能性是，通过添加修饰符，例如 .id(self.shortString?0:1)，然后添加 .transition()修饰符.它将在前后将文本视为两个不同的视图.不幸的是，在我的情况下，我需要在更改期间移动文本位置，并且不同的ID使其无法制作动画.

One possibility is to assign a separate id to the view in one state or another by adding the modifier, for instance, .id(self.shortString ? 0 : 1) and then adding a .transition() modifier. That will treat the Text as two different Views, before and after. Unfortunately, in my case I need to move text location during the change, and different ids makes animating that impossible.

我想解决方案是对 AnimatableData 的创造性使用.有什么想法吗?

I guess the solution is a creative use of AnimatableData. Any ideas?

推荐答案

以下是可能方法的演示(草稿-您可以将其重新设计为扩展，修改器或单独的视图)

Here is a demo of possible approach (scratchy - you can redesign it to extension, modifier, or separate view)

通过Xcode 11.4/iOS 13.4测试

Tested with Xcode 11.4 / iOS 13.4

struct ContentView: View {
    @State var shortString = true
    var body: some View {
        VStack {
            if shortString {
                Text("This is short.").font(.title).fixedSize()
                .transition(AnyTransition.opacity.animation(.easeInOut(duration:1.0)))
            }
            if !shortString {
                Text("This is considerably longer.").font(.title).fixedSize()
                .transition(AnyTransition.opacity.animation(.easeInOut(duration:1.0)))
            }

            Button(action: {self.shortString.toggle()}) {
                Text("Toggle").padding()
            }
        }
    }
}

有没有缩小gif动画尺寸的建议?

Any suggestions for shrinking an animated gif's dimensions?

I use this way:
- decrease zoom of Preview to 75% (or resize window of Simulator)
- use QuickTimePlayer region-based Screen Recording
- use https://ezgif.com/video-to-gif for converting to GIF

这篇关于SwiftUI中的动画文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！