Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
//
// ContentView.swift
// FocusMeditationAnimation
//
// Created by Amos Gyamfi on 8.2.2021.
//
import SwiftUI
struct ContentView: View {
@State private var animateProgress = false
@State private var animateHue = false
@State private var animateSmallCircle = false
@State private var animateLargeCircle = false
@State private var animateTag = false
@State private var animateSound = false
let phoneBackground = LinearGradient(gradient: Gradient(colors: [Color(#colorLiteral(red: 0.6823529412, green: 0.8352941176, blue: 1, alpha: 1)), Color(#colorLiteral(red: 0.6117647059, green: 0.6078431373, blue: 1, alpha: 1))]), startPoint: .topLeading, endPoint: .bottomLeading)
var body: some View {
ZStack {
// Background image
Image("desert")
.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
.opacity(0.8)
.blur(radius: 10)
.hueRotation(.degrees(animateHue ? -120 : 180))
.animation(Animation.easeInOut(duration: 2).repeatForever(autoreverses: true))
.onAppear() {
animateHue.toggle()
}
phoneBackground
.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
.opacity(0.8)
.blur(radius: 10)
VStack {
HStack {
Image(systemName: "chevron.down.circle.fill")
.font(.title)
Spacer()
Image(systemName: "gear")
.font(.title)
}
.padding()
ZStack {
Circle()
.stroke()
.frame(width: UIScreen.main.bounds.width - 50, height: UIScreen.main.bounds.width - 50, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(animateLargeCircle ? 1.2 : 0.73)
.opacity(animateLargeCircle ? 0 : 1)
.animation(Animation.easeOut(duration: 4).delay(1).repeatForever(autoreverses: false))
.onAppear() {
animateLargeCircle.toggle()
}
Circle()
.stroke()
.frame(width: UIScreen.main.bounds.width - 100, height: UIScreen.main.bounds.width - 100, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.scaleEffect(animateSmallCircle ? 1.2 : 0.84)
.opacity(animateSmallCircle ? 0 : 1)
.animation(Animation.easeInOut(duration: 4).delay(1).repeatForever(autoreverses: false))
.onAppear() {
animateSmallCircle.toggle()
}
Circle() // Inactive
.stroke(lineWidth: 4)
.frame(width: UIScreen.main.bounds.width - 150, height: UIScreen.main.bounds.width - 150, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.opacity(0.2)
Circle() // Active
.trim(from: animateProgress ? 8/9 : 0, to: 1)
.stroke(style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round))
.frame(width: UIScreen.main.bounds.width - 150, height: UIScreen.main.bounds.width - 150, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.rotationEffect(.degrees(-90))
.animation(Animation.linear(duration: 300))
.onAppear() {
animateProgress.toggle()
}
// Time
VStack {
Text(Date().addingTimeInterval(300), style: .timer) // 3600 = 1 minute
.font(.system(size: 96))
.fontWeight(.ultraLight)
Label("Focus", systemImage: "record.circle")
}
}
Spacer()
// Pause button
RoundedRectangle(cornerRadius: 32)
.stroke()
.frame(width: 120, height: 64, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/)
.overlay(Text("Pause"))
Spacer()
// Bottom
HStack {
VStack {
Image(systemName: "tag") // Tag icon
.font(.largeTitle)
.rotationEffect(.degrees(animateTag ? -15 : 15), anchor: .bottomTrailing)
.animation(Animation.interpolatingSpring(stiffness: 170, damping: 5).repeatForever(autoreverses: false))
.onAppear() {
animateTag.toggle()
}
Text("Focus Tags")
}
Spacer()
VStack {
Image(systemName: "waveform") // Sound icon
.clipShape(Circle().offset(y: animateSound ? 10 : -15))
.font(.largeTitle)
.animation(Animation.interpolatingSpring(mass: 0.05, stiffness: 170, damping: 15, initialVelocity: 1).repeatForever(autoreverses: true))
.onAppear() {
animateSound.toggle()
}
Text("Sound Scenes")
}
}
.padding()
}
.foregroundColor(.white)
.padding()
} // Container for all views
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment