今天學(xué)學(xué)習(xí)了一個(gè)動(dòng)畫的實(shí)現(xiàn)效果毁靶，并在下方做簡(jiǎn)要的分析惠昔。
項(xiàng)目地址
這是一個(gè)通過GradientLayer的animation來實(shí)現(xiàn)的動(dòng)畫效果。值得一提的是疗琉，它有如下的優(yōu)點(diǎn)业栅。
1.便捷的調(diào)用過程
2.只在view的子view輪廓內(nèi)顯示動(dòng)畫的效果秒咐。
項(xiàng)目的主要文件構(gòu)成
ListLoader.swift
調(diào)用的主體
調(diào)用的主體也就是效果的載體，主要可以在UIView碘裕、 UITableView携取、 UICollectionView等進(jìn)行動(dòng)畫效果。
其中動(dòng)畫實(shí)現(xiàn)的主體分別是UIView的整個(gè)view帮孔， UITableView以及UICollectionView的cellView
調(diào)用方式
//顯示
loaderView.showLoader()
tableView.showLoader()
collection.showLoader()
//隱藏
loaderView.hideLoader()
tableView.hideLoader()
collection.hideLoader()
源碼剖析
簡(jiǎn)要介紹
ListLoader類的主要職能是將加載效果綁定到目標(biāo)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())
}
}
實(shí)現(xiàn)具體的動(dòng)畫效果如要分為如下兩個(gè)部分
1.CAGradientLayer
2.CutoutView
其中CGGradientLayer主要用于負(fù)責(zé)整個(gè)View的陰影動(dòng)效，形成一個(gè)從左至右的一個(gè)動(dòng)畫效果
CutOutView是一個(gè)放置與contentView的遮罩。 它實(shí)現(xiàn)了一下一個(gè)功能晤斩。
1.把它處于同一個(gè)superview下的view輪廓進(jìn)行賦值焕檬，并在自身形成對(duì)應(yīng)的透明輪廓，UIColor.clear
2.其余空白部分則全部使用白色背景澳泵。
最終的效果是揩页，下方的陰影動(dòng)畫可以通過這些透明的輪廓進(jìn)行顯示，而其余的白色部分則被遮擋烹俗，形成了 加載中 這樣的動(dòng)畫效果。
具體實(shí)現(xiàn)
CGGradientLayer實(shí)現(xiàn)的動(dòng)畫效果
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 實(shí)現(xiàn)輪廓復(fù)制并進(jìn)行設(shè)定的過程
let context = UIGraphicsGetCurrentContext()
context?.setFillColor(UIColor.white.cgColor) //設(shè)置整體顏色為白色
context?.fill(self.bounds) //填充區(qū)域?yàn)閎ounds萍程。整個(gè)頁(yè)面
for view in (self.superview?.subviews)! {
if view != self { //對(duì)于所有需要復(fù)制輪廓的view
context?.setBlendMode(.clear);
let rect = view.frame
let clipPath: CGPath = UIBezierPath(roundedRect: rect, cornerRadius: view.layer.cornerRadius).cgPath //復(fù)制輪廓
context?.addPath(clipPath)
context?.setFillColor(UIColor.clear.cgColor)
context?.closePath()
context?.fillPath() //填充輪廓內(nèi)部為透明色幢妄。
}
}
疑問
對(duì)于 子view完整填充 父view，相關(guān)代碼
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)
