Skip to content

Instantly share code, notes, and snippets.

@mageshsridhar
Created January 26, 2022 03:00
Show Gist options
  • Save mageshsridhar/ae2819d9bdfd24aee05429a6e49fa5ea to your computer and use it in GitHub Desktop.
Save mageshsridhar/ae2819d9bdfd24aee05429a6e49fa5ea to your computer and use it in GitHub Desktop.
//
// ContentView.swift
// ActivityRingAnimation WatchKit Extension
//
// Created by AppleDesignDev on 1/25/22.
//
import SwiftUI
struct ContentView: View {
var body: some View {
TimelineView(.periodic(from: .now, by: 1.0)) { timeline in
ActivityStartRing(now: timeline.date)
}
}
}
struct ActivityStartRing: View {
let states = ["Ready", "3", "2", "1"]
@State private var progress = [1,0.66,0.33,0]
@State var progressIndex = 0
@State var textIndex = 0
var now: Date
var body: some View {
ZStack() {
Group {
Circle()
.stroke(style: StrokeStyle(lineWidth: 15, lineCap: .round))
.brightness(-0.3)
Circle()
.trim(from: 0, to: progress[progressIndex])
.stroke(style: StrokeStyle(lineWidth: 15, lineCap: .round))
}.rotationEffect(.degrees(-90))
Circle().fill(Color.green).frame(width:15,height:15).offset(y:-75)
Group {
Text("Ready")
.scaleEffect(textIndex == 0 ? 1 : 0)
.opacity(textIndex == 0 ? 1 : 0)
.font(.system(size: 35, weight: .medium, design: .rounded))
Group {
Text("3")
.scaleEffect(textIndex == 1 ? 1 : 0)
.opacity(textIndex == 1 ? 1 : 0)
Text("2")
.scaleEffect(textIndex == 2 ? 1 : 0)
.opacity(textIndex == 2 ? 1 : 0)
Text("1")
.scaleEffect(textIndex == 3 ? 1 : 0)
.opacity(textIndex == 3 ? 1 : 0)
}.font(.system(size: 80, weight: .medium, design: .rounded))
}
}
.foregroundColor(.green)
.frame(width: 150, height: 150)
.onChange(of: now) { _ in
withAnimation(.spring()){
progressIndex = (progressIndex + 1) % states.count
}
withAnimation(.spring(response: 0.3, dampingFraction: 0.9, blendDuration: 0.4)){
textIndex = (textIndex + 1) % states.count
}
}
}
}
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