从屏幕外动画视图底部

问题描述

好吧，我被 swiftui 动画难住了。我了解了基础知识（我认为）但是如何才能从屏幕的绝对底部动画/过渡到它的最终位置 - 我似乎无法理解这个...... 我已经尝试过偏移并尝试使用 Spacer() 更改布局，但解决方案是我找不到

struct CardView: View {
let card: Card
var body: some View{

    vstack { 
        Spacer()
            Text("\(card.factor1) X \(card.factor2)")
                .font(.title)
                .foregroundColor(.black)

                .multilineTextAlignment(.center)
                .padding(.horizontal)
                Spacer()
    }
    .padding()
    .frame(width: 300,height: 200)
    .background(
      Rectangle()
           .foregroundColor(cardColor(of: card))
    )

}

func cardColor(of card: Card) -> Color {
    return Color(red:228/255,green: 229/255,blue: 229/255)
}
}

struct AnswerView: View {
let card: Card
var body: some View {
    HStack {
        Spacer()
        ForEach(card.possibleAnswers,id:\.self) { answer in
            Text("\(answer)")
                .foregroundColor(.black)
                .frame(width: 75,height: 50)
                .background(
                  Rectangle()
                       .foregroundColor(cardColor(of: card))
                )
            Spacer()
        }
    }
}

func cardColor(of card: Card) -> Color {
    return Color(red:228/255,blue: 229/255)
}
}

struct ContentView: View {
@StateObject var deck = Deck()
@State private var isActive = false

var cardActive = false

var body: some View {
    ZStack {
        vstack {
            Text("Total Cards: \(deck.count)")
            if isActive {

           if let card = deck.cards[0] {
                Spacer()
                CardView(card: card)
                  .transition(.move(edge: .bottom))
                    .animation(.easeInOut(duration: 1))
                    .padding()
              AnswerView(card: card)
                  .transition(.move(edge: .bottom))
                .animation(.easeInOut(duration: 1).delay(1))
                Spacer()
                    
            }

        } else {
            Button(action: {
                    isActive.toggle()
            }) {
            ZStack {
                    RoundedRectangle(cornerRadius: 25,style: .continuous)
                        .fill(Color.gray)
                        .opacity(0.5)
                    Text("Begin")
                        .foregroundColor(.black)
            }
            .frame(width: 225,height: 25)
            .padding(5)
            }
           }
    }
    }
    }
  }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）