Skip to content

Instantly share code, notes, and snippets.

@amosgyamfi
Created June 17, 2020 14:14
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/1339cd48b4be05d543fd32af0dc4a206 to your computer and use it in GitHub Desktop.
Save amosgyamfi/1339cd48b4be05d543fd32af0dc4a206 to your computer and use it in GitHub Desktop.
This is an example SwiftUI animation prototyping using xCode Playground on iPad
import SwiftUI
import PlaygroundSupport
struct ContentView: View {
@State private var isSpinning = false
@State private var isShowing = false
@State private var isDisplaying = false
var body: some View {
ZStack{
Rectangle()
.frame(width: 414, height: 896, alignment: .center)
.foregroundColor(Color(.systemGray6))
// Spinner
Image(systemName: "arrow.2.circlepath")
.font(.largeTitle)
.foregroundColor(Color(.systemTeal))
.rotationEffect(.degrees(isSpinning ? 360 : -360))
.animation(Animation.easeInOut(duration: 2).repeatCount(1, autoreverses: false).speed(1))
.onAppear() {
self.isSpinning.toggle()
}
// Circle
Image(systemName: "circle.fill")
.font(.system(size: 44))
.foregroundColor(Color(.systemGreen))
.opacity(isShowing ? 1 : 0)
.animation(Animation.easeInOut(duration: 2).repeatCount(1, autoreverses: false).delay(2).speed(2))
.onAppear() {
self.isShowing.toggle()
}
// Checkmark
Image(systemName: "checkmark")
.font(.title)
.opacity(isDisplaying ? 1 : 0)
.rotationEffect(.degrees(isDisplaying ? 0 : -30), anchor: .bottom)
.animation(Animation.interpolatingSpring(stiffness: 170, damping: 5).delay(2))
.onAppear() {
self.isDisplaying.toggle()
}
}
}
}
let ContentView_Previews = ContentView()
let vc = UIHostingController(rootView: ContentView_Previews)
PlaygroundPage.current.liveView = vc
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment