I have a view that uses .mask()
to show a hole in a Rectangle()
. I want the hole to animate from big to small.
I've wrapped the line circleTransitionWidth = 0.0
in withAnimation
, however it goes from one state to the other without animating.
My ContentView:
struct ContentView: View {
var body: some View {
CircleTransition()
.ignoresSafeArea()
}
}
And here's the rectangle/hole view:
struct CircleTransition: View {
@State private var circleTransitionWidth: CGFloat = 0.0
func Hole(in rect: CGRect, rectangleRect: CGRect) -> Path {
var shape = Rectangle().path(in: rectangleRect)
shape.addPath(Circle().path(in: rect))
return shape
}
var body: some View {
GeometryReader { geo in
Rectangle()
.fill(Color.red)
.frame(width: geo.size.width, height: geo.size.height)
.mask(Hole(in: CGRect(x: (geo.size.width * 0.5) - (circleTransitionWidth * 0.5), y: (geo.size.height * 0.5) - (circleTransitionWidth * 0.5), width: circleTransitionWidth, height: circleTransitionWidth), rectangleRect: CGRect(x: 0, y: 0, width: geo.size.width, height: geo.size.height))
.fill(style: FillStyle(eoFill: true)))
.onAppear {
circleTransitionWidth = geo.size.height
withAnimation(Animation.easeInOut(duration: 2.0)) {
circleTransitionWidth = 0.0
}
}
}
}
}
Why won't my view animate?