CODEWITHSUNDEEP
animationswiftui
Chris
Chris

Reputation: 8091

how can i make this animation work correctly?

i want to do this: my Text ("Hello 0") should rotate 90 degrees around the y axis then increase (hidden) its number and then fullfill the circle rotation with the increased number. unfortuantely the rotation starts at 90 degrees and before the text is hidden?

what am i doing wrong?

here is my code (runnable and reproducable)

struct ContentView: View {

    @State var number : Int = 0
    @State var degrees : Angle = .degrees(0)

    var body: some View {

        VStack {
            Text("Hello \(number)")
                .rotation3DEffect(degrees, axis: (x: 0, y: 1, z: 0))
                .animation(.easeInOut(duration:2.5))
            Button(action: {
                withAnimation(Animation.easeInOut(duration:2.5)) {
                    self.degrees = .degrees(90)
                }

                withAnimation(Animation.easeInOut(duration: 2.5 * 3).delay(2.5)) {
                    self.number = self.number + 1
                    self.degrees = .degrees(359)
                }
            }) {
                Text("Animate")
            }
        }
    }
}

Upvotes: 2

Views: 75

Answers (1)

Asperi
Asperi

Reputation: 257779

If I correctly understood the goal here is possible solution. Tested with Xcode 11.4 / iOS 13.4

demo

struct ContentView: View {

    @State var number : Int = 0
    @State var degrees : Angle = .degrees(0)

    var body: some View {

        VStack {
            Text("Hello \(number)").font(.largeTitle)
                .rotation3DEffect(degrees, axis: (x: 0, y: 1, z: 0))
            Button(action: {
                withAnimation(.easeInOut(duration:2.5)) {
                    self.degrees = .degrees(90)               // << animating
                }
                DispatchQueue.main.asyncAfter(deadline: .now() + 2.51) {
                    self.number = self.number + 1             // << don't
                    withAnimation(.easeInOut(duration:2.5)) {
                        self.degrees = .degrees(360)          // << animating
                    }
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2.51) {
                        self.degrees = .degrees(0)            // << don't - reset !!
                    }
                }
            }) {
                Text("Animate")
            }
        }
    }
}

Upvotes: 2

Related Questions