利萨如曲线之旅：用Canvas + GSAP绘制迷人的振动曲线

2023-10-05 23:16:05

用Canvas和GSAP实现令人惊叹的利萨如曲线动画

在计算机图形学中，利萨如曲线以其优雅的数学特性和广泛的应用而闻名。从动画到游戏再到数据可视化，这种独特的曲线形状激发了想象力，点燃了创造力。在本文中，我们将深入探讨利萨如曲线的奥秘，并使用Canvas和GSAP来实现令人惊叹的动画效果。

理解利萨如曲线的数学原理

利萨如曲线是两个垂直正弦函数的组合，其数学表达式如下：

x = A * sin(ωt + φ1)
y = B * sin(ωt + φ2)

其中，A 和 B 是振幅，ω 是角频率，φ1 和 φ2 是相位角。通过改变这些参数，我们可以生成各种形状的利萨如曲线，从圆到椭圆再到更复杂的图案。

使用Canvas绘制利萨如曲线

Canvas是HTML5元素，允许我们使用JavaScript代码直接在网页上绘制图形。要使用Canvas绘制利萨如曲线，我们可以使用以下步骤：

// 创建Canvas元素
const canvas = document.createElement('canvas');

// 设置Canvas大小
canvas.width = 500;
canvas.height = 500;

// 获取Canvas上下文
const ctx = canvas.getContext('2d');

// 设置画笔样式
ctx.strokeStyle = 'red';
ctx.lineWidth = 2;

// 绘制利萨如曲线
const A = 100;
const B = 50;
const ω = 1;
const φ1 = 0;
const φ2 = Math.PI / 2;

let t = 0;
while (t < 1000) {
  const x = A * Math.sin(ω * t + φ1);
  const y = B * Math.sin(ω * t + φ2);

  ctx.lineTo(x + 250, y + 250);
  t += 0.01;
}

ctx.stroke();

使用GSAP实现利萨如曲线动画

GSAP是一个强大的JavaScript动画库，可让您创建平滑而复杂的动画效果。要使用GSAP为利萨如曲线添加动画，我们可以使用以下步骤：

// 使用GSAP创建动画
const tl = gsap.timeline();

// 创建利萨如曲线路径
const path = "M 0 0 L 100 50 L 50 100 Z";

// 绘制利萨如曲线
const curve = document.createElementNS('http://www.w3.org/2000/svg', 'path');
curve.setAttribute('d', path);
curve.setAttribute('fill', 'none');
curve.setAttribute('stroke', 'red');
curve.setAttribute('stroke-width', '2');

document.body.appendChild(curve);

// 创建动画
tl.to(curve, {
  duration: 1,
  attr: {
    d: "M 0 0 L 200 100 L 100 200 Z"
  },
  ease: "Power4.easeInOut"
});

// 重复动画
tl.repeat(-1);

代码示例

以下代码示例展示了如何使用Canvas和GSAP来实现利萨如曲线动画：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas"></canvas>

  <script>
    // Canvas代码
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');

    ctx.strokeStyle = 'red';
    ctx.lineWidth = 2;

    const A = 100;
    const B = 50;
    const ω = 1;
    const φ1 = 0;
    const φ2 = Math.PI / 2;

    let t = 0;
    while (t < 1000) {
      const x = A * Math.sin(ω * t + φ1);
      const y = B * Math.sin(ω * t + φ2);

      ctx.lineTo(x + 250, y + 250);
      t += 0.01;
    }

    ctx.stroke();

    // GSAP代码
    const tl = gsap.timeline();

    const path = "M 0 0 L 100 50 L 50 100 Z";

    const curve = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    curve.setAttribute('d', path);
    curve.setAttribute('fill', 'none');
    curve.setAttribute('stroke', 'red');
    curve.setAttribute('stroke-width', '2');

    document.body.appendChild(curve);

    tl.to(curve, {
      duration: 1,
      attr: {
        d: "M 0 0 L 200 100 L 100 200 Z"
      },
      ease: "Power4.easeInOut"
    });

    tl.repeat(-1);
  </script>
</body>
</html>