常用的一些頁面效果逸吵，做下記錄
1. 文字漸入漸出的效果
// 創(chuàng)建文本視圖
let label = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 150))
label.text = "這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n這是一段示例文字\n"
label.textColor = .black
label.numberOfLines = 0
label.font = UIFont.systemFont(ofSize: 16)
self.view.addSubview(label)
// 創(chuàng)建漸變蒙版圖層
let gradientMaskLayer = CAGradientLayer()
gradientMaskLayer.frame = label.bounds
// 設(shè)置漸變顏色，這里從透明到白色再到透明，實(shí)現(xiàn)上下漸變消失效果
gradientMaskLayer.colors = [UIColor.clear.cgColor, UIColor.white.cgColor, UIColor.white.cgColor, UIColor.clear.cgColor]
// 對(duì)應(yīng)顏色的位置分布，調(diào)整可改變漸變區(qū)域范圍
gradientMaskLayer.locations = [0.0, 0.3, 0.7, 1.0]
// 設(shè)置漸變方向?yàn)榇怪狈较颍◤纳系较拢?gradientMaskLayer.startPoint = CGPoint(x: 0.5, y: 0)
gradientMaskLayer.endPoint = CGPoint(x: 0.5, y: 1)
// 將漸變蒙版圖層應(yīng)用到文字視圖上
label.layer.mask = gradientMaskLayer
2. 靜態(tài)圖片作為背景的模糊效果
let context = CIContext(options: nil)
guard let image = try result.get().image.scaled(toHeight: screenHeight) else {return}
let ciImage = CIImage(cgImage: image.cgImage!)
let filter = CIFilter(name: "CIGaussianBlur")
filter?.setValue(ciImage, forKey: kCIInputImageKey)
filter?.setValue(75.0, forKey: kCIInputRadiusKey)
let result = filter?.value(forKey: kCIOutputImageKey) as! CIImage
let cgImage = context.createCGImage(result, from: result.extent)
let blurredImage = UIImage(cgImage: cgImage!)
// 將處理后的圖片設(shè)置為背景
imageView.image = blurredImage
3. 剪裁圖片的窗口
// 添加遮罩層
let maskLayer = CAShapeLayer()
let path = UIBezierPath(rect: view.bounds)
let cropPath = UIBezierPath(rect: .init(x: 0, y: 0, width: 100, height: 100))
path.append(cropPath.reversing())
maskLayer.path = path.cgPath
maskLayer.fillColor = UIColor(hex: 0x000000, alpha: 0.3).cgColor
self.view.layer.addSublayer(maskLayer)
4. 提取image的主要顏色
func dominantColor(from image: UIImage, darkenBy factor: CGFloat = 0.2) -> UIColor? {
// 縮小圖片尺寸以加快處理速度
let scaleFactor: CGFloat = 20.0
let thumbSize = CGSize(width: image.size.width / scaleFactor, height: image.size.height / scaleFactor)
// 創(chuàng)建上下文
guard let cgImage = image.cgImage,
let colorSpace = CGColorSpace(name: CGColorSpace.sRGB),
let context = CGContext(data: nil,
width: Int(thumbSize.width),
height: Int(thumbSize.height),
bitsPerComponent: 8,
bytesPerRow: Int(thumbSize.width) * 4,
space: colorSpace,
bitmapInfo: CGImageAlphaInfo.premultipliedLast.rawValue) else {
return nil
}
// 在上下文中繪制縮小后的圖像
context.draw(cgImage, in: CGRect(origin: .zero, size: thumbSize))
// 獲取像素?cái)?shù)據(jù)
guard let data = context.data else { return nil }
let pixelData = data.bindMemory(to: UInt8.self, capacity: Int(thumbSize.width * thumbSize.height * 4))
// 使用字典統(tǒng)計(jì)顏色出現(xiàn)頻率
var colorFrequency: [UIColor: Int] = [:]
for x in 0..<Int(thumbSize.width) {
for y in 0..<Int(thumbSize.height) {
let offset = 4 * (y * Int(thumbSize.width) + x)
let red = pixelData[offset]
let green = pixelData[offset + 1]
let blue = pixelData[offset + 2]
let alpha = pixelData[offset + 3]
// 過濾透明像素
guard alpha > 0 else { continue }
// 創(chuàng)建顏色對(duì)象
let color = UIColor(
red: CGFloat(red) / 255.0,
green: CGFloat(green) / 255.0,
blue: CGFloat(blue) / 255.0,
alpha: CGFloat(alpha) / 255.0
)
// 統(tǒng)計(jì)顏色頻率
colorFrequency[color, default: 0] += 1
}
}
// 找到出現(xiàn)次數(shù)最多的顏色
guard let dominantColor = colorFrequency.max(by: { $0.value < $1.value })?.key else { return nil }
// 調(diào)整顏色亮度
return darkenedColor(dominantColor, by: factor)
}
4.CA動(dòng)畫
let clockwiseFullRotation = CABasicAnimation(keyPath: "transform.rotation")
//clockwiseFullRotation.byValue = 0
clockwiseFullRotation.fromValue = 0
clockwiseFullRotation.toValue = Double.pi * 2 // 順時(shí)針一圈
clockwiseFullRotation.duration = 1.0 // 動(dòng)畫時(shí)長 1 秒
clockwiseFullRotation.repeatCount = 1 //重復(fù)次數(shù)
clockwiseFullRotation.beginTime = 0.0 //開始時(shí)間
clockwiseFullRotation.speed = 1.0 //動(dòng)畫速度
clockwiseFullRotation.autoreverses = false //自動(dòng)到放
clockwiseFullRotation.fillMode = .forwards //動(dòng)畫結(jié)束后的狀態(tài)
layer.add(clockwiseFullRotation, forKey: "rotationAnimation")
// 創(chuàng)建動(dòng)畫組
let animationGroup = CAAnimationGroup()
animationGroup.animations = [animation, animation1, animation2]
animationGroup.duration = 1.3 // 設(shè)置動(dòng)畫組的總持續(xù)時(shí)間
animationGroup.repeatCount = .infinity
animationGroup.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
layer.add(animationGroup, forKey: "scaleAnimation")
1.在 CABasicAnimation 中，動(dòng)畫的 keyPath 決定了它作用的屬性挺益，以下是常用的動(dòng)畫 keyPath，分為幾大類：
? position：改變圖層的中心點(diǎn)位置乘寒。
? position.x：僅改變水平位置望众。
? position.y：僅改變垂直位置。
? anchorPoint：改變圖層的錨點(diǎn)位置。
? opacity：改變圖層的不透明度烂翰，范圍是 0.0（完全透明）到 1.0（完全不透明）夯缺。
? transform.scale：整體縮放（x、y甘耿、z 方向同時(shí)縮放）踊兜。
? transform.scale.x：水平縮放。
? transform.scale.y：垂直縮放佳恬。
? transform.scale.z：深度縮放捏境。
? transform.rotation：繞 z 軸旋轉(zhuǎn)（單位是弧度）。
? transform.rotation.x：繞 x 軸旋轉(zhuǎn)毁葱。
? transform.rotation.y：繞 y 軸旋轉(zhuǎn)典蝌。
? transform.rotation.z：繞 z 軸旋轉(zhuǎn)。
? backgroundColor：背景顏色的變化头谜。
? borderColor：邊框顏色的變化骏掀。
? shadowColor：陰影顏色的變化。
? borderWidth：邊框?qū)挾鹊淖兓?? cornerRadius：圓角半徑的變化柱告。
? shadowOffset：陰影偏移量的變化截驮。
? shadowOpacity：陰影透明度的變化。
? shadowRadius：陰影模糊半徑的變化际度。
? transform：綜合形變葵袭，可以包含旋轉(zhuǎn)、縮放乖菱、平移等坡锡。
? transform.translation.x：沿 x 軸平移。
? transform.translation.y：沿 y 軸平移窒所。
? transform.translation.z：沿 z 軸平移鹉勒。
? path：形狀路徑的變化（通常用于 CAShapeLayer 的 path 屬性）。
? contents：圖層內(nèi)容的變化（例如圖像替換）吵取。
? zPosition：改變圖層在 z 軸的順序禽额。
? bounds：圖層邊界的變化（大小）皮官。
? frame：圖層的框架（位置和大懈埂）。
? masksToBounds：是否剪裁子圖層捺氢。
2.fillMode 決定動(dòng)畫執(zhí)行后的視覺效果：
? .forwards 表示動(dòng)畫結(jié)束后藻丢，圖層將保持在動(dòng)畫結(jié)束的狀態(tài)（雖然視覺效果是保持的，但實(shí)際上圖層的真實(shí)值并未改變摄乒，仍是初始值）悠反。
? 常見的 fillMode 選項(xiàng)：
? .removed（默認(rèn)值）：動(dòng)畫結(jié)束后恢復(fù)到初始狀態(tài)残黑。
? .forwards：動(dòng)畫結(jié)束后保持在結(jié)束狀態(tài)。
? .backwards：動(dòng)畫開始前问慎，先應(yīng)用開始狀態(tài)。
? .both：結(jié)合 .forwards 和 .backwards挤茄。
