Working on dash line percent

1Weather/UI/View controllers/Today/Cells/CitySunCell.swift

@@ -7,43 +7,59 @@
 
 import UIKit
 
+private struct CircleSegment {
+    let chord:CGFloat
+    let height:CGFloat
+    var radius:CGFloat {
+        return (height / 2) + (pow(chord,2) / (8 * height))
+    }
+    var diameter:CGFloat {
+        return radius * 2
+    }
+    var alpha:CGFloat {
+        return asin((radius - height) / radius)
+    }
+    
+    init(chord:CGFloat, height:CGFloat) {
+        self.chord = chord
+        self.height = height
+    }
+}
+
 class CitySunCell: UITableViewCell {
     static let kIdentifier = "citySunCell"
-    
     //Private
+    //Heading
     private let headingLabel = UILabel()
     private let arrowButton = ArrowButton()
+    
+    //Infographic
     private let infographicContainer = UIView()
     private let infographicLabel = UILabel()
+    private let kDashLineTopInset:CGFloat = 14
     private let infographicDashLine = CAShapeLayer()
     private let earthImageView = UIImageView(image: UIImage(named: "earth"))
+    
+    //Sun
     private let sunImageView = UIImageView(image: UIImage(named: "sun"))
     private let sunActivityContainer = UIView()
     private let sunActivityStartLabel = UILabel()
     private let sunActivityEndLabel = UILabel()
     private let maxUvLabel = UILabel()
-    private var dashLinePoints:[CGPoint] {
-        let earthImageViewInset:CGFloat = 16
-        let sideInset:CGFloat = 18
-        let topInset = earthImageView.frame.origin.y - earthImageViewInset
-        
-        let a: CGFloat = (infographicContainer.frame.width / 2) - sideInset
-        let b: CGFloat = earthImageView.frame.height + earthImageViewInset
-        
-        var points = [CGPoint]()
-        let tValues = stride(from: -.pi, to: 0, by: 0.02).map{$0}
-        
-        for t in tValues{
-            let x = a * cos(CGFloat(t)) + a + sideInset
-            let y = b * sin(CGFloat(t)) + b + topInset
-            points.append(CGPoint(x: x, y: y))
-        }
-        
-        return points
-    }
     
     //Computed
-    private var dashLinePath:CGPath?
+    private var dashLinePath = UIBezierPath()
+    private var earthCircleSegment:CircleSegment {
+        return .init(chord: earthImageView.frame.width,
+                     height: earthImageView.frame.height)
+    }
+    private var dashCircleSegment:CircleSegment {
+        let kSideInset:CGFloat = 17
+        let earthCircleSegment = self.earthCircleSegment
+        return CircleSegment(chord: earthCircleSegment.chord + kSideInset * 2,
+                             height: earthCircleSegment.height + kDashLineTopInset)
+        
+    }
     
     override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
         super.init(style: style, reuseIdentifier: reuseIdentifier)
@@ -66,29 +82,30 @@ class CitySunCell: UITableViewCell {
     }
     
     private func drawDashLine() {
-        let dashPath =  UIBezierPath()
-
-        for index in 0..<dashLinePoints.count {
-            if index == 0 {
-                dashPath.move(to: dashLinePoints[index])
-                continue
-            }
-            
-            dashPath.addLine(to: dashLinePoints[index])
-        }
-
-        infographicDashLine.path = dashPath.cgPath
+        let segment = dashCircleSegment
+        let start = -(.pi - segment.alpha)
+        let end = -segment.alpha
+        let percent = (start - end) * 0.4
+        dashLinePath =  UIBezierPath(arcCenter: .init(x: infographicContainer.frame.width / 2,
+                                                      y: earthImageView.frame.origin.y + segment.radius - kDashLineTopInset),
+                                     radius: segment.radius,
+                                     startAngle: start,
+                                     endAngle: start - percent,
+                                     clockwise: true)
+        infographicDashLine.path = dashLinePath.cgPath
     }
     
-    private func updateSunPosition() {
-        sunImageView.frame.origin = .init(x: 36 - sunImageView.frame.width/2,
-                                          y: infographicContainer.frame.height - sunImageView.frame.height)
+    public func updateSunPosition() {
+        sunImageView.layer.removeAllAnimations()
+        sunImageView.frame.origin = .init(x: 20 - sunImageView.frame.width / 2,
+                                          y: infographicContainer.frame.height - sunImageView.frame.height / 2)
         
         let animation = CAKeyframeAnimation(keyPath: "position")
-        animation.path = self.dashLinePath
+        animation.path = self.dashLinePath.cgPath
         animation.calculationMode = .paced
-        animation.duration = 5
+        animation.duration = 2
         animation.rotationMode = .rotateAuto
+        animation.isRemovedOnCompletion = true
         sunImageView.layer.add(animation, forKey: nil)
     }
     
@@ -159,9 +176,8 @@ private extension CitySunCell {
         infographicContainer.addSubview(earthImageView)
         
         earthImageView.snp.makeConstraints { (make) in
-            make.left.right.equalToSuperview().inset(18)
+            make.left.right.equalToSuperview().inset(37)
             make.bottom.equalToSuperview()
-            make.height.greaterThanOrEqualTo(100).priority(.low)
         }
         
         //Dash line
@@ -173,9 +189,6 @@ private extension CitySunCell {
         
         //Sun
         sunImageView.frame = .init(origin: .zero, size: CGSize(width: 28, height: 28))
-        if let path = dashLinePath {
-            sunImageView.center = path.currentPoint
-        }
         sunImageView.contentMode = .scaleAspectFit
         infographicContainer.addSubview(sunImageView)
     }

1Weather/UI/View controllers/Today/TodayViewController.swift

@@ -130,7 +130,7 @@ extension TodayViewController: UITableViewDelegate {
         }
         
         if let sunCell = cell as? CitySunCell {
-            
+            sunCell.updateSunPosition()
         }
     }
 }