快速动画:圆形虚线加载栏?

Posted

技术标签:

【中文标题】快速动画:圆形虚线加载栏?【英文标题】:Animation in swift : Circular Dashed Loading Bar? 【发布时间】:2017-05-26 05:22:50 【问题描述】:

我已经在网上浏览了 2 到 3 个小时,遗憾的是找不到任何东西,(第二个问题:对 swift 不熟悉 -> 这可以忽略)

基本上我需要圆形虚线加载条:每个点都应该像圆形负载一样单独动画..

我能够制作一个圆形虚线圆圈,但无法为其设置动画...

任何帮助都将不胜感激,即使那是来自 github 的库或任何东西..

这是我创建圆形虚线圆的代码..

import UIKit

class ViewController: UIViewController 
    override func viewDidLoad() 
        super.viewDidLoad()
    

override func viewWillAppear(_ animated: Bool) 
    super.viewWillAppear(true)
    let circlePath = UIBezierPath(arcCenter: CGPoint(x: 100,y: 100), radius: 100.0, startAngle: 0.0, endAngle:CGFloat(M_PI * 2), clockwise: true)
    let shapeLayer = CAShapeLayer()
    shapeLayer.path = circlePath.cgPath
    shapeLayer.position = CGPoint(x: 100, y: 100)
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.strokeColor = UIColor.blue.cgColor
    shapeLayer.lineWidth = 6.0
    let one : NSNumber = 1
    let two : NSNumber = 13
    shapeLayer.lineDashPattern = [one,two]
    shapeLayer.lineCap = kCALineCapRound
    view.layer.addSublayer(shapeLayer)


override func didReceiveMemoryWarning()  super.didReceiveMemoryWarning()

这就是我想要的(下一个):

【问题讨论】:

【参考方案1】:

我一直在玩自定义活动指示器,所以这是一种方法

import UIKit

@IBDesignable class ActivityIndicatorCircle: UIView 
    var  timerInterval: Double   = 0.1
    var timer : Timer?
    var endAngle: CGFloat   = 0.0
    var angleStep           = CGFloat.pi / 20.0
    var angleOffset         = -CGFloat.pi / 2.0

    var shapeLayer = CAShapeLayer()

    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
    

    override init(frame: CGRect) 
        super.init(frame: frame)
    

    func startAnimating() 
        superview?.bringSubview(toFront: self)

        layer.cornerRadius = frame.width / 2
        self.clipsToBounds = true

        isHidden = false
        timer?.invalidate()
        timer = nil

        timer = Timer.scheduledTimer(timeInterval: timerInterval,
                                 target: self,
                                 selector: #selector(self.updateCircle),
                                 userInfo: nil,
                                 repeats: true)
    

    func stopAnimating() 
        isHidden = true
        timer?.invalidate()
        timer = nil
    

    func updateCircle() 
        endAngle += angleStep
        if endAngle > CGFloat.pi * 2.0 
            endAngle -= CGFloat.pi * 2.0
        
        DispatchQueue.main.async 
            self.shapeLayer.removeFromSuperlayer() // remove the previous version

            let lineWidth: CGFloat = 6.0
            let radius = self.frame.size.width / 2.0 // if the view is square, this gives us center as well

            let circlePath = UIBezierPath(arcCenter: CGPoint(x: radius,y: radius), radius: radius - lineWidth, startAngle: self.angleOffset, endAngle: self.endAngle + self.angleOffset, clockwise: true)

            self.shapeLayer.path = circlePath.cgPath
            self.shapeLayer.position = CGPoint(x: 0, y: 0)
            self.shapeLayer.fillColor = UIColor.clear.cgColor
            self.shapeLayer.strokeColor = UIColor.blue.cgColor
            self.shapeLayer.lineWidth = lineWidth
            let one : NSNumber = 1
            let two : NSNumber = 13
            self.shapeLayer.lineDashPattern = [one,two]
            self.shapeLayer.lineCap = kCALineCapRound
            self.layer.addSublayer(self.shapeLayer)
        
    

要使用它,请在情节提要中添加一个 UIView,并将类设置为 ActivityIndicatorCircle

要启动它,请致电activityIndicatorCircle.startAnimating()

【讨论】:

嘿罗素谢谢你的回答,伙计!你能提供更多关于这方面的信息吗?我的意思是它不起作用,不管你说什么,我都这么做了。我在 Viewcontroller.swift 的 viewDidAppear 中为 ActivityIndi​​catorCircle 创建了一个对象,并且在 storyBoard 中已将该类分配给该视图..仍然没有工作。 我为您创建了一个示例项目github.com/CarterMiller/ActivityIndicatorCircle。因为我的圆形指示器是基于我已经完成的,所以你可以看到我在同一个项目中是如何做其他的 :-) 哇!谢谢Mr.russell .. 它解决了问题.. 非常感谢。只是因为你们,存在诸如 *** 之类的社区.. 继续努力 =D =) 罗素先生您好,【参考方案2】:

对于循环加载器,您可以使用这个库,它将为您提供帮助。 https://github.com/naoyashiga/RPLoadingAnimation

【讨论】:

感谢您回复超快的兄弟。根据我的要求,您的答案不起作用.._/_

以上是关于快速动画:圆形虚线加载栏?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用shape来画半圆和画虚线

坚持用虚线创建圆形视图,但有多种颜色

HTML5 动画虚线

使用 java.awt.BasicStroke 动画虚线

绘制 svg 虚线的动画

iOS 动画虚线矩形边框