Nsryjdtyk

I'm trying to achieve an animation very similar to the android's native circle spinning in my xcode project

I found a class that achieves something very similar to this

import UIKit



@IBDesignable

class SpinnerView : UIView {



    override var layer: CAShapeLayer {

        get {

            return super.layer as! CAShapeLayer

        }

    }



    override class var layerClass: AnyClass {

        return CAShapeLayer.self

    }



    override func layoutSubviews() {

        super.layoutSubviews()

        layer.fillColor = nil

        layer.strokeColor = UIColor.black.cgColor

        layer.lineWidth = 3

        setPath()

    }



    override func didMoveToWindow() {

        animate()

    }



    private func setPath() {

        layer.path = UIBezierPath(ovalIn: bounds.insetBy(dx: layer.lineWidth / 2, dy: layer.lineWidth / 2)).cgPath

    }



    struct Pose {

        let secondsSincePriorPose: CFTimeInterval

        let start: CGFloat

        let length: CGFloat

        init(_ secondsSincePriorPose: CFTimeInterval, _ start: CGFloat, _ length: CGFloat) {

            self.secondsSincePriorPose = secondsSincePriorPose

            self.start = start

            self.length = length

        }

    }



    class var poses: [Pose] {

        get {

            return [

                Pose(0.0, 0.000, 0.7),

                Pose(0.6, 0.500, 0.5),

                Pose(0.6, 1.000, 0.3),

                Pose(0.6, 1.500, 0.1),

                Pose(0.2, 1.875, 0.1),

                Pose(0.2, 2.250, 0.3),

                Pose(0.2, 2.625, 0.5),

                Pose(0.2, 3.000, 0.7),

            ]

        }

    }



    func animate() {

        var time: CFTimeInterval = 0

        var times = [CFTimeInterval]()

        var start: CGFloat = 0

        var rotations = [CGFloat]()

        var strokeEnds = [CGFloat]()



        let poses = type(of: self).poses

        let totalSeconds = poses.reduce(0) { $0 + $1.secondsSincePriorPose }



        for pose in poses {

            time += pose.secondsSincePriorPose

            times.append(time / totalSeconds)

            start = pose.start

            rotations.append(start * 2 * .pi)

            strokeEnds.append(pose.length)

        }



        times.append(times.last!)

        rotations.append(rotations[0])

        strokeEnds.append(strokeEnds[0])



        animateKeyPath(keyPath: "strokeEnd", duration: totalSeconds, times: times, values: strokeEnds)

        animateKeyPath(keyPath: "transform.rotation", duration: totalSeconds, times: times, values: rotations)



        animateStrokeHueWithDuration(duration: totalSeconds * 5)

    }



    func animateKeyPath(keyPath: String, duration: CFTimeInterval, times: [CFTimeInterval], values: [CGFloat]) {

        let animation = CAKeyframeAnimation(keyPath: keyPath)

        animation.keyTimes = times as [NSNumber]?

        animation.values = values

//        animation.calculationMode = .linear

        animation.duration = duration

        animation.repeatCount = Float.infinity

        layer.add(animation, forKey: animation.keyPath)

    }



    func animateStrokeHueWithDuration(duration: CFTimeInterval) {

        let count = 36

        let animation = CAKeyframeAnimation(keyPath: "strokeColor")

        animation.keyTimes = (0 ... count).map { NSNumber(value: CFTimeInterval($0) / CFTimeInterval(count)) }

        animation.values = (0 ... count).map {

            UIColor(hue: CGFloat($0) / CGFloat(count), saturation: 1, brightness: 1, alpha: 1).cgColor

        }

        animation.duration = duration

//        animation.calculationMode = .linear

        animation.repeatCount = Float.infinity

        layer.add(animation, forKey: animation.keyPath)

    }



}

My question is how do i actually use that animation to show it in the view controller ?
Maybe even direct me to somewhere to research

In regards to using this exact class you would do this in your view controller class

class MyViewController: UIViewController

{

    override func viewDidLoad()

    {

        showSpinnerView()

    }



    func showSpinnerView()

    {

        let spinnerView = SpinnerView(frame: CGRect(x: 0, y: 0, width:100, height: 100))

        self.view.addSubView(view: spinnerView)

    }

}

this will add the spinner view to the ViewControllers view. The CGRect you create when initialising SpinnerView will have to be the rect of where you want the thing to be but this is how to create and add it to your view

In this example as soon as the view loads it calls show spinner view but I assume you trigger some event that requires a loading type animation, in this case your spinner so just call show spinner view there.

Alternatively you can add it to your view controllers view in the view did load and set spinnerView.isHidden = true and then when the event happens that you want to a show progress spinner for just set spinnerView.isHidden = false (obviously in this case spinnerView would have to be a member variable so that you are able to access its properties from other functions