square아래에 있는 두 개의 사각형을 공통 중심점에서 최종 위치 까지 애니메이션으로 표시하고 제거하면 다시 되돌리려 고합니다.
여기에 내가 시도한 것이 있지만 결과적으로 겹치는 위치에서 시작하지 않고 중앙에서 각각에 가깝게 시작합니다.
struct ContentView: View {
@State var matched = true
@State var show = false
@Namespace var ns
var body: some View {
VStack {
HStack {
Spacer()
if show {
square
.matchedGeometryEffect(id: matched ? "match" : "",
in: ns, anchor: .center, isSource: false)
.animation(.easeIn)
.transition(.move(edge: .trailing ))
.onAppear { withAnimation { matched = false } }
.onDisappear { withAnimation { matched = true } }
}
Spacer()
.matchedGeometryEffect(id: "match", in: ns, anchor: .center, isSource: true)
if show {
square
.matchedGeometryEffect(id: matched ? "match" : ""
in: ns, anchor: .center, isSource: false)
.animation(.easeIn)
.transition(.move(edge: .leading))
}
Spacer()
}
Button("show") { withAnimation { show.toggle() } }
}
}
}
사각형 square은 간단히 다음과 같이 정의됩니다.
var square: some View {
Rectangle().foregroundColor(.blue)
.frame(width: 40, height: 40, alignment: .center)
}
어떤 종류의 작업은에서 matchedGeometryEffect오버레이 에 연결 하고 모든 오버레이 Spacer에 명시 적으로 지정 properties: .position하는 것이 었습니다.
그래도 나타날 때만 작동하지만 사라질 때는 작동하지 않습니다. 거기에 여전히 간격이 있습니다.
Spacer().overlay(
Color.clear
.matchedGeometryEffect(id: "match", in: ns, properties: .position, anchor: .center, isSource: true)
)
이것이이 효과를 얻기위한 올바른 일반적인 접근 방식입니까? 그렇다면 어떻게 작동시킬 수 있습니까? 아니면 너무 복잡하게 만들었나요?
치수가 같고 약간 단순화 된 다른 명확한 정사각형과 일치하는 형상을 사용해보십시오. 제거하고 일부 색상 혼합 모드로 교체 할 수있는 본질적인 불투명도 전환이 있습니다.
struct ContentView: View {
//@State var matched = true
@State private var show = false
@Namespace private var ns
var body: some View {
VStack {
HStack {
Spacer()
if show {
Square(color: .blue)
.matchedGeometryEffect(id: 1, in: ns, isSource: false)
}
Spacer()
.background(Square(color: .clear)
.matchedGeometryEffect(id: show ? 0 : 1, in: ns, isSource: true))
if show {
Square(color: .red)
.matchedGeometryEffect(id: 1, in: ns, isSource: false)
}
Spacer()
}
Button("show") { withAnimation { show.toggle() } }
}
}
struct Square: View {
let color: Color
var width: CGFloat = 40
var body: some View {
Rectangle().foregroundColor(color).frame(width: width, height: width)
}
}
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다