在加载视图时淡入控件（并且在状态更改后不插入）

Posted 2023-02-23

【中文标题】在加载视图时淡入控件（并且在状态更改后不插入）

【英文标题】：Fade-in a control in when a view is loaded (and not inserted after a state change)

【发布时间】：2020-12-10 18:31:31

【问题描述】：

我所追求的是当控件包含在其中的视图第次出现时淡入淡出。我已经尝试了所有方法，但都没有运气。

withAnimation(.default) 
    Text("hey")
        .transition(.opacity)
   

// as well as

Text("hey")
    .transition(.opacity)
    .animation(.default)

// and finally

@State var opacity:Double = 0.0
Text("hey")
    .opacity(self.opacity)
    .transition(.opacity)
    .animation(.default)
[...]
.onAppear() 
    self.opacity = 1.0

如果通过按下按钮改变 self.opacity 的值使视图可见，我可以让动画工作，我想如果控件最初不打算出现，上述方法通常可以工作但被插入。

【参考方案1】：

这是可能的解决方案（您可以调整参数以获得所需的效果）

使用 Xcode 12.1 / ios 14.1 测试

struct DemoFadeInView: View 
    @State var isShown = false
    var body: some View 
        VStack 
            if isShown 
                Text("hey")
                     .transition(.opacity)
            
        
         .animation(Animation.easeInOut(duration: 1).delay(0.5))  // delay is optional, for demo
        .onAppear() 
             self.isShown.toggle()
        
    

【讨论】：

感谢 Asperi！但是当有多个控件时呢？在根容器控件上使用动画修饰符意味着所有子项也都被动画化了。当我尝试将修改器仅应用于 Text 控件时，它不起作用。

1) 您可以使用.animation(_, value:)按特定值链接动画； 2）不要将动画应用于根视图，而是由具有自己动画的小子视图分隔。 ...而且，顺便说一句，这超出了最初问题的范围；）

2) 成功了！基本上，您在原始解决方案中提出的内容，通过将其移动为自己的子视图，应用于我想要的任何控件。不过，我对您的建议 1) 很好奇。那是另一种方式吗？我不确定如何将修改器的值与我想要制作动画的层次结构中的控件联系起来。澄清将不胜感激！