滚动视图中元素的 SwiftUI 动画不起作用？ Xcode GM 更新

Posted 2023-02-24

【中文标题】滚动视图中元素的 SwiftUI 动画不起作用？ Xcode GM 更新

【英文标题】：SwiftUI animations of elements in a scrollview doesn't work ? Xcode GM update

【发布时间】：2019-09-13 21:31:30

【问题描述】：

我刚刚切换到 xcode 的 GM 版本，从那以后我遇到了一个在我看来之前没有的问题。

我创建了问题的简化版本：

我有一个滚动视图，里面有几个元素。

我在蓝色方块上添加了动画状态，但我的印象是元素没有动画并且粗暴地改变状态。

我尝试使用滚动视图之外的元素（紫色方块），它可以工作

我不明白为什么动画不起作用有人有想法吗？

 @State var Enter = false


var body: some View 


    VStack 
        ScrollView(.horizontal, showsIndicators: false) 
            HStack(spacing: 15) 

                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 80, height: 80, alignment: .center)


                Button(action: 
                    withAnimation(.easeInOut(duration: 1.12)) 
                        self.Enter = true
                    
                ) 
                    Rectangle()
                        .foregroundColor(Color.blue)
                        .frame(width: 80, height: 80, alignment: .center)
                        .opacity(self.Enter ? 0 : 1)
                
                 //.padding(.horizontal, self.Enter ? 50 : 10)




                Rectangle()
                    .foregroundColor(Color.green)
                    .frame(width: 80, height: 80, alignment: .center)
                    .offset(x: self.Enter ? 30 : 0 , y: 0)

                Rectangle()
                    .foregroundColor(Color.red)
                    .frame(width: 80, height: 80, alignment: .center)



            
            .padding(.leading, 67 )
            .padding(.trailing, 110)
                // .padding(.top, (screen.height)/81.2)
                .padding(.bottom, 10)
        


    HStack 
        Rectangle()
        .foregroundColor(Color.purple)
            .frame(width: 80, height: 80, alignment: .center)
         .offset(x: self.Enter ? 80 : 0 , y: 0)
    
    

【参考方案1】：

在这些情况下，使用隐式副显式动画通常对我有用。这应该可以完成您正在寻找的内容：（在 Xcode 11 GM 种子中工作）

更新：GM 种子显然没有在滚动视图中传递动画。编辑以将动画应用于 HStack 和孤立的紫色框

struct Square: View 
    let color: Color

    var body: some View 
        Rectangle()
            .fill(color)
            .frame(width: 80, height: 80)
    


struct SquareAnimation: View 
    @State private var enter = false

    var body: some View 
        VStack 
            ScrollView(.horizontal, showsIndicators: false) 
                HStack(spacing: 15) 
                    Square(color: .red)
                    Square(color: .blue)
                        .opacity(self.enter ? 0.25 : 1)
                        .onTapGesture 
                            self.enter.toggle()
                    
                    Square(color: .green)
                        .offset(x: self.enter ? 30 : 0)
                    Square(color: .red)
                
                .animation(.easeInOut)
            

            Square(color: .purple)
                .offset(x: self.enter ? 80 : 0)
                .animation(.easeInOut)
        
    

【讨论】：

嗨，这个解决方案对我来说不起作用。在模拟器和设备上。

更新了我的答案。适用于转基因种子 2

【参考方案2】：

我遇到了同样的问题。 smr 的解决方案有所帮助。但是，我无法获得显示/隐藏视图动画。下面是一个例子：

struct Test: View 

    @State var showView = false

    var body: some View 

        ScrollView 

            Button(action: 
                self.showView.toggle()
            ) 
                Text("Toggle View")
            

            if showView 
                Text("Some View")
            

        
        .animation(.easeInOut)

    

【讨论】：

理论上，将您的调用 self.showView.toggle() 包装在 withAnimation 块中（显式动画）应该为 Text 设置动画，但它现在不起作用。使用类似于我的答案的隐含动画应该对您有所帮助。很难将代码放在注释中，但请尝试将按钮切换为 Text 并使用 onTapGesture 进行操作（如果需要，您仍然可以将其设置为蓝色，就像带有 foregroundColor 的按钮一样）。然后，不使用if，而是将opacity 修饰符应用于“某些视图”，例如.opacity(showView ? 1 : 0)，然后应用animation 修饰符。在我的机器上结帐