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

Question

我刚刚切换到 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)
    }
    }
}

Answer 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)
        }
    }
}

Answer 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)

    }
}