iOS开源控件ListPlaceholder浅析

今天学学习了一个动画的实现效果，并在下方做简要的分析。
项目地址

demo.gif

这是一个通过GradientLayer的animation来实现的动画效果。值得一提的是，它有如下的优点。
1.便捷的调用过程
2.只在view的子view轮廓内显示动画的效果。

项目的主要文件构成
ListLoader.swift

调用的主体

调用的主体也就是效果的载体，主要可以在UIView、 UITableView、 UICollectionView等进行动画效果。
其中动画实现的主体分别是UIView的整个view， UITableView以及UICollectionView的cellView

调用方式

//显示
loaderView.showLoader()
tableView.showLoader()
collection.showLoader()

//隐藏
loaderView.hideLoader()
tableView.hideLoader()
collection.hideLoader()

源码剖析

简要介绍

ListLoader类的主要职能是将加载效果绑定到目标view，或者views上面

@objc open class ListLoader: NSObject
{
    static func addLoaderToViews(_ views : [UIView])
    {
        CATransaction.begin()
        views.forEach { $0.ld_addLoader() }
        CATransaction.commit()
    }
    
    static func removeLoaderFromViews(_ views: [UIView])
    {
        CATransaction.begin()
        views.forEach { $0.ld_removeLoader() }
        CATransaction.commit()
    }
    
    open static func addLoaderTo(_ list : ListLoadable )
    {
        self.addLoaderToViews(list.ld_visibleContentViews())
    }
    
    
    open static func removeLoaderFrom(_ list : ListLoadable )
    {
        self.removeLoaderFromViews(list.ld_visibleContentViews())
    }
}

实现具体的动画效果如要分为如下两个部分
1.CAGradientLayer
2.CutoutView

其中CGGradientLayer主要用于负责整个View的阴影动效，形成一个从左至右的一个动画效果

CutOutView是一个放置与contentView的遮罩。 它实现了一下一个功能。
1.把它处于同一个superview下的view轮廓进行赋值，并在自身形成对应的透明轮廓，UIColor.clear
2.其余空白部分则全部使用白色背景。
最终的效果是，下方的阴影动画可以通过这些透明的轮廓进行显示，而其余的白色部分则被遮挡，形成了 加载中 这样的动画效果。

具体实现

CGGradientLayer实现的动画效果

gradient.startPoint = CGPoint(x: -1.0 + CGFloat(gradientWidth), y: 0)
        gradient.endPoint = CGPoint(x: 1.0 + CGFloat(gradientWidth), y: 0)
        
        gradient.colors = [
            UIColor.backgroundFadedGrey().cgColor,
            UIColor.gradientFirstStop().cgColor,
            UIColor.gradientSecondStop().cgColor,
            UIColor.gradientFirstStop().cgColor,
            UIColor.backgroundFadedGrey().cgColor
        ]
        
        let startLocations = [NSNumber(value: gradient.startPoint.x.doubleValue() as Double),NSNumber(value: gradient.startPoint.x.doubleValue() as Double),NSNumber(value: 0 as Double),NSNumber(value: gradientWidth as Double),NSNumber(value: 1 + gradientWidth as Double)]
        gradient.locations = startLocations
        let gradientAnimation = CABasicAnimation(keyPath: "locations")
        gradientAnimation.fromValue = startLocations
        gradientAnimation.toValue = [NSNumber(value: 0 as Double),NSNumber(value: 1 as Double),NSNumber(value: 1 as Double),NSNumber(value: 1 + (gradientWidth - gradientFirstStop) as Double),NSNumber(value: 1 + gradientWidth as Double)]    
        gradientAnimation.repeatCount = Float.infinity
        gradientAnimation.fillMode = kCAFillModeForwards
        gradientAnimation.isRemovedOnCompletion = false
        gradientAnimation.duration = loaderDuration
        gradient.add(gradientAnimation ,forKey:"locations")

CutOutView 实现轮廓复制并进行设定的过程

  let context = UIGraphicsGetCurrentContext()
        context?.setFillColor(UIColor.white.cgColor) //设置整体颜色为白色
        context?.fill(self.bounds) //填充区域为bounds。整个页面
        
        for view in (self.superview?.subviews)! {
            
            if view != self { //对于所有需要复制轮廓的view
                context?.setBlendMode(.clear);
                let rect = view.frame
                let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: view.layer.cornerRadius).cgPath //复制轮廓
                context?.addPath(clipPath)
                context?.setFillColor(UIColor.clear.cgColor)
                context?.closePath()
                context?.fillPath() //填充轮廓内部为透明色。
            }
        }

疑问

对于 子view完整填充 父view，相关代码

  func boundInside(_ superView: UIView){
        
        self.translatesAutoresizingMaskIntoConstraints = false
        superView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[subview]-0-|", options: NSLayoutFormatOptions(), metrics:nil, views:["subview":self]))
        superView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[subview]-0-|", options: NSLayoutFormatOptions(), metrics:nil, views:["subview":self]))
    }

直接使用(如下方法有何问题)?

subview.frame = superView.bounds
superView.addSubview(subView)