Math Curve Loaders 数学曲线加载动画库：用 HTML+CSS+JS 实现高级 Loading 效果

代码简单说

发布于 2026-06-16 08:46:29

1020

文章被收录于专栏：代码简单说代码简单说

Math Curve Loaders 数学曲线加载动画库：用 HTML+CSS+JS 实现高级 Loading 效果

SEO关键词：数学曲线加载动画、Loading动画库、HTML加载动画、CSS动画效果、JavaScript动画、Lissajous曲线、玫瑰曲线、前端动画库、UI加载效果、纯JS动画

大家好这里是「代码简单说」`,欢迎大家关注同名公众号,不定时更新更多实用有趣的教程也欢迎大家在评论区一起讨论交流!~

前几天在 GitHub 上发现了一个非常有意思的前端动画项目，它没有依赖任何框架，也没有引入 Canvas 动画库，而是利用各种数学曲线公式生成炫酷的 Loading 效果。

很多开发者平时接触的加载动画大多是旋转圆圈、骨架屏或者进度条，但实际上数学曲线也能创造出非常具有科技感和艺术感的动态效果。

今天就来分享这个开源项目——Math Curve Loaders。

项目简介

https://github.com/Paidax01/math-curve-loaders

Math Curve Loaders 是一个基于数学曲线构建的 Loading 动画展示库。

项目使用：

HTML
CSS
JavaScript

纯原生实现。

通过不同的参数方程生成各种轨迹路径，再让粒子沿着路径运动，从而形成各种独特的加载动画效果。

项目不仅提供动画展示，还支持：

曲线公式查看
动画源码查看
一键复制公式
一键复制代码
弹窗预览动画

非常适合：

前端开发者
数据可视化开发者
UI设计师
数学动画爱好者

项目效果

项目首页会展示多个数学曲线动画。

包括：

曲线类型	数学领域
Rose Curve	玫瑰曲线
Lissajous Curve	李萨如曲线
Cardioid	心形线
Hypotrochoid	内旋轮线
Cassini Oval	卡西尼卵形线
Fourier Path	傅里叶路径
Original Particle Trail	原始粒子轨迹

每个动画都可以点击查看详情。

详情弹窗中会展示：

动画实时预览
曲线数学公式
对应代码实现
复制按钮

对于学习数学可视化非常方便。

项目结构

项目结构十分简洁：

math-curve-loaders
│
├── index.html
├── style.css
├── main.js
│
├── original.html
├── original.css
└── original.js

各文件作用如下：

文件	说明
index.html	动画展示入口
style.css	页面样式与弹窗样式
main.js	动画引擎与曲线定义
original.html	原始加载动画演示
original.css	原始样式
original.js	原始动画逻辑

核心实现原理

项目核心思想其实非常简单：

利用参数方程生成坐标点。

例如：

for(let t = 0; t < Math.PI * 2; t += 0.01){
    const x = Math.cos(t)
    const y = Math.sin(t)

    points.push({x,y})
}

得到圆形轨迹后。

粒子沿着轨迹循环移动：

particle.x = points[index].x
particle.y = points[index].y

这样就形成了动态加载动画。

V1：基础圆形轨迹

最简单的情况：

x = r cos(t)

y = r sin(t)

实现：

function circle(t,r){
    return {
        x:r*Math.cos(t),
        y:r*Math.sin(t)
    }
}

效果：

●●●●●●●
●       ●
●       ●
●●●●●●●

虽然简单，但也是绝大多数 Loading 动画的基础。

V2：玫瑰曲线（Rose Curve）

项目中最漂亮的动画之一。

公式：

r = a cos(kθ)

转换为直角坐标：

x = a cos(kθ) cos(θ)

y = a cos(kθ) sin(θ)

实现：

function rose(t,a,k){
    const r = a*Math.cos(k*t)

    return {
        x:r*Math.cos(t),
        y:r*Math.sin(t)
    }
}

当：

k=4

会形成八瓣花。

效果类似：

      *
   *     *
 *    *    *
   *     *
      *

非常适合作为：

AI产品加载动画
数据分析平台
科技感网站

V3：Lissajous 曲线

李萨如曲线是前端动画领域经常使用的一类轨迹。

公式：

x = A sin(at + δ)

y = B sin(bt)

实现：

function lissajous(t){
    return {
        x:120*Math.sin(3*t+Math.PI/2),
        y:120*Math.sin(2*t)
    }
}

不同参数会产生不同图案。

例如：

a:b
1:1
2:1
3:2
5:4

都能生成完全不同的轨迹。

V4：Cardioid 心形线

经典数学曲线。

公式：

r = a(1-cosθ)

实现：

function cardioid(t,a){
    const r = a*(1-Math.cos(t))

    return {
        x:r*Math.cos(t),
        y:r*Math.sin(t)
    }
}

生成效果：

  **   **
 ****** *
 *******
  *****
   ***
    *

非常适合：

情人节活动页
节日专题页
创意产品展示

V5：Hypotrochoid 内旋轮线

这种曲线经常出现在机械设计与几何学中。

公式：

x=(R-r)cos(t)+d cos((R-r)t/r)

y=(R-r)sin(t)-d sin((R-r)t/r)

实现：

function hypotrochoid(t,R,r,d){
    return {
        x:(R-r)*Math.cos(t)+
          d*Math.cos((R-r)*t/r),

        y:(R-r)*Math.sin(t)-
          d*Math.sin((R-r)*t/r)
    }
}

生成效果非常复杂。

视觉上类似：

∞∞∞∞∞∞
∞    ∞
∞∞∞∞∞∞

具有强烈科技感。

V6：Cassini Oval

卡西尼卵形线。

属于数学分析中的经典曲线。

公式：

(x²+y²)²−2a²(x²−y²)=b⁴−a⁴

这种曲线可以形成：

单环
双环
葫芦形

多种形态。

作为 Loading 动画时辨识度极高。

V7：Fourier 风格路径

项目中还加入了傅里叶级数生成的路径。

原理：

f(t)=Σ an sin(nt)+bn cos(nt)

实现：

let x = 0
let y = 0

for(let n=1;n<=10;n++){
    x += ax[n]*Math.cos(n*t)
    y += ay[n]*Math.sin(n*t)
}

通过叠加多个频率。

可以生成极其复杂的动态轨迹。

动画引擎设计

项目采用统一动画引擎。

大致流程：

requestAnimationFrame
          ↓
更新参数 t
          ↓
计算曲线坐标
          ↓
更新粒子位置
          ↓
绘制轨迹
          ↓
下一帧

核心代码：

function animate(){

    time += speed

    updateCurve(time)

    render()

    requestAnimationFrame(animate)
}

这种实现方式具有：

流畅
高性能
浏览器兼容好

等优点。

对比实验

V1 普通 Loading

○○○○○

特点：

简单
缺乏辨识度

V2 数学曲线 Loading

✿∞♥✧

特点：

个性化
科技感强
可配置
可扩展

性能分析

项目没有使用：

Three.js
GSAP
PixiJS
Canvas库

完全依赖：

HTML
CSS
JavaScript

因此具有：

指标	表现
学习成本	低
部署难度	低
文件体积	小
可维护性	高
二次开发	容易

对于中小型项目来说完全够用。

适用场景

SaaS后台

数据加载：

Loading Dashboard...

AI产品

推理动画：

AI Thinking...

数据可视化

图表加载：

Generating Report...

创意官网

品牌展示动画：

Welcome

项目地址

在线预览

https://paidax01.github.io/math-curve-loaders/

GitHub

https://github.com/paidax01/math-curve-loaders

总结

Math Curve Loaders 将数学公式与前端动画结合在一起，通过玫瑰曲线、Lissajous 曲线、心形线、内旋轮线、Cassini Oval 和 Fourier Path 等经典数学模型，实现了大量具有艺术感和科技感的 Loading 动画。

相比传统旋转圆圈式加载动画，这种基于参数方程的实现方式不仅视觉效果更丰富，而且扩展性极强。只要修改曲线公式，就能快速创造出全新的动画形态。

如果你正在开发：

AI产品
数据可视化平台
SaaS后台
创意官网

那么这个项目非常值得研究和借鉴。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-06-10，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

Math Curve Loaders 数学曲线加载动画库：用 HTML+CSS+JS 实现高级 Loading 效果

Math Curve Loaders 数学曲线加载动画库：用 HTML+CSS+JS 实现高级 Loading 效果

Math Curve Loaders 数学曲线加载动画库：用 HTML+CSS+JS 实现高级 Loading 效果

项目简介

项目效果

项目结构

核心实现原理

V1：基础圆形轨迹

V2：玫瑰曲线（Rose Curve）

V3：Lissajous 曲线

V4：Cardioid 心形线

V5：Hypotrochoid 内旋轮线

V6：Cassini Oval

V7：Fourier 风格路径

动画引擎设计

对比实验

V1 普通 Loading

V2 数学曲线 Loading

性能分析

适用场景

SaaS后台

AI产品

数据可视化

创意官网

项目地址

在线预览

GitHub

总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐