让你的 QQ 消息提醒动起来：使用 CAShapeLayer 实现拖拽红点效果

IOS

2023-11-15 13:15:10

引言

谁不喜欢 QQ 消息标志性的小红点呢？这个醒目的提醒点缀着我们的聊天窗口，提示我们有新信息需要关注。然而，你有没有想过让这个小红点动起来，创造一种更具互动性和视觉吸引力的体验？

本教程将指导你如何使用 CAShapeLayer 在你的应用程序中实现一个类似 QQ 消息的拖拽红点效果。我们将深入了解 CAShapeLayer 的功能，学习如何创建自定义形状，以及如何使用动画来实现平滑的拖拽效果。

准备工作

在你开始之前，请确保你：

了解 iOS 开发基础知识
熟悉 Swift 或 Objective-C
已安装 Xcode

实践

1. 创建一个 CAShapeLayer

CAShapeLayer 是一种 CALayer，它允许你创建和显示自定义形状。要创建一个 CAShapeLayer，你可以使用以下代码：

let shapeLayer = CAShapeLayer()

2. 定义形状路径

现在，你需要定义红点的形状路径。可以使用 UIBezierPath 来创建各种形状，包括圆形和椭圆形。对于我们的红点，我们将使用一个圆形路径：

let path = UIBezierPath(arcCenter: CGPoint(x: 0, y: 0), radius: 10, startAngle: 0, endAngle: 2 * CGFloat.pi, clockwise: true)
shapeLayer.path = path

3. 设置形状属性

接下来，你可以自定义红点的颜色、填充和描边：

shapeLayer.fillColor = UIColor.red.cgColor
shapeLayer.strokeColor = UIColor.white.cgColor
shapeLayer.lineWidth = 2

4. 添加到视图

现在，你可以将 CAShapeLayer 添加到视图层次结构中：

view.layer.addSublayer(shapeLayer)

5. 处理手势

为了实现拖拽效果，你需要处理触摸手势：

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 获取触摸点
    guard let touch = touches.first else { return }
    let touchPoint = touch.location(in: view)
    
    // 开始动画
    let animation = CABasicAnimation(keyPath: "position")
    animation.toValue = touchPoint
    animation.duration = 0.2
    shapeLayer.add(animation, forKey: "position")
}

override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 更新形状位置
    guard let touch = touches.first else { return }
    let touchPoint = touch.location(in: view)
    shapeLayer.position = touchPoint
}

override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    // 停止动画
    shapeLayer.removeAnimation(forKey: "position")
}