Skip to content

Instantly share code, notes, and snippets.

@amosgyamfi
Created June 18, 2020 23:04
Show Gist options
  • Save amosgyamfi/f9e7b0cc3369775af16ee23495d4d10c to your computer and use it in GitHub Desktop.
Save amosgyamfi/f9e7b0cc3369775af16ee23495d4d10c to your computer and use it in GitHub Desktop.
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
@State private var played = false
@State private var yScaleIndicator1 = false
@State private var yScaleIndicator2 = false
@State private var yScaleIndicator3 = false
@State private var yScaleIndicator4 = false
var body: some View {
HStack(){
Image(systemName: "circle.fill")
.font(.largeTitle)
.overlay(Image(systemName: "pause.fill").foregroundColor(Color(.systemBlue)))
VStack(alignment: .leading){
Text("SwiftUI Essential Training")
Text("1m 33s")
.font(.caption)
.foregroundColor(Color(.systemGray4))
}
Spacer()
ZStack{ // Slider
Rectangle() //Inactive
.frame(width: 120, height: 2)
.cornerRadius(2)
.foregroundColor(Color(.systemGray2))
Rectangle() //Active
.frame(width: 120, height: 2)
.cornerRadius(2)
.scaleEffect(x: played ? 1 : 0, y: 1, anchor: .leading)
.foregroundColor(Color(.systemTeal))
.animation(Animation.easeInOut(duration: 93))
.onAppear(){
self.played.toggle()
}
}
Spacer()
HStack(spacing: 2){ // 1
Rectangle()
.frame(width: 5, height: 15)
.scaleEffect(x: 1, y: yScaleIndicator1 ? 1 : 0.7, anchor: .center)
.animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
.onAppear(){
self.yScaleIndicator1 .toggle()
}
Rectangle() // 2
.frame(width: 5, height: 20)
.scaleEffect(x: 1, y: yScaleIndicator2 ? 0.8 : 1, anchor: .center)
.animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
.onAppear(){
self.yScaleIndicator2 .toggle()
}
Rectangle() // 3
.frame(width: 5, height: 20)
.scaleEffect(x: 1, y: yScaleIndicator3 ? 1 : 0.7, anchor: .center)
.animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
.onAppear(){
self.yScaleIndicator3 .toggle()
}
Rectangle() // 4
.frame(width: 5, height: 15)
.scaleEffect(x: 1, y: yScaleIndicator4 ? 0.8 : 1, anchor: .center)
.animation(Animation.easeInOut(duration: 0.2).repeatForever(autoreverses: true))
.onAppear(){
self.yScaleIndicator4 .toggle()
}
}
}.frame(maxWidth: .infinity).padding().background(Color(.systemBlue)).cornerRadius(12)
.shadow(color: .gray, radius: 2, x: 0, y: 0.2)
}
}
let ContentView_Previews = ContentView().previewDevice("iPhone XS Max").previewDisplayName("iPhone XS Max")
let vc = UIHostingController(rootView: ContentView_Previews)
PlaygroundPage.current.liveView = vc
@amosgyamfi
Copy link
Author

8B508648-421F-4B8E-B94B-2E391EFECCA3

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment