iOS Swift 简单实现Loading动画

最近突然对动画特别感兴趣,尤其是最常见的加载动画,百度了一圈发现全是OC代码,这让我这个习惯写swift的假iOS开发很是郁闷。

在网上扒的过程中看到一个挺简单的一个加载动画,看了一下原作者的代码,学习了一下原作者的思想,也感谢那位坐着哈。。。

接下来看一下效果图

效果图

接下来给大家具体讲解一下实现的过程

其实整个动画就是一个画弧的过程,必须确定圆心、半径、弧的起始位置(敲黑板–重点),核心思想就是通过创建一个计时器来不停的改变弧的起始位置。

整个动画分两个部分(1、从无到有,2、从有到无)
不多哔哔,看过程了

创建swift文件:
创建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

有问题欢迎交流哈

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值