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

时间:2019-09-13 21:31:30

标签: animation scrollview element swiftui

我刚刚切换到xcode的GM版本,从那时起,我遇到了一个我以前从未遇到过的问题。

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

我有一个内部包含多个元素的滚动视图。

我在蓝色正方形上添加了动画状态,但是我印象中元素没有动画并且残酷地更改了状态。

我尝试了scrollview(紫色正方形)之外的元素,并且可以正常工作

我不明白为什么动画不能使某人有想法吗?

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

2 个答案:

答案 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)
        }
    }
}

答案 1 :(得分:1)

我也遇到同样的问题。 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)

    }
}