Анимировать изображение от миниатюры до полного экрана

Question

Можно ли повторить поведение приложения iOS Фотографии при открытии подробного вида фотографии, когда пользователь нажимает на фотографию, которая раскрывается для заполнения экрана - в SwiftUI.

Я могу откройте фотографию в новом виде поверх текущего, но я не могу понять, как анимировать изображение в представлении, расширяющемся с его текущего местоположения на полноэкранный режим - возможно ли это, даже если оно вложено в стопки?

Вот базовая c версия моего пользовательского интерфейса:

struct ContentView: View {

    var body: some View {

        VStack {
            BannerView()
                .padding()
            Text("Title")
        }

    }
}

struct BannerView: View {

    var body: some View {
        HStack {
            VStack {
                Image(systemName: "rectangle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .padding()
                    .onTapGesture {
                        // Enbiggen image
                }
            }
            VStack {
                Text("Text")
                Text("Text 1")
                Text("Text 2")
            }
        }
        .background(Color(UIColor.systemBackground))
    }

}

Поэтому, когда пользователь нажимает на изображение в BannerView, оно должно анимироваться с его текущего размера, чтобы заполнить экран.

Единственный способ управлять им в моей голове - это скрыть дублирующееся изображение поверх изображения Bannerview из ContentView и анимировать его, а затем масштабировать до полного экрана, но как мне определить местоположение и размер изображения в BannerView?

Answer 1

Мне удалось сделать изображение полноэкранным с помощью простой анимации масштабирования, добавив State для соотношения сторон прямоугольника

struct BannerView: View {
    @State var contentMode = ContentMode.fit

    var body: some View {
        HStack {
            VStack {
                Image(systemName: "rectangle.fill")
                    .resizable()
                    .aspectRatio(contentMode: contentMode)
                    .padding()
                    .onTapGesture {
                        withAnimation {
                            self.contentMode = ContentMode.fill
                        }
                }
            }
            VStack {
                Text("Text")
                Text("Text 1")
                Text("Text 2")
            }
        }
        .background(Color(UIColor.systemBackground))
    }
}