Animate bubble with SwiftUI - swift

Question

I want to make a mini game for kids that have Alphabet characters floating inside a bubble so I used text with overlay image and it's working but the problem is when I tap on the bubble I don't know how to make it disappear with animation and make the text stop on current location
struct ExtractedView: View {
#State var BubbleAnimate = false
#State var AlphbetArray: [String] = ["A", "B","C","D","E","F","G"]
#State var randomNumber = Int.random(in: 0...6)
var body: some View {
Button {
BubbleAnimate = true
print("Hi")
} label: {
Text("Test Me")
}
.offset(x:100)
Text(AlphbetArray[randomNumber])
.font(.system(size: 120))
.fontWeight(.bold)
.foregroundColor(.purple)
.padding()
.overlay {
Image("bubble").resizable().frame(width: 130.0, height: 130.0).scaledToFit()
}
.animation(.linear(duration: 5).repeatForever(autoreverses: false), value: BubbleAnimate)
.offset(y:BubbleAnimate ? -300 : 300)
.onTapGesture {
print("Hello")
BubbleAnimate.toggle()
// I tried toggle but it won't work probably
}
}
}
This is the result how can I make the bubble disappear with animation and make the letter stay for 1 second period to make more animation on it like scaling etc...

Answer 1

There are a few considerations:
The letter will never stop in a specific place, given that it has only two positions: offset 300, or offset -300. To make it stop somewhere, the offset must have intermediate values. Solution: use a timer that modifies the offset every n milliseconds.
The bubble is always shown. To make it disappear, you must have a condition and a specific variable to trigger its visibility. Solution: create a variable that conditionally shows the bubble, and animate it using the .transition() modifier.
Variables must start with lower case letter. Just use the convention, it makes it easier to understand the code.
Here's the code:
// Don't use binary values for the offset, use absolute values
#State private var bubbleOffset = 0.0
#State private var alphabetArray: [String] = ["A", "B","C","D","E","F","G"]
#State private var randomNumber = Int.random(in: 0...6)
// Trigger the visibility of the bubble separately from the animation
#State private var showBubble = false
let maxOffset = 300.0
let minOffset = -300.0
// Use a timer to change the offset
let timer = Timer.publish(every: 0.01, on: .main, in: .common).autoconnect()
var body: some View {
VStack {
Button {
// The button starts the animation; in this case,
// the animation happens only when the bubble is
// visible, but it does not have to be like that
showBubble = true
print("Hi")
} label: {
Text("Test Me")
}
.offset(x:100)
Text(alphabetArray[randomNumber])
.font(.system(size: 120))
.fontWeight(.bold)
.foregroundColor(.purple)
.padding()
.overlay {
// Show the bubble conditionally
if showBubble {
Image(systemName: "bubble.left").resizable().frame(width: 130.0, height: 130.0).scaledToFit()
// This transition will animate the disappearance of the bubble
.transition(.opacity)
}
}
// Absolute offset
.offset(y: bubbleOffset)
.onTapGesture {
withAnimation {
print("Hello")
// Trigger the disappearance of the bubble
showBubble = false
}
}
.onReceive(timer) { _ in
// In this case,
// the animation happens only when the bubble is
// visible, but it does not have to be like that
if showBubble {
// Change the offset at every emission of a new time
bubbleOffset -= 1
// Handle out-of-bounds
if bubbleOffset < minOffset {
bubbleOffset = maxOffset
}
}
}
}
}