iOS Development

ios – Why is .animation(_:,worth:) affectes different properties’ change in SwifftUI?

Spread the love


I’ve three properties. Two with completely different animations on change and one with no animation.

struct Stick: View {
    
    var coloration: Shade
    
    var physique: some View {
        GeometryReader { world in
            Path { path in
                path.transfer(to: CGPoint(x: world.dimension.width/2, y: 0))
                path.addLine(to: CGPoint(x:world.dimension.width/2,y: world.dimension.top))
            }
            .stroke(coloration,lineWidth: 200)
        }
    }
}

struct SuperStick: View {
    
    @Binding var progress: Float
    @State var offset: CGFloat = 0
    @State var coloration: Shade = .blue.opacity(0.5)
    
    var physique: some View {
        GeometryReader { world in
            ZStack(alignment: .backside) {
                Stick(coloration: coloration)
                    .onAppear {
                        if offset >= 1 {
                            offset = 0
                        }
                        offset += 1
                        
                        coloration = .inexperienced.opacity(0.5)
                    }
            }
            .body(width: world.dimension.width, top: world.dimension.top)
            // Animation 1
//            .animation(.linear(period: 0.1).repeatForever(autoreverses: true), worth: coloration)
            // Animation 2
            .place(x: world.dimension.width * (0.3+0.4*offset),y: world.dimension.top/2)
            .animation(.linear(period: 1).repeatForever(autoreverses: false), worth: offset)
            // Animation 3
            .offset(y:CGFloat(1-progress)*world.dimension.top)
            .animation(.easeInOut(period: 0.4), worth: progress)
            
        }
    }
}

struct TestView: View {
    
    @State var progress: Float = 0.6
    
    var physique: some View {
        ZStack{
            SuperStick(progress: $progress)
                .edgesIgnoringSafeArea(.all)
            VStack {
                Stepper("progress: (String(format: "%.1f", progress))",worth: $progress, in: 0.0...1.0, step: 0.2)
                    .padding(.horizontal,40)
            }
        }
    }
}

#Preview {
    TestView()
}

We will see that Animation1 is commented, so there ought to solely be animations for offset and progress. Nonetheless, we are able to see that coloration will get animated as nicely, with the identical velocity as offset.

color property gets animated as well

Then I tried so as to add an animation for coloration, hoping coloration to have its personal animation (simply uncomment the road beneath Animation1), nonetheless, this time, offset has the identical animation as coloration as an alternative of it is personal Animation2.

offset's animation wrongly have Animation1, not 2

After which the weirdest factor occurred.

If you happen to remark Animation1 however preserve Animation2, after which attempt to change progress, you may see that though we solely have Animation2 and Animation3, and coloration is simply in some way affected by offset to have Animation2,

if you change progress, Animation2 on offset stops (interrupted by Animation3) however coloration retains altering…
the weirdest thing

Why is every little thing taking place?

Leave a Reply

Your email address will not be published. Required fields are marked *