I have three properties. Two with different animations on change and one with no animation.
struct Stick: View {
var color: Color
var body: some View {
GeometryReader { global in
Path { path in
path.move(to: CGPoint(x: global.size.width/2, y: 0))
path.addLine(to: CGPoint(x:global.size.width/2,y: global.size.height))
}
.stroke(color,lineWidth: 200)
}
}
}
struct SuperStick: View {
@Binding var progress: Float
@State var offset: CGFloat = 0
@State var color: Color = .blue.opacity(0.5)
var body: some View {
GeometryReader { global in
ZStack(alignment: .bottom) {
Stick(color: color)
.onAppear {
if offset >= 1 {
offset = 0
}
offset += 1
color = .green.opacity(0.5)
}
}
.frame(width: global.size.width, height: global.size.height)
// Animation 1
// .animation(.linear(duration: 0.1).repeatForever(autoreverses: true), value: color)
// Animation 2
.position(x: global.size.width * (0.3+0.4*offset),y: global.size.height/2)
.animation(.linear(duration: 1).repeatForever(autoreverses: false), value: offset)
// Animation 3
.offset(y:CGFloat(1-progress)*global.size.height)
.animation(.easeInOut(duration: 0.4), value: progress)
}
}
}
struct TestView: View {
@State var progress: Float = 0.6
var body: some View {
ZStack{
SuperStick(progress: $progress)
.edgesIgnoringSafeArea(.all)
VStack {
Stepper("progress: \(String(format: "%.1f", progress))",value: $progress, in: 0.0...1.0, step: 0.2)
.padding(.horizontal,40)
}
}
}
}
#Preview {
TestView()
}
We can see that Animation1 is commented, so there should only be animations for offset and progress. However, we can see that color gets animated as well, with the same speed as offset.
Then I attempted to add an animation for color, hoping color to have its own animation (just uncomment the line below Animation1), however, this time, offset has the same animation as color instead of it’s own Animation2.
And then the weirdest thing happened.
If you comment Animation1 but keep Animation2, and then try to change progress, you’ll see that although we only have Animation2 and Animation3, and color is just somehow affected by offset to have Animation2,
when you change progress, Animation2 on offset stops (interrupted by Animation3) but color keeps changing…

Why is everything happening?






