通過MatchedGeometryEffect向上滑動視圖

我想用它.matchedGeometryEffect來實作點擊影像時的上滑影片。我只想用它來設定位置變化的影片，因為兩個影像的框架是相同的。在此示例中，我將影像替換為黑色矩形，因為它也可以重現。簡化代碼：

struct ContentView: View {
    @Namespace var namespace
    @State var isShowingDetail = false
    var body: some View {
            if isShowingDetail {
                VStack {
                    Rectangle()
                    .foregroundColor(.black)
                    .matchedGeometryEffect(id: "image", in: namespace, properties: .position)
                    .aspectRatio(contentMode: .fit)
                    .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
                .onTapGesture {
                    changeView()
                }
            } else {
                Rectangle()
                    .foregroundColor(.black)
                    .matchedGeometryEffect(id: "image", in: namespace, properties: .position)
                    .aspectRatio(contentMode: .fit)
                    .cornerRadius(8)
                    .onTapGesture {
                        changeView()
                    }
            }
    }

    private func changeView() {
        withAnimation(.easeOut(duration: 0.3)){
            isShowingDetail.toggle()
        }
    }
}

視圖向上滑動，但影片不正確，因為它具有淡入淡出效果。我假設它與應用于每個視圖的默認淡入淡出轉換有關，我試圖設定一個自定義的，但找不到適合這種情況的一個。

uj5u.com熱心網友回復：

修飾符的位置matchedGeometryEffect很重要，而且更重要。

這是固定的變體。Xcode 13.2 / iOS 15.2

var body: some View {
    if isShowingDetail {
        VStack {
            Rectangle()
                .foregroundColor(.black)
                .aspectRatio(contentMode: .fit)
                .edgesIgnoringSafeArea(.top)
                                            // !! applied here !!
                .matchedGeometryEffect(id: "image", in: namespace, properties: .position)
            Spacer()
        }
        .onTapGesture {
            changeView()
        }
    } else {
        Rectangle()
            .foregroundColor(.black)
            .aspectRatio(contentMode: .fit)
            .cornerRadius(8)
                               // !! applied here !!
            .matchedGeometryEffect(id: "image", in: namespace, properties: .position)
            .onTapGesture {
                changeView()
            }
    }
}

uj5u.com熱心網友回復：

我想出了閃爍/淡入淡出效果去除部分。正如我所假設的，它與默認的淡入淡出轉換有關，如果沒有顯式轉換則適用。我為這種情況找到了一個合適的：

            if isShowingDetail {
                VStack {
                    Rectangle()
                    .foregroundColor(.black)
                    .aspectRatio(contentMode: .fit)
                    .matchedGeometryEffect(id: "image", in: namespace, properties: .position)
                    .edgesIgnoringSafeArea(.top)
                    Spacer()
                }
                .transition(.offset())  // applied here
                    .onTapGesture {
                        changeView()
                    }
            } else {
                Rectangle()
                    .foregroundColor(.black)
                    .aspectRatio(contentMode: .fit)
                    .matchedGeometryEffect(id: "image", in: namespace, properties: .position)
                    .transition(.offset())  // applied here
                    .onTapGesture {
                        changeView()
                    }
            }

標籤：IOS 迅速 动画 迅捷

上一篇：有沒有辦法在html/css中為出現的文本設定影片？

下一篇：SVG掩碼翻譯滯后于Chromium瀏覽器