为了账号安全,请及时绑定邮箱和手机立即绑定

MG--Swift遮照HUD 2

标签:
Swift

比如网络请求IO读写操作这个操作往往比较耗时这个时候我们往往不需要用户操作这个时候我们就应该提供一个蒙版遮照来防止用户操作就需要用到下面的方法了下面是写的蒙版提示界面我们一般每写的一个界面度会涉及到网络APi请求所以需要HUD


2种遮照效果

circle.gif
图片描述


代码实现如下

//
//  MGSquaresAnimationView.swift
//  MGSDKDemo
//  Created by LYM-mg on 2021/1/27.
//  Copyright © 2021 LYM-mg. All rights reserved.
//

import UIKit

public enum MGSquaresAnimationViewType {
    case Square(animationLayerTintColor: UIColor, squareSize: CGFloat)
    case Circle(ballWidth: CGFloat)
}

public class MGSquaresAnimationView: UIView {
    convenience init(frame: CGRect = UIScreen.main.bounds, animationViewType: MGSquaresAnimationViewType = .Circle(ballWidth: 13)) {
        self.init(frame: frame)
        switch animationViewType {
            case .Circle(let ballWidth):
                self._ballWidth = ballWidth
                self.initBallView()
                break
            case .Square(let animationLayerTintColor, let squareSize):
                self.initSquareView()
                self.animationLayer.frame = self.bounds
                self.animationLayerTintColor = animationLayerTintColor
                self.squareSize = squareSize
                
                self.setupAnimation()
                
                let tintColorRef = animationLayerTintColor.cgColor
                animationLayer.backgroundColor = tintColorRef
                break
        }
        self.animationViewType = animationViewType
    }
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    deinit {
        print("\(self)--deinit")
    }
    
    // MARK: - Square
    fileprivate var animationLayer: CALayer = CALayer()
    fileprivate var isAnimating: Bool = false
    fileprivate var animationLayerTintColor: UIColor = .white {
        didSet {
            let tintColorRef = animationLayerTintColor.cgColor
            for subLayer in animationLayer.sublayers ?? [] {
                subLayer.backgroundColor = tintColorRef
                if subLayer is CAShapeLayer {

                    let shapeLayer = CAShapeLayer()
                    shapeLayer.strokeColor = tintColorRef
                    shapeLayer.fillColor = tintColorRef
                }
            }
        }
    }
    
    fileprivate var squareSize: CGFloat = 60 {
        didSet {
            self.setupAnimation()
        }
    }
    
    fileprivate var animationViewType: MGSquaresAnimationViewType = .Circle(ballWidth: 13)
    
    func initSquareView() {
//        isUserInteractionEnabled = false
        isHidden = false
        layer.addSublayer(animationLayer)
    }
    
    func startAnimating() {
        switch animationViewType {
            case .Circle(_):
                startPathAnimation()
                break
            case .Square(_ , _):
                if (animationLayer.sublayers != nil) {
                    setupAnimation()
                }
                isHidden = false
                animationLayer.speed = 1.0
                break
        }
       isAnimating = true
    }

    func stopAnimating() {
        switch animationViewType {
            case .Circle(_):
                 ball1.layer.removeAllAnimations()
                 ball1.removeFromSuperview()
                 ball2.layer.removeAllAnimations()
                 ball2.removeFromSuperview()
                 ball3.layer.removeAllAnimations()
                 ball3.removeFromSuperview()
            case .Square(animationLayerTintColor , squareSize):
                animationLayer.speed = 0.0
                isHidden = true
            default:
                break
        }
        isAnimating = false
    }
    
    func setupAnimation() {

        animationLayer.sublayers = nil

        setupAnimation(layer: animationLayer, with: CGSize(width: self.squareSize, height: self.squareSize), tintColor: self.animationLayerTintColor)
        animationLayer.speed = 0.0
    }
    
    func setupAnimation(layer: CALayer, with size: CGSize, tintColor: UIColor) {
        let beginTime = TimeInterval(CACurrentMediaTime())

        let squareSize = floor(size.width / 4.0)

        let oX: CGFloat = (layer.bounds.size.width - size.width) / 2.0
        let oY: CGFloat = (layer.bounds.size.height - size.height) / 2.0
        let colors = [
            UIColor(red: 0.880, green: 0.409, blue: 0.195, alpha: 1),
            UIColor(red: 0.137, green: 0.412, blue: 0.663, alpha: 1),
            UIColor(red: 0.810, green: 0.709, blue: 0.115, alpha: 1),
            UIColor(red: 0.537, green: 0.492, blue: 0.363, alpha: 1)
        ]
        
        for i in 0..<5 {
            let square = CALayer()
            square.frame = CGRect(x: oX, y: oY, width: squareSize, height: squareSize)
            square.anchorPoint = CGPoint(x: 0.5, y: 0.5)
            square.backgroundColor = colors[i].cgColor
            square.shouldRasterize = true
            square.rasterizationScale = UIScreen.main.scale

            let transformAnimation = createKeyframeAnimation(withKeyPath: "transform")
            transformAnimation.duration = 1.6
            transformAnimation.beginTime = beginTime - (Double(i) * (transformAnimation.duration) / 4.0)
            transformAnimation.repeatCount = MAXFLOAT

            transformAnimation.keyTimes = [NSNumber(value: 0.0), NSNumber(value: 0.25), NSNumber(value: 0.50), NSNumber(value: 0.75), NSNumber(value: 1.0)]
            
            transformAnimation.timingFunctions = [
                CAMediaTimingFunction(name: .easeInEaseOut),
                CAMediaTimingFunction(name: .easeInEaseOut),
                CAMediaTimingFunction(name: .easeInEaseOut),
                CAMediaTimingFunction(name: .easeInEaseOut),
                CAMediaTimingFunction(name: .easeInEaseOut)
            ]
            
            var t1 = CATransform3DMakeTranslation(size.width - squareSize, 0.0, 0.0)
            t1 = CATransform3DRotate(t1, degreesToRadians(-90.0), 0.0, 0.0, 1.0)
            t1 = CATransform3DScale(t1, 0.7, 0.7, 1.0)

            var t2 = CATransform3DMakeTranslation(size.width - squareSize, size.height - squareSize, 0.0)
            t2 = CATransform3DRotate(t2, degreesToRadians(-180.0), 0.0, 0.0, 1.0)
            t2 = CATransform3DScale(t2, 1.0, 1.0, 1.0)

            var t3 = CATransform3DMakeTranslation(0.0, size.height - squareSize, 0.0)
            t3 = CATransform3DRotate(t3, degreesToRadians(-270.0), 0.0, 0.0, 1.0)
            t3 = CATransform3DScale(t3, 0.7, 0.7, 1.0)

            var t4 = CATransform3DMakeTranslation(0.0, 0.0, 0.0)
            t4 = CATransform3DRotate(t4, degreesToRadians(-360.0), 0.0, 0.0, 1.0)
            t4 = CATransform3DScale(t4, 1.0, 1.0, 1.0)
            
            transformAnimation.values = [
                NSValue(caTransform3D: CATransform3DIdentity),
                NSValue(caTransform3D: t1),
                NSValue(caTransform3D: t2),
                NSValue(caTransform3D: t3),
                NSValue(caTransform3D: t4)
            ]

            layer.addSublayer(square)
            square.add(transformAnimation, forKey: "animation")
        }
    }
    
    private func degreesToRadians(_ degrees: Double) -> CGFloat {
        return CGFloat((degrees) / 180.0 * Double.pi)
    }
    
    private func createAnimationGroup() -> CAAnimationGroup {
        let animationGroup = CAAnimationGroup()
        animationGroup.isRemovedOnCompletion = false
        return animationGroup
    }
    
    private func createBasicAnimation(withKeyPath keyPath: String?) -> CABasicAnimation {
        let animation = CABasicAnimation(keyPath: keyPath)
        animation.isRemovedOnCompletion = false
        return animation
    }

    private func createKeyframeAnimation(withKeyPath keyPath: String?) -> CAKeyframeAnimation {
        let animation = CAKeyframeAnimation(keyPath: keyPath)
        animation.isRemovedOnCompletion = false
        return animation
    }
    
    
    // MARK: - Circle
    var ball1: UIView = UIView()
    var ball2: UIView = UIView()
    var ball3: UIView = UIView()
    var _ballWidth: CGFloat = 13
    var ballContainer: UIVisualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .light))
    
    func initBallView() {
        ballContainer.frame = CGRect(x: 0, y: 0, width: 120, height: 120)
        ballContainer.center = CGPoint(x: bounds.size.width / 2.0, y: bounds.size.height / 2.0)
        ballContainer.layer.cornerRadius = 10.0
        ballContainer.layer.masksToBounds = true
        ballContainer.backgroundColor = UIColor.clear
        addSubview(ballContainer)

        let margin: CGFloat = 3.0

        ball1 = UIView(frame: CGRect(x: 0, y: 0, width: _ballWidth, height: _ballWidth))
        ball1.center = CGPoint(x: _ballWidth / 2.0 + margin, y: ballContainer.bounds.size.height / 2.0)
        ball1.layer.cornerRadius = _ballWidth / 2.0
        ball1.backgroundColor = UIColor(red: 54 / 255.0, green: 136 / 255.0, blue: 250 / 255.0, alpha: 1)
        ballContainer.contentView.addSubview(ball1)
        
        ball2 = UIView(frame: CGRect(x: 0, y: 0, width: _ballWidth, height: _ballWidth))
        ball2.center = CGPoint(x: ballContainer.bounds.size.width / 2.0, y: ballContainer.bounds.size.height / 2.0)
        ball2.layer.cornerRadius = _ballWidth / 2.0
        ball2.backgroundColor = UIColor(red: 100 / 255.0, green: 100 / 255.0, blue: 100 / 255.0, alpha: 1)
        ballContainer.contentView.addSubview(ball2)

        ball3 = UIView(frame: CGRect(x: 0, y: 0, width: _ballWidth, height: _ballWidth))
        ball3.center = CGPoint(x: ballContainer.bounds.size.width - _ballWidth / 2.0 - margin, y: ballContainer.bounds.size.height / 2.0)
        ball3.layer.cornerRadius = _ballWidth / 2.0
        ball3.backgroundColor = UIColor(red: 234 / 255.0, green: 67 / 255.0, blue: 69 / 255.0, alpha: 1)
        ballContainer.contentView.addSubview(ball3)
    }
    
    func startPathAnimation() {
        let ballScale: CGFloat = 1.3
        //-------第一个球的动画
        let width = ballContainer.bounds.size.width
        //小圆半径
        let r: CGFloat = (ball1.bounds.size.width) * ballScale / 2.0
        //大圆半径
        let R = (width / 2 + r) / 2.0

        let path1 = UIBezierPath()
        path1.move(to: ball1.center)
        //画大圆
        path1.addArc(withCenter: CGPoint(x: R + r, y: width / 2), radius: R, startAngle: .pi, endAngle: .pi * 2, clockwise: false)
        //画小圆
        let path1_1 = UIBezierPath()
        path1_1.addArc(withCenter: CGPoint(x: width / 2, y: width / 2), radius: r * 2, startAngle: .pi * 2, endAngle: .pi, clockwise: false)
        path1.append(path1_1)
        //回到原处
        path1.addLine(to: ball1.center)
        //执行动画
        let positionAnimation = CAKeyframeAnimation(keyPath: "position")
        positionAnimation.path = path1.cgPath
        positionAnimation.isRemovedOnCompletion = false
        positionAnimation.repeatCount = MAXFLOAT
        positionAnimation.duration = 1.6
        positionAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        ball1.layer.add(positionAnimation, forKey: "animation1")
        
        
        //-------第三个球的动画
        let path3 = UIBezierPath()
        path3.move(to: ball3.center)
        //画大圆
        path3.addArc(withCenter: CGPoint(x: width - (R + r), y: width / 2), radius: R, startAngle: 2 * .pi, endAngle: .pi, clockwise: false)
        //画小圆
        let path3_1 = UIBezierPath()
        path3_1.addArc(withCenter: CGPoint(x: width / 2, y: width / 2), radius: r * 2, startAngle: .pi, endAngle: .pi * 2, clockwise: false)
        path3.append(path3_1)
        //回到原处
        path3.addLine(to: ball3.center)
        //执行动画
        let animation3 = CAKeyframeAnimation(keyPath: "position")
        animation3.path = path3.cgPath
        animation3.repeatCount = MAXFLOAT
        animation3.isRemovedOnCompletion = false
        animation3.duration = 1.6
        animation3.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        ball3.layer.add(animation3, forKey: "animation3")
        
        // 放大缩小动画
        let scaleAnimation = createBasicAnimation(withKeyPath: "transform.scale")
        scaleAnimation.fromValue = 1.0
        scaleAnimation.toValue = 1.3
        scaleAnimation.duration = 1.6/2
        scaleAnimation.isRemovedOnCompletion = false
        scaleAnimation.repeatCount = MAXFLOAT
        scaleAnimation.autoreverses = true
        scaleAnimation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
        ball1.layer.add(scaleAnimation, forKey: "scale")
        ball2.layer.add(scaleAnimation, forKey: "scale")
        ball3.layer.add(scaleAnimation, forKey: "scale")
    }
}

调用

let view = MGSquaresAnimationView(animationViewType: .Square(animationLayerTintColor: UIColor.red, squareSize: 60))
//        let view = MGSquaresAnimationView(animationViewType: .Circle(ballWidth: 30))
self.view.addSubview(view)
view.startAnimating()        
DispatchQueue.main.asyncAfter(deadline: .now() + 5) {
     view.stopAnimating()
     view.removeFromSuperview()
}
点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消