自定义图层/形状内的Swift/ios波浪填充动画

基础概念

在iOS开发中，自定义图层（Custom Layer）和形状（Shape）是用于创建复杂UI元素的重要工具。波浪填充动画（Wave Fill Animation）是一种视觉效果，通常用于模拟水波或其他动态效果。

类型

CAShapeLayer：用于绘制基本形状，如矩形、圆形等。
CAGradientLayer：用于创建渐变效果。
CAEmitterLayer：用于创建粒子效果，可以用于模拟水波效果。

应用场景

波浪填充动画常用于以下场景：

水波效果按钮
加载指示器
动态背景

示例代码

以下是一个使用Swift和Core Animation实现波浪填充动画的示例代码：

import UIKit
import QuartzCore

class WaveView: UIView {
    
    private let shapeLayer = CAShapeLayer()
    private let animation = CABasicAnimation(keyPath: "path")
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupView()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupView()
    }
    
    private func setupView() {
        layer.addSublayer(shapeLayer)
        setupAnimation()
    }
    
    private func setupAnimation() {
        animation.duration = 2.0
        animation.repeatCount = .infinity
        animation.timingFunction = CAMediaTimingFunction(name: .easeInEaseOut)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let path = UIBezierPath()
        let width = bounds.width
        let height = bounds.height
        let amplitude: CGFloat = 10.0
        let frequency: CGFloat = 4.0
        
        for x in stride(from: 0, to: width, by: 1) {
            let y = height / 2 + sin(CGFloat(x) * .pi * frequency) * amplitude
            if x == 0 {
                path.move(to: CGPoint(x: x, y: y))
            } else {
                path.addLine(to: CGPoint(x: x, y: y))
            }
        }
        
        shapeLayer.path = path.cgPath
        animation.fromValue = path.cgPath
        animation.toValue = UIBezierPath(arcCenter: CGPoint(x: width / 2, y: height / 2), radius: width / 2, startAngle: -.pi, endAngle: .pi, clockwise: true).cgPath
        
        shapeLayer.add(animation, forKey: "wave")
    }
}