Created
          October 23, 2018 23:04 
        
      - 
      
 - 
        
Save Wilsonilo/c9384bcf1a5f1f733a55dcdb96121eb5 to your computer and use it in GitHub Desktop.  
    Loader Animation With CAShapeLayer and CABasicAnimation
  
        
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | // | |
| // LoaderUIView.swift | |
| // | |
| // Created by Wilson Munoz on 10/23/18. | |
| // @yosoywil | |
| // Based on documentation from: | |
| // https://www.youtube.com/watch?v=O3ltwjDJaMk | |
| // https://www.raywenderlich.com/449-how-to-implement-a-circular-image-loader-animation-with-cashapelayer | |
| import UIKit | |
| class LoaderUIView: UIView { | |
| let circlePathLayer = CAShapeLayer() | |
| let circleRadius: CGFloat = 20.0 | |
| override init(frame: CGRect) { | |
| super.init(frame: frame) | |
| configure() | |
| } | |
| required init?(coder aDecoder: NSCoder) { | |
| super.init(coder: aDecoder) | |
| configure() | |
| } | |
| func circleFrame() -> CGRect { | |
| var circleFrame = CGRect(x: 0, y: 0, width: 2 * circleRadius, height: 2 * circleRadius) | |
| let circlePathBounds = circlePathLayer.bounds | |
| circleFrame.origin.x = circlePathBounds.midX - circleFrame.midX | |
| circleFrame.origin.y = circlePathBounds.midY - circleFrame.midY | |
| return circleFrame | |
| } | |
| func circlePath() -> UIBezierPath { | |
| return UIBezierPath(ovalIn: circleFrame()) | |
| } | |
| func configure(){ | |
| let center = CGPoint(x: self.bounds.midX, y: self.bounds.midY) | |
| let circulalPath = UIBezierPath(arcCenter: center, radius: circleRadius, | |
| startAngle: -.pi / 2, | |
| endAngle: 2 * .pi, clockwise: true) | |
| circlePathLayer.path = circulalPath.cgPath //You can also use circlePath().cgPath, but i couldn't find a way to change the startAngle without a new init. | |
| circlePathLayer.frame = bounds | |
| circlePathLayer.strokeColor = UIColor.midnightBlue()?.cgColor | |
| circlePathLayer.lineWidth = 3 | |
| circlePathLayer.fillColor = UIColor.clear.cgColor | |
| circlePathLayer.strokeEnd = 0 | |
| circlePathLayer.lineCap = kCALineCapRound | |
| let basicAnimation = CABasicAnimation(keyPath: "strokeEnd") | |
| basicAnimation.toValue = 1 | |
| basicAnimation.duration = 1.2 | |
| basicAnimation.fillMode = kCAFillModeForwards | |
| basicAnimation.isRemovedOnCompletion = false | |
| basicAnimation.repeatCount = .infinity | |
| circlePathLayer.add(basicAnimation, forKey: "loadingBasicaAnimation") | |
| self.layer.addSublayer(circlePathLayer) | |
| } | |
| } | 
  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment