MG--Swift遮照HUD 2
比如网络请求IO读写操作这个操作往往比较耗时这个时候我们往往不需要用户操作这个时候我们就应该提供一个蒙版遮照来防止用户操作就需要用到下面的方法了下面是写的蒙版提示界面我们一般每写的一个界面度会涉及到网络APi请求所以需要HUD
2种遮照效果
image
image
代码实现如下
//
// 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()
}
