Skip to content

Instantly share code, notes, and snippets.

@navsing
Last active September 1, 2020 22:49
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 navsing/b7803a2854af429e2c4d6adbf2ca8e59 to your computer and use it in GitHub Desktop.
Save navsing/b7803a2854af429e2c4d6adbf2ca8e59 to your computer and use it in GitHub Desktop.
Recreating Apple Music Animation Using SwiftUI and Xcode
import SwiftUI
struct AppleMusicAnimation: View {
@State var show = false
@Namespace var namespace
var body: some View {
VStack {
Spacer()
VStack (spacing: 15) {
HStack (spacing: 15) {
Image("photos").resizable().aspectRatio(contentMode: .fit).frame(width: self.show ? 350 : 50, height: self.show ? 350 : 50).padding(.top, self.show ? 40 : 0)
if !self.show {
VStack (alignment: .leading, spacing: 4) {
Text("Title")
}.matchedGeometryEffect(id: "Title", in: self.namespace)
Spacer()
Button(action: {}) {
Image(systemName: "play.fill").font(.title).foregroundColor(.black)
}.matchedGeometryEffect(id: "Play", in: self.namespace)
Button(action: {}) {
Image(systemName: "forward.fill").font(.title).foregroundColor(.black)
}
}
}
if self.show {
VStack {
HStack {
Spacer()
VStack {
Text("Title").font(.title).fontWeight(.semibold)
Text("Artist").font(.headline).foregroundColor(Color(UIColor.systemBlue))
}.matchedGeometryEffect(id: "Title", in: self.namespace)
Spacer()
}
Spacer()
Button(action: {}) {
Image(systemName: "play.fill").font(.title).foregroundColor(.black)
}.matchedGeometryEffect(id: "Play", in: self.namespace)
Spacer()
}
}
}.padding(.all).background(Color.white.shadow(radius: 3)).onTapGesture {
withAnimation(Animation.easeOut(duration: 0.4)) {
self.show.toggle()
}
}
}.background(Color.black.opacity(0.05)).edgesIgnoringSafeArea(.all)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment