Clock Circles Swift

ClockCircles.swift

//
//  ClockCircles.swift
//  ClockCircles
//
//  Created by Guilherme Mogames on 11/5/18.
//  Testing 3 circles inside each other

import UIKit

class ClockCircles: UIView {
    
    let hourShapeLayer = CAShapeLayer()
    let minuteShapeLayer = CAShapeLayer()
    let secondShapeLayer = CAShapeLayer()

    func setup() {
        
        setupHour()
        setupMinute()
        setupSecond()
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            self.animateClock()
        }
    }
    
    func setupHour() {
        let hourTrackPath = CAShapeLayer()
        let hourCirclePath = UIBezierPath(
            arcCenter: center,
            radius: 63,
            startAngle: -.pi / 2,
            endAngle: 2 * .pi,
            clockwise: true)
        hourTrackPath.path = hourCirclePath.cgPath
        
        // Setup Track
        hourTrackPath.strokeColor = UIColor(red: 0.9450980392, green: 0.9450980392, blue: 0.9450980392, alpha: 1.0).cgColor
        hourTrackPath.lineWidth = 12
        hourTrackPath.fillColor = UIColor.clear.cgColor
        layer.addSublayer(hourTrackPath)
        
        // Setup Stroke
        hourShapeLayer.path = hourCirclePath.cgPath
        hourShapeLayer.strokeColor = UIColor(red: 1, green: 63/255, blue: 63/255, alpha: 1).cgColor
        hourShapeLayer.fillColor = UIColor.clear.cgColor
        hourShapeLayer.lineWidth = 12
        hourShapeLayer.lineCap = kCALineCapRound
        hourShapeLayer.strokeEnd = 1
        
        layer.addSublayer(hourShapeLayer)
    }
    
    func setupMinute() {
        let minuteTrackPath = CAShapeLayer()
        let minuteCirclePath = UIBezierPath(
            arcCenter: center,
            radius: 47,
            startAngle: -.pi / 2,
            endAngle: 2 * .pi,
            clockwise: true)
        minuteTrackPath.path = minuteCirclePath.cgPath
        
        // Setup Track
        minuteTrackPath.strokeColor = UIColor(red: 0.9450980392, green: 0.9450980392, blue: 0.9450980392, alpha: 1.0).cgColor
        minuteTrackPath.lineWidth = 12
        minuteTrackPath.fillColor = UIColor.clear.cgColor
        layer.addSublayer(minuteTrackPath)
        
        // Setup Stroke
        minuteShapeLayer.path = minuteCirclePath.cgPath
        minuteShapeLayer.strokeColor = UIColor(red: 65/255, green: 133/255, blue: 222/255, alpha: 1).cgColor
        minuteShapeLayer.fillColor = UIColor.clear.cgColor
        minuteShapeLayer.lineWidth = 12
        minuteShapeLayer.lineCap = kCALineCapRound
        minuteShapeLayer.strokeEnd = 1
        
        layer.addSublayer(minuteShapeLayer)
    }
    
    func setupSecond() {
        let secondTrackPath = CAShapeLayer()
        let secondCirclePath = UIBezierPath(
            arcCenter: center,
            radius: 31,
            startAngle: -.pi / 2,
            endAngle: 2 * .pi,
            clockwise: true)
        secondTrackPath.path = secondCirclePath.cgPath
        
        // Setup Track
        secondTrackPath.strokeColor = UIColor(red: 0.9450980392, green: 0.9450980392, blue: 0.9450980392, alpha: 1.0).cgColor
        secondTrackPath.lineWidth = 12
        secondTrackPath.fillColor = UIColor.clear.cgColor
        layer.addSublayer(secondTrackPath)
        
        // Setup Stroke
        secondShapeLayer.path = secondCirclePath.cgPath
        secondShapeLayer.strokeColor = UIColor(red: 1, green: 188/255, blue: 60/255, alpha: 1).cgColor
        secondShapeLayer.fillColor = UIColor.clear.cgColor
        secondShapeLayer.lineWidth = 12
        secondShapeLayer.lineCap = kCALineCapRound
        secondShapeLayer.strokeEnd = 1
        
        layer.addSublayer(secondShapeLayer)
    }
    
    func animateClock() {
        let hourAnimation = CABasicAnimation(keyPath: "strokeEnd")
        hourAnimation.toValue = 0
        hourAnimation.duration = 4
        hourAnimation.fillMode = kCAFillModeForwards
        hourAnimation.isRemovedOnCompletion = true
        
        hourShapeLayer.add(hourAnimation, forKey: "hourStrokeAnimation")
        minuteShapeLayer.add(hourAnimation, forKey: "minuteStrokeAnimation")
        secondShapeLayer.add(hourAnimation, forKey: "secondStrokeAnimation")
    }
}