最近突然對動畫特別感興趣，尤其是最常見的載入動畫，百度了一圈發現全是OC程式碼，這讓我這個習慣寫swift的假iOS開發很是鬱悶。

在網上扒的過程中看到一個挺簡單的一個載入動畫，看了一下原作者的程式碼，學習了一下原作者的思想，也感謝那位坐著哈。。。

接下來看一下效果圖

接下來給大傢俱體講解一下實現的過程

其實整個動畫就是一個畫弧的過程，必須確定圓心、半徑、弧的起始位置（敲黑板–重點），核心思想就是通過建立一個計時器來不停的改變弧的起始位置。

整個動畫分兩個部分（1、從無到有，2、從有到無）
不多嗶嗶，看過程了

建立swift檔案：

命名為LoadingView，繼承與UIView。
引入UIKit庫

import UIKit

直接看程式碼

import UIKit
import Foundation

class LoadingView: UIView {

    public var lineWidth: Int = 2  //線的寬度  預設為2

    public var lineColor: UIColor = UIColor.red //線的顏色  預設是紅色

    fileprivate var timer: Timer?

    fileprivate var originStart: CGFloat = CGFloat(Double.pi / 2 * 3)  //開始位置
 


    fileprivate var originEnd: CGFloat = CGFloat(Double.pi / 2 * 3 )   //結束位置  都是頂部

    fileprivate var isDraw: Bool = true

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.layer.cornerRadius = 10 //圓角  純屬好看
        self.layer.masksToBounds = true
        self.timer = Timer.scheduledTimer
 
(timeInterval: 0.1, target: self, selector: #selector(LoadingView.updateLoading), userInfo: nil, repeats: true)  //建立計時器
        RunLoop.main.add(self.timer!, forMode: RunLoopMode.defaultRunLoopMode)//計時器需要加入到RunLoop中：RunLoop的目的是讓你的執行緒在有工作的時候忙碌，沒有工作的時候休眠
        self.timer?.fire()

    }

    @objc func updateLoading () {
        if (self.originEnd == CGFloat(Double.pi / 2 * 3) && isDraw) {//從無到有的過程
            self.originStart += CGFloat(Double.pi / 10)
            if (self.originStart == CGFloat(Double.pi / 2 * 3 + 2 * Double.pi)) {
                self.isDraw = false
                self.setNeedsDisplay() //呼叫 draw(_ rect: CGRect) 方法
                return
            }
        }

        if (self.originStart == CGFloat(Double.pi / 2 * 3 + 2 * Double.pi) && !self.isDraw) { //從有到無
            self.originEnd += CGFloat(Double.pi / 10)
            if (self.originEnd == CGFloat(Double.pi / 2 * 3 + 2 * Double.pi)) {
                self.isDraw = true
                self.originStart = CGFloat(Double.pi / 2 * 3)
                self.originEnd = CGFloat(Double.pi / 2 * 3)
                self.setNeedsDisplay() //呼叫 draw(_ rect: CGRect) 方法
                return
            }
        }
        self.setNeedsDisplay() //呼叫 draw(_ rect: CGRect) 方法
    }

    override func draw(_ rect: CGRect) {
        let context = UIGraphicsGetCurrentContext() //獲取上下文
        let center: CGPoint = CGPoint(x: self.frame.size.width / 2, y: self.frame.size.height / 2) // 確定圓心
        let radius = min(self.frame.size.width, self.frame.size.height) / 2 - CGFloat(self.lineWidth) - 20; //半徑
        let path: UIBezierPath = UIBezierPath.init(arcCenter: center, radius: radius, startAngle: self.originStart, endAngle: self.originEnd, clockwise: false) //弧的路徑
        context?.addPath(path.cgPath) //將路徑、寬度、顏色新增到上下文
        context?.setLineWidth(CGFloat(self.lineWidth)) //
        context?.setStrokeColor(self.lineColor.cgColor) //
        context?.strokePath() //顯示弧
    }


    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

頁面中呼叫

let loadingView: LoadingView = LoadingView(frame: CGRect(x: self.view.frame.size.width/2-50, y: self.view.frame.size.height/2-50, width: 100, height: 100))

loadingView.backgroundColor = UIColor(displayP3Red: 230/255.0, green: 230/255.0, blue: 230/255.0, alpha: 0.3)

self.view.addSubview(loadingView)

最後還是老規矩留下Git地址：GitHub

有問題歡迎交流哈