如何在没有SKShapeNode的情况下实现循环加载器

时间:2021-04-13 14:29:54

I want to creat a simple circular loader animation circle and border around it which is disappearing

我想创建一个简单的圆形装载机动画圆圈和它周围的边框消失

I found great frameworks but they use SKShapeNode and SKShapeNode performance is terrible for actual deployed app

我找到了很棒的框架,但他们使用SKShapeNode和SKShapeNode性能对于实际部署的应用程序来说非常糟糕

ProgressNode: Very cool framework

ProgressNode:非常酷的框架

1 个解决方案

#1


0  

You could use a UIView within a UIImageView with a "loading circle" as image and just let rotate it. Here is a example class:

您可以在UIImageView中使用UIView,并将“加载圆圈”作为图像,然后旋转它。这是一个示例类:

import UIKit

class CircularLoadingView: UIView {

    @IBOutlet weak var rotatingImage: UIImageView!
    let duration: Double = 1

    func startAnimation() {
        let animation = CABasicAnimation(keyPath: "transform.rotation.z")
        animation.toValue = NSNumber(floatLiteral:  M_PI * 2.0 * duration)
        animation.duration = duration
        animation.isCumulative = true
        animation.repeatCount = Float(CGFloat.greatestFiniteMagnitude)
        rotatingImage.layer.add(animation, forKey: "animationKey")

        UIView.animate(withDuration: duration, animations: {
            self.alpha = 1
        })
    }
}

Just add a UIView and set CircularLoadingView as custom class. Add a UIImageView, set the image you want to rotate, set the outlets and constraints and see what happens.

只需添加一个UIView并将CircularLoadingView设置为自定义类。添加UIImageView,设置要旋转的图像,设置出口和约束,看看会发生什么。

But with this attempt you need an image, which you have to create or to find.

但是通过这种尝试,您需要一个您必须创建或查找的图像。

If this does not help you, perhaps this old raywenderlich tutorial can. There they show how to make a circular indicator with CAShapeLayer.

如果这对你没有帮助,也许这个老的raywenderlich教程可以。在那里,他们展示了如何使用CAShapeLayer制作圆形指示器。

#1


0  

You could use a UIView within a UIImageView with a "loading circle" as image and just let rotate it. Here is a example class:

您可以在UIImageView中使用UIView,并将“加载圆圈”作为图像,然后旋转它。这是一个示例类:

import UIKit

class CircularLoadingView: UIView {

    @IBOutlet weak var rotatingImage: UIImageView!
    let duration: Double = 1

    func startAnimation() {
        let animation = CABasicAnimation(keyPath: "transform.rotation.z")
        animation.toValue = NSNumber(floatLiteral:  M_PI * 2.0 * duration)
        animation.duration = duration
        animation.isCumulative = true
        animation.repeatCount = Float(CGFloat.greatestFiniteMagnitude)
        rotatingImage.layer.add(animation, forKey: "animationKey")

        UIView.animate(withDuration: duration, animations: {
            self.alpha = 1
        })
    }
}

Just add a UIView and set CircularLoadingView as custom class. Add a UIImageView, set the image you want to rotate, set the outlets and constraints and see what happens.

只需添加一个UIView并将CircularLoadingView设置为自定义类。添加UIImageView,设置要旋转的图像,设置出口和约束,看看会发生什么。

But with this attempt you need an image, which you have to create or to find.

但是通过这种尝试,您需要一个您必须创建或查找的图像。

If this does not help you, perhaps this old raywenderlich tutorial can. There they show how to make a circular indicator with CAShapeLayer.

如果这对你没有帮助,也许这个老的raywenderlich教程可以。在那里,他们展示了如何使用CAShapeLayer制作圆形指示器。