animation - ScrollView 中元素的 SwiftUI 动画不起作用？ Xcode GM 更新

Question

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

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

我有一个 ScrollView ，里面有几个元素。

我在蓝色方 block 上添加了动画状态，但我的印象是这些元素没有动画并且状态变化剧烈。

我尝试使用 ScrollView 之外的元素(紫色方 block )并且它有效

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

 @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 种子显然没有在 ScrollView 内传递动画。编辑以将动画应用到 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)
        }
    }
}