CSS 动画曲线编辑器 - 贝塞尔可视化重定义
拖动曲线手柄调整动画缓动,实时预览弹跳或淡入效果,生成cubic-bezier值。
UD5工具箱
利萨茹曲线(Lissajous Curve),也称谐振螺旋图,是由两个互相垂直的简谐振动合成得到的平面曲线。其参数方程为:x(t) = A·sin(a·t + δ),y(t) = B·sin(b·t),其中 a 和 b 是频率,δ 是相位差。当频率比为有理数时,曲线闭合形成美丽的几何图案;加入衰减系数后,曲线呈现螺旋状,对应阻尼谐振子的运动轨迹。该曲线由法国数学家Jules Antoine Lissajous于1857年首次系统研究。
频率比 a:b 是决定利萨茹图形形状的核心因素:
在示波器应用中,通过观察利萨茹图形可以精确测量未知信号的频率。
相位差 δ 控制曲线在空间中的旋转方向和起始点:
在物理实验中,相位差反映了两个振动之间的时间延迟关系。
谐振螺旋图是本工具的特色模式。当衰减系数 > 0 时,振幅按指数衰减:envelope = e−k·t,导致曲线逐渐向中心螺旋收缩。这模拟了阻尼谐振子的真实物理行为:
这种模式在物理教学和振动分析中具有重要应用价值。
利萨茹曲线在多个领域有重要应用:
操作指南:
当频率比 a:b 为无理数时(如√2:1),曲线永远无法回到起点。这是因为:
这一性质在混沌理论和遍历理论中具有深刻意义。
谐振螺旋图直接对应阻尼谐振子的物理模型:
在电子学中,RLC电路的瞬态响应也遵循相同的数学规律。
拖动曲线手柄调整动画缓动,实时预览弹跳或淡入效果,生成cubic-bezier值。
应用Sobel或其他卷积核实施边缘检测,提取图像轮廓线条,可设置阈值,导出黑白线稿。
输入两个或多个整数,一键计算它们的最小公倍数,适合学生数学作业与分数通分。
浏览数十种纯CSS实现的加载小动画,点击复制代码直接用于项目。
基于方形或六边形网格,通过变形滑块创建有趣的密铺镶嵌图案。
随机生成整数数组,逐步展示按低位优先进行的基数排序过程,辅助算法理解。
在等轴测网格上绘制建筑或场景,支持多图层及调色板,导出等轴测像素艺术作品。
在画布上通过控制点绘制曲线与直线,生成对应的SVG <path> d属性字符串,方便插画引用。
集成ASCII/Hex/Base家族/Quoted-Printable/UUencode等多种编码一键互转,支持智能识别与链式解码。
在线演示Scrypt函数如何将密码转化为安全密钥,可调CPU与内存成本参数,理解现代KDF原理。
显示常见口琴调式的吹气和吸气音阶排列图,辅助学习。
将深度嵌套的JSON对象转化为用点号或括号分隔的单层键值对,便于数据清洗。
设置基础字号后批量转换像素值为em/rem,同时提供反向计算,保证响应式单位准确。
输入Proto定义和Base64编码的protobuf数据,在线解码为JSON,辅助分析二进制通信内容。
浏览数十种纯CSS加载旋转器,点击复制代码或自定义颜色尺寸,节省开发时间。
点击节点添加路径权重,运行Dijkstra算法高亮从起点到所有节点的最短距离和路径。
按提示将披萨切成指定分数(如1/2, 1/4),答对得分,直观学习分数概念。
输入网址,抓取该页面上的出入链接并绘制成节点关系草图。
通过滑块调节LCP、FID、CLS等指标值,实时显示对应的谷歌核心网页指标评分与颜色。
拖拽构建阶段与任务,配置触发条件,生成对应的GitLab CI或GitHub Actions YAML代码。
输入像素值并设定根字号或视口宽度,一键换算为 rem/em/vw 等相对单位,方便响应式开发。
输入交易清单,逐步可视化FP树的构建与频繁项集挖掘过程,理解购物篮分析算法。
输入凯撒密文,自动展示25种位移的解密结果,方便快速查看明文。
使用Seam Carving算法逐步移除图片中不重要的像素线以缩小尺寸,前端模拟教学。
选择单词中字母与放置格子,计算总分,支持双倍/三倍字母词。
上传图片,转换为带颜色和符号的网格图,辅助制作十字绣图纸。
输入LaTeX命令如 \alpha 或 \sum,即时渲染为高清可下载的SVG或PNG图片。
基于5x5方阵,通过行列坐标转置进行加密,操作简单却难以直接破解。
调整滚动容器和子项的对齐方式、停止点,观察CSS Scroll Snap平滑滑动效果。
构建无需JavaScript的多层级下拉菜单,提供HTML结构和CSS样式代码。