iOS 抖音点赞动画背后的技术解密：玩转 CAShapeLayer 和贝塞尔曲线

前言

纵观社交媒体时代，抖音无疑成为风靡全球的短视频平台。其中，点赞按钮以其独特的动画效果吸引了无数用户。今天，我们将踏上技术探索之旅，深入剖析抖音点赞动画背后的技术奥秘。

技术剖析

抖音点赞动画的魅力源于两项核心技术：CAShapeLayer 和贝塞尔曲线。

CAShapeLayer

CAShapeLayer 是 Core Animation 框架中的一种特殊图层，用于创建和显示自定义形状。它可以轻松生成各种复杂的形状，包括心形、圆形和路径。

贝塞尔曲线

贝塞尔曲线是一种数学曲线，由一系列控制点定义。通过操纵这些控制点，我们可以创建平滑、复杂和精确的形状。

实现步骤

1. 创建 CAShapeLayer

let shapeLayer = CAShapeLayer()
shapeLayer.strokeColor = UIColor.red.cgColor // 设置描边颜色
shapeLayer.fillColor = UIColor.red.cgColor // 设置填充颜色
shapeLayer.lineWidth = 5 // 设置描边宽度

2. 定义贝塞尔曲线

let path = UIBezierPath()
path.move(to: CGPoint(x: 0, y: 0)) // 起点
path.addCurve(to: CGPoint(x: 100, y: 100), controlPoint1: CGPoint(x: 50, y: 0), controlPoint2: CGPoint(x: 100, y: 50)) // 心形曲线

3. 设置路径

shapeLayer.path = path.cgPath

4. 添加关键帧动画

let animation = CAKeyframeAnimation(keyPath: "strokeEnd") // 设置动画类型
animation.values = [0, 1] // 动画值
animation.duration = 1 // 动画持续时间
animation.repeatCount = 1 // 重复次数
animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut) // 动画效果
shapeLayer.add(animation, forKey: "strokeEnd") // 添加动画

结果

通过上述步骤，我们成功创建了一个 CAShapeLayer，并使用贝塞尔曲线定义了一个心形路径。最后，我们通过添加关键帧动画，实现了点赞动画的效果。

深入理解

控制点的作用

贝塞尔曲线中的控制点决定了曲线的形状。通过调整控制点的坐标，我们可以创建各种不同的形状。

关键帧动画

关键帧动画允许我们控制动画的开始和结束状态以及动画的过渡方式。在点赞动画中，我们使用关键帧动画来控制描边的动画。

示例代码

import UIKit
import QuartzCore

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建 CAShapeLayer
        let shapeLayer = CAShapeLayer()
        shapeLayer.strokeColor = UIColor.red.cgColor // 设置描边颜色
        shapeLayer.fillColor = UIColor.red.cgColor // 设置填充颜色
        shapeLayer.lineWidth = 5 // 设置描边宽度

        // 定义贝塞尔曲线
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 0)) // 起点
        path.addCurve(to: CGPoint(x: 100, y: 100), controlPoint1: CGPoint(x: 50, y: 0), controlPoint2: CGPoint(x: 100, y: 50)) // 心形曲线

        // 设置路径
        shapeLayer.path = path.cgPath

        // 添加关键帧动画
        let animation = CAKeyframeAnimation(keyPath: "strokeEnd") // 设置动画类型
        animation.values = [0, 1] // 动画值
        animation.duration = 1 // 动画持续时间
        animation.repeatCount = 1 // 重复次数
        animation.timingFunction = CAMediaTimingFunction(name: CAMediaTimingFunctionName.easeOut) // 动画效果
        shapeLayer.add(animation, forKey: "strokeEnd") // 添加动画

        // 添加到视图层
        view.layer.addSublayer(shapeLayer)
    }
}

总结

iOS 抖音点赞动画的实现离不开 CAShapeLayer 和贝塞尔曲线的巧妙结合。通过掌握这些技术，我们可以轻松创建各种复杂的动画效果，为我们的应用程序增添更多趣味性和交互性。