I need to create an animation for previous and next questions. The current question should move out and next/prev question should come in.
If you run the app and keep pressing next, it works well.
Current question moves out towards left
Next question appears from right to left.
But if I switch the direction to previous,
Current question moves out towards left( should move out towards right)
next question comes in from left to right( which is correct).
Similar discrepancy happens when I switch direction from prev to next.
Why is this so?
import SwiftUI
struct Question {
let id: Int
let text: String
}
extension AnyTransition {
static var slideRight: AnyTransition {
let insertion = AnyTransition.move(edge: .trailing)
let removal = AnyTransition.move(edge: .leading)
return .asymmetric(insertion: insertion, removal: removal)
}
static var slideLeft: AnyTransition {
let insertion = AnyTransition.move(edge: .leading)
let removal = AnyTransition.move(edge: .trailing)
return .asymmetric(insertion: insertion, removal: removal)
}
}
struct QuizView: View {
let questions = [
Question(id: 1, text: "11111111111"),
Question(id: 2, text: "222222222222222222222222"),
Question(id: 3, text: "3333333333333333333"),
Question(id: 4, text: "444444444444444444444444"),
Question(id: 5, text: "55555555555555555555"),
Question(id: 6, text: "6666666666666666666666666")
]
@State private var currentQuestionIndex = 0
@State private var navigationDirection: NavigationDirection = .forward
var body: some View {
VStack(spacing: 20) {
Text(questions[currentQuestionIndex].text)
.id(questions[currentQuestionIndex].id) // Important for transition
.transition(navigationDirection == .forward ? .slideRight : .slideLeft)
.frame(maxWidth: .infinity, maxHeight: .infinity)
HStack {
Button("Previous") {
moveToPreviousQuestion()
}
.disabled(currentQuestionIndex == 0)
Spacer()
Button("Next") {
moveToNextQuestion()
}
.disabled(currentQuestionIndex == questions.count - 1)
}
}
.padding()
.animation(.easeInOut(duration: 1.0), value: currentQuestionIndex)
}
private func moveToNextQuestion() {
if currentQuestionIndex < questions.count - 1 {
navigationDirection = .forward
currentQuestionIndex += 1
}
}
private func moveToPreviousQuestion() {
if currentQuestionIndex > 0 {
navigationDirection = .backward
currentQuestionIndex -= 1
}
}
}
enum NavigationDirection {
case forward, backward
}
0
0
672