今天学学习了一个动画的实现效果，并在下方做简要的分析。
项目地址
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)
