1

I'm trying to make an animation where the coin flips and moves up then back down and stops after button click. With this code it moves up and down, but then snaps to the top position after the animation finishes. I know it must be because of the '.offset' but I don't know a way around it. Youtube hasn't been much help.

   @State private var isClicked : Bool = false

            Image(coins[numbers[0]])
                .resizable()
                .scaledToFit()
                .scaleEffect(0.6)
                .rotation3DEffect(isClicked ?
                                    .init(degrees: 1080) : .init(degrees: 0),
                                  axis: (x: 10.0, y: 0.0, z: 0.0))
                .animation(Animation.easeInOut.repeatCount(2, autoreverses: true)
                            .speed(0.5))
                .offset(y: isClicked ? -200 : 0)
            
           Button(action: {self.animation()}, label: {
                Text("FLIP!")
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(Color.black)
            })

    func animation() {
        self.isClicked.toggle()
    }
NikkoNikkoNii
  • 149
  • 1
  • 7

1 Answers1

0

You should use Animation.easeInOut.repeatCount(3, autoreverses: true, .speed(0.5) which has repeatCount(3 instead of repeatCount(2. The coin goes up and comes down and thats were it has done its 2 cycles of repeat that you declared. After that, the coin is supposed to be on top, but it has already done its 2 repeat counts so it can't animate itself to the top, and it just goes to the top without any animations. With repeatCount(3, you added one more cycle so the coin has another chance to go back to top and end the animation there.

Mahdi BM
  • 1,826
  • 13
  • 16
  • Took a hiatus but I'm back. I don't want the animation to end on top, I need it to end where it started in only 2 moves; first going up, then returning down and stopping in its original position. – NikkoNikkoNii Oct 20 '21 at 14:19