#前端 #css #demo #codepen #notify #svg #anim
the 🔔 tolls for thee by leimapapa

一个动态通知铃铛图标，可通过不同设置触发不同的通知状态。

技术浅析：
1. SVG 中的 <animateTransform> 和 <animate> 标签被用来添加铃铛晃动和数字切换的动画效果。
2. 定义了一个 notify 函数，接收通知的数量和自定义属性（如铃铛颜色、速度等），并根据这些参数动态生成 SVG 内容，展示通知的数量和铃铛的动画。
3. <animateTransform> 标签用于对 SVG 元素进行变换动画，比如旋转、缩放、移动等。在这个例子中，它主要用于实现铃铛摇摆的动画效果。

attributeName="transform    // 指定要进行动画的属性名。
attributeType="XML"         // 定义动画属性的类型，这里为 XML 类型，表示操作 SVG 属性。
type="rotate"       // 指定变换类型为旋转。
values              // 定义旋转动画的值序列，格式为 "0 50 45; -12 50 45; 0 50 45; 12 50 45; 0 50 45"`，意味着铃铛会围绕 `(50, 45) 这一点进行前后摇摆。
dur                 // 动画持续时间，由 ringSpeed 属性动态指定。
repeatCount         // 动画重复次数，根据通知数量动态决定。
calcMode="spline"   // 动画计算模式，spline 使动画按照特定的速率曲线运动，使动画更平滑。

4. <animate> 标签用于添加基本的属性动画，比如颜色变换、透明度变化等。在这个例子中，它被用于实现徽章大小的动态变化和铃舌的左右移动。

attributeName  // 指定要进行动画的属性，如 r （圆的半径）和 cx （圆心的 x 坐标）。
values         // 定义属性值随时间变化的序列。例如，徽章大小的动画使用 "15;17;15" 表示半径从 15 变到 17 再变回 15，模拟一种跳动效果。
// dur 和 repeatCount 同上，指定动画持续时间和重复次数。

这些动画被应用于铃铛的不同部分：
- 铃铛体的旋转动画（ <animateTransform> ），模拟接到通知时铃铛的摇晃。
- 徽章的脉冲动画（ <animate> ），通过半径的变化给用户一种“通知”正在“跳动”的感觉。
- 铃舌的左右移动（ <animate> ），配合铃铛体的旋转，增加了动画的真实感。