Here is my View:
struct HomeView: View {
@ObservedObject var instance = Instance()
@State var dotColor = Color.gray
var repeatingAnimation: Animation {
Animation
.easeInOut(duration: 1.0)
.repeatForever()
}
var body: some View {
ZStack {
TabView(selection: $selectedTab) {
Settings(auth: auth)
.tabItem {
Image(systemName: "gear")
Text("Settings")
}.tag(0)
ZStack {
MapView(locationManager: locationManager)
Color.black.opacity(self.instance.status.opacity)
VStack {
Spacer()
Button(action: {
print("clicked")
withAnimation(self.repeatingAnimation) {
self.dotColor = Color.white
}
self.instance.changeStatus()
}){
HStack {
Text(self.instance.status.text)
.font(.system(size: 24))
.fontWeight(.bold)
.foregroundColor(Color.white)
Circle().frame(width: 12, height: 12)
.foregroundColor(self.dotColor)
.colorMultiply(self.dotColor)
.overlay(
Circle()
.stroke(Color.black, lineWidth: 1)
)
}
}.padding()
My animation, changes the color of the Circle() from gray to white every second. However, it also changes my ZStack color opacity (Color.black.opacity(self.instance.status.opacity)) every second - even though it's not related to my animation.
If I remove the animation this weird behaviour does not occur to the ZStack opacity.
How can I fix this?