动画 SwiftUI 文本编辑器文本

Posted

技术标签:

【中文标题】动画 SwiftUI 文本编辑器文本【英文标题】:Animate SwiftUI TextEditor Text 【发布时间】:2020-10-25 05:26:18 【问题描述】:

我想添加动画,以便当我单击按钮时,我的 TextEditor(在 ios 14 中)中的文本会慢慢淡出(假设持续时间为 1.5)。

这是我正在使用的代码,但无法让文本淡出。关于我做错了什么的任何想法?

struct FadeTextFromTextEditor: View 
   @State private var isAnimationOn = true
   @State private var text: String = ""
   @State private var resetText = true

    var body: some View 
        VStack(alignment: .center) 
             if #available(iOS 14.0, *)
             
                  TextEditor(text: $text)
                  .border(Color.black, width: 1)
                  .padding(.horizontal, 5)
                  .padding(.vertical, 5)
                  .animation(.easeOut(duration: 1.5), value: resetText)
             
            Button(action : 
                // If bool for fading the text out is set to true, use animation on the text
                if (self.isAnimationOn) 
                    withAnimation(.easeOut(duration: 1.5))
                    
                        self.resetText.toggle()
                    
                
            )
            
                Text("Animate")
                    .font(.headline)
                    .frame(width:125, height: 30)
                    .padding()
            
        
    

此外,我确实尝试在 Button 的操作中取出 withAnimation 函数调用,如此处所示,但这并没有解决问题。

        if (!self.isAnimationOn) 
             self.showMessageText.toggle()
        

【问题讨论】:

【参考方案1】:

不确定我是否正确理解了您的期望,但您可以通过应用.opacity 修饰符来淡出,如下所示

TextEditor(text: $text).opacity(resetText ? 1 : 0)    // << here !!
  .border(Color.black, width: 1)
  .padding(.horizontal, 5)
  .padding(.vertical, 5)
  .animation(.easeOut(duration: 1.5), value: resetText)

注意:您不需要两个动画(显式和隐式) - 在您的情况下它们的作用相同,因此您可以保留其中任何一个。

【讨论】:

以上是关于动画 SwiftUI 文本编辑器文本的主要内容,如果未能解决你的问题,请参考以下文章

多行文本文本输入框 textarea 可点击任意地方编辑

SwiftUI Textfield - 如何在编辑模式下设置文本字段的背景颜色以清除

Mac系统上如何添加文本文档

如何运行文本文档编程命令

怎么辨别文本文档的编码?

如何编辑 Mailchimp 自动化电子邮件的纯文本版本?