image-expansion.swift

import SwiftUI

struct ContentView: View {
    @State var pictureExpanded = false
    
    var body: some View {
        VStack(alignment: .leading, spacing: 20.0) {
            Text("Once upon a time there was a turtle named George who made friends with a giraffe at the local water park and then they went on lots of adventures together.")
            
            Button {
                withAnimation {
                    pictureExpanded.toggle()
                }
            } label: {
                Text("Tap to \(pictureExpanded ? "hide" : "see") a pretty picture")
            }
            
            Image("chacha")
                .resizable()
                .frame(height: pictureExpanded ? 311 : 0.0)
            
            Text("The giraffe's name was Leonard, and together George and Leonard became the best of friends and did all sorts of cool things together like climbing a mountain.")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

import SwiftUI

struct SizePreferenceKey: PreferenceKey {
    static var defaultValue: CGSize = .zero

    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

struct ContentView: View {
  @Namespace var geometry
  @State var pictureExpanded = false
  
  @State private var contentSize: CGSize = .zero
  
  var body: some View {
    
    ZStack {
      GeometryReader { geometry in
        Image("chacha").scaleEffect(2)
          .preference(key: SizePreferenceKey.self, value: geometry.size)
      }
      .onPreferenceChange(SizePreferenceKey.self) { self.contentSize = $0 }
      .hidden()
      
      Image("chacha").scaleEffect(2)
      
      VStack(spacing: 0) {
        Rectangle().fill(.white)
        Rectangle().fill(.clear)
          .frame(height: pictureExpanded ? contentSize.height / 2: 0)
        Rectangle().fill(.white)
      }
      
      VStack(alignment: .leading, spacing: 20.0) {
          Text("Once upon a time there was a turtle named George who made friends with a giraffe at the local water park and then they went on lots of adventures together.")

        Rectangle().fill(.clear)
          .frame(height: pictureExpanded ? contentSize.height / 2: 0)
        
        Button {
          withAnimation {
            pictureExpanded.toggle()
          }
        } label: {
          Text("Tap to \(pictureExpanded ? "hide" : "see") a pretty picture")
        }
        
        Text("The giraffe's name was Leonard, and together George and Leonard became the best of friends and did all sorts of cool things together like climbing a mountain.")
      }
    }
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}