Below I have three Text views, the location of View 3
will be dynamic every time the app loads, and what I would like to be able to do is animate View 2
to the exact position of View 3
regardless of where View 3
is on the screen.
I found this thread but I'm not sure how to use ReometryReader
to accomplish what I need.
How can I get the current position of View 3
?
How can I assign the x and y position of the View 3
to xPosition
and yPosition
respectively inside the withAnimation method?
struct PositioningViews: View {
@State private var xPosition:CGFloat = 0
@State private var yPosition:CGFloat = 0
var body: some View {
HStack {
Text("View 1")
.background(.purple)
Text("View 2")
.background(.orange)
.offset(x: xPosition, y: yPosition)
.onAppear {
withAnimation(Animation.easeOut(duration: 0.3).delay(0.5)) {
self.xPosition = 50
self.yPosition = 0
}
}
Text("View 3")
.background(.blue)
}
}
}
CodePudding user response:
Complete Working Code:
struct PositioningViews: View {
@State private var xPosition2:CGFloat = 0
@State private var yPosition2:CGFloat = 0
@State private var xPosition3:CGFloat = 0
@State private var yPosition3:CGFloat = 0
@State private var offsetValueX = 0.0
@State private var offsetValueY = 0.0
var body: some View {
HStack {
Text("View 1")
.background(.purple)
Text("View 2")
.background(.orange)
.overlay(
GeometryReader{ geo -> AnyView in
AnyView(Color.clear
.onAppear(){
xPosition2 = geo.frame(in: .global).midX
yPosition2 = geo.frame(in: .global).midY
})
}
)
.background(.blue)
.offset(x: offsetValueX, y: offsetValueY)
.onAppear(){
DispatchQueue.main.asyncAfter(deadline: .now() 0.5) {
withAnimation {
offsetValueX = xPosition3 - xPosition2
offsetValueY = yPosition3 - yPosition2
}
}
}
.zIndex(2)
Text("View 3")
.background(.blue)
.overlay(
GeometryReader{ geo -> AnyView in
AnyView(Color.clear
.onAppear(){
xPosition3 = geo.frame(in: .global).midX
yPosition3 = geo.frame(in: .global).midY
})
}
)
.zIndex(1)
}
}
}