Skip to content

Instantly share code, notes, and snippets.

@amosgyamfi
Created August 10, 2020 23:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save amosgyamfi/21d53a87d5e7b2f2595a2e769275e7de to your computer and use it in GitHub Desktop.
Save amosgyamfi/21d53a87d5e7b2f2595a2e769275e7de to your computer and use it in GitHub Desktop.
Seamless photo zoom effect using geometry matching.
//
// ContentView.swift
// Create seamless photo zoom effect using geometry matching.
//
// Created by Amos Gyamfi on 8.8.2020.
//Create Smooth Transitions with Geometry Matching
import SwiftUI
struct ContentView: View {
@State private var unZoom = true
@Namespace private var morphSeamlessly
var body: some View {
ZStack {
if unZoom { // Show profile
HStack {
Image("profile")
.matchedGeometryEffect(id: "morph", in: morphSeamlessly)
VStack(alignment: .leading) {
Text("Netta")
Text("Content Strategist")
.foregroundColor(.secondary)
HStack {
Image(systemName: "mappin.and.ellipse")
Text("Mississauga ON")
.font(.caption)
}
}
}.offset(x: -70, y: -350)
}
else{ // Shoew zoomed
Image("zoomed")
.resizable()
.aspectRatio(contentMode: .fill)
.scaleEffect(unZoom ? 0 : 1.2, anchor: .center)
.matchedGeometryEffect(id: "morph", in: morphSeamlessly)
.offset(x: unZoom ? -150 : 0, y: unZoom ? -300 : 0)
}
}
.onTapGesture(count: 1, perform: {
withAnimation(
Animation.interpolatingSpring(stiffness: 150, damping: 20)
){
unZoom.toggle()
}
})
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
.preferredColorScheme(.dark)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment