怎么通过 Math.sin() 与 Math.cos() 配合时间变量实现极简的控制台波动动画效果-java教程-PHP中文网

用 math.sin() 和 math.cos() 配合时间变量可在控制台实现波动动画：通过 date.now() 生成时间参数，缩放后输入三角函数获得 [-1,1] 周期值，乘以振幅并加偏移转为位置或长度，再用空格重复、字符拼接和清屏（\x1bc 或 console.clear）实现动态效果。

用 math.sin() 和 math.cos() 配合时间变量，在控制台实现波动动画，核心是把三角函数输出映射为可视的字符长度或位置变化。不需要 dom，不依赖框架，几行代码就能跑起来。

用 sin/cos 生成周期性数值

正弦和余弦函数输出范围固定在 [-1, 1]，乘上一个系数（比如振幅）就能得到有规律上下波动的数字。时间变量通常用 Date.now() 或 performance.now()，再除以一个缩放因子（如 100）来控制波动快慢：

const t = Date.now() / 100; —— 时间变慢 100 倍，让变化肉眼可辨
const y = Math.sin(t) * 10; —— 振幅为 10 的上下波动值
const x = Math.cos(t) * 20; —— 水平方向同步波动，相位差 90°

把数值转成控制台里的“动画”

控制台没有像素坐标，但可以用空格、符号长度或重复字符模拟位置/高度变化。例如：

速创猫AI简历

速创猫AI简历是一款用于生成、优化和定制求职简历的 AI 简历工具。

下载

画一条随时间起伏的波形线：console.log('█'.repeat(Math.floor(Math.sin(t) * 20 + 25)))（+25 是偏移，避免负数）
左右摆动一个字符：console.log(' '.repeat(Math.floor(Math.cos(t) * 15 + 20)) + '●')
清屏再重绘（关键！否则堆满）：process.stdout.write('\x1Bc');（Node.js 环境）或 console.clear();（部分浏览器控制台支持）

完整极简示例（Node.js）

复制粘贴到 node 中即可运行：

function animate() {
  const t = Date.now() / 300;
  const pos = Math.floor(Math.sin(t) * 15 + 20);
  process.stdout.write('\x1Bc'); // 清屏
  console.log(' '.repeat(pos) + '★');
  setTimeout(animate, 50);
}
animate();

这里 ★ 的水平位置按正弦规律左右移动，周期约 1.8 秒，每 50ms 刷新一次，视觉上就是平滑晃动。