流体动画原理：从咖啡滴落到页面扩散

流体动画原理：从咖啡滴落到页面扩散

咖啡滴落在桌面上，液体边缘的扩散过程看似简单，却蕴含着复杂的流体动力学原理。这种自然现象启发了前端开发中各种流体动画的实现方式，从水滴效果到墨水扩散，再到页面过渡动画，都可以通过数学模型和Web技术重现。

流体力学基础与前端实现

流体动画的核心在于模拟粘性流体的Navier-Stokes方程，但在前端实现中我们通常采用简化模型。最基本的流体属性包括：

1. 密度场：表示流体在每个位置的"浓稠度"
2. 速度场：描述流体粒子运动方向与速率
3. 压力场：影响流体扩散的关键因素

// 简化的2D流体数据结构
class FluidField {
  constructor(width, height) {
    this.width = width;
    this.height = height;
    this.density = new Array(width * height).fill(0);
    this.velocityX = new Array(width * height).fill(0);
    this.velocityY = new Array(width * height).fill(0);
  }
  
  // 在(x,y)处添加密度
  addDensity(x, y, amount) {
    const index = this._getIndex(x, y);
    this.density[index] += amount;
  }
  
  // 在(x,y)处添加速度
  addVelocity(x, y, amountX, amountY) {
    const index = this._getIndex(x, y);
    this.velocityX[index] += amountX;
    this.velocityY[index] += amountY;
  }
  
  _getIndex(x, y) {
    return Math.floor(y) * this.width + Math.floor(x);
  }
}

扩散算法实现

流体扩散的核心算法通常采用迭代解法。以下是基于WebGL的片段着色器实现示例，展示了如何计算密度扩散：

precision highp float;

uniform sampler2D u_density;
uniform sampler2D u_velocity;
uniform vec2 u_resolution;
uniform float u_diffusionRate;
uniform float u_dt;

void main() {
  vec2 coord = gl_FragCoord.xy / u_resolution;
  vec4 dens = texture2D(u_density, coord);
  
  // 获取相邻像素
  vec4 densRight = texture2D(u_density, coord + vec2(1.0, 0.0) / u_resolution);
  vec4 densLeft = texture2D(u_density, coord - vec2(1.0, 0.0) / u_resolution);
  vec4 densTop = texture2D(u_density, coord + vec2(0.0, 1.0) / u_resolution);
  vec4 densBottom = texture2D(u_density, coord - vec2(0.0, 1.0) / u_resolution);
  
  // 扩散计算
  vec4 diffusion = (densRight + densLeft + densTop + densBottom - 4.0 * dens) * u_diffusionRate * u_dt;
  
  gl_FragColor = dens + diffusion;
}

基于Canvas的简化实现

对于不需要物理精确的场景，可以使用Canvas 2D API实现视觉效果类似的流体动画。以下是墨水扩散效果的简化实现：

class InkSimulator {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = canvas.width;
    this.height = canvas.height;
    this.particles = [];
    
    // 初始化图像数据
    this.imageData = this.ctx.createImageData(this.width, this.height);
    this.buffer = new Uint32Array(this.imageData.data.buffer);
  }
  
  addInkDrop(x, y, radius, color) {
    // 创建圆形墨水粒子
    for (let i = 0; i < 500; i++) {
      const angle = Math.random() * Math.PI * 2;
      const distance = Math.random() * radius;
      const px = x + Math.cos(angle) * distance;
      const py = y + Math.sin(angle) * distance;
      
      this.particles.push({
        x: px, y: py,
        vx: (Math.random() - 0.5) * 2,
        vy: (Math.random() - 0.5) * 2,
        color: color,
        life: 100 + Math.random() * 50
      });
    }
  }
  
  update() {
    // 清空缓冲区
    this.buffer.fill(0);
    
    // 更新粒子
    this.particles = this.particles.filter(p => {
      p.x += p.vx;
      p.y += p.vy;
      p.life--;
      
      // 边界检查
      if (p.x < 0 || p.x >= this.width || p.y < 0 || p.y >= this.height) {
        return false;
      }
      
      // 渲染到缓冲区
      const index = Math.floor(p.y) * this.width + Math.floor(p.x);
      this.buffer[index] = this._mixColor(this.buffer[index], p.color);
      
      return p.life > 0;
    });
    
    // 绘制到画布
    this.ctx.putImageData(this.imageData, 0, 0);
  }
  
  _mixColor(dest, src) {
    // 简单的颜色混合
    const a1 = ((dest >> 24) & 0xff) / 255;
    const r1 = (dest >> 16) & 0xff;
    const g1 = (dest >> 8) & 0xff;
    const b1 = dest & 0xff;
    
    const a2 = ((src >> 24) & 0xff) / 255;
    const r2 = (src >> 16) & 0xff;
    const g2 = (src >> 8) & 0xff;
    const b2 = src & 0xff;
    
    const a = a1 + a2 * (1 - a1);
    if (a < 0.001) return 0;
    
    const r = Math.round((r1 * a1 + r2 * a2 * (1 - a1)) / a);
    const g = Math.round((g1 * a1 + g2 * a2 * (1 - a1)) / a);
    const b = Math.round((b1 * a1 + b2 * a2 * (1 - a1)) / a);
    
    return (Math.round(a * 255) << 24) | (r << 16) | (g << 8) | b;
  }
}

页面过渡中的流体效果

现代Web动画常使用流体效果实现页面过渡。以下是使用CSS和JavaScript实现的页面"液态"过渡效果：

<div class="page-transition">
  <div class="liquid-layer"></div>
  <div class="content"></div>
</div>

<style>
.page-transition {
  position: relative;
  overflow: hidden;
}

.liquid-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, #3498db, #9b59b6);
  border-radius: 0 0 50% 50%;
  transform: translateX(-100%);
  transition: transform 1.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.page-transition.active .liquid-layer {
  transform: translateX(0%);
}

.content {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s 0.8s;
}

.page-transition.active .content {
  opacity: 1;
}
</style>

<script>
function activateTransition() {
  const container = document.querySelector('.page-transition');
  container.classList.add('active');
  
  // 模拟加载新内容
  setTimeout(() => {
    container.querySelector('.content').innerHTML = '<h1>新内容已加载</h1>';
  }, 1000);
}
</script>

性能优化策略

流体动画往往计算密集，需要特别关注性能：

1. 分辨率控制：对大型画布使用降采样

// 创建低分辨率离屏canvas
const offscreenCanvas = document.createElement('canvas');
offscreenCanvas.width = mainCanvas.width / 2;
offscreenCanvas.height = mainCanvas.height / 2;

2. 时间步长自适应：

let lastTime = 0;
function animate(currentTime) {
  const deltaTime = Math.min((currentTime - lastTime) / 1000, 0.016);
  lastTime = currentTime;
  
  // 使用deltaTime更新模拟
  fluidSimulator.update(deltaTime);
  requestAnimationFrame(animate);
}

3. Web Worker分流计算：

// 主线程
const worker = new Worker('fluid-worker.js');
worker.postMessage({
  type: 'init',
  width: 256,
  height: 256
});

// Worker线程 (fluid-worker.js)
self.onmessage = function(e) {
  if (e.data.type === 'init') {
    // 初始化流体模拟
    const simulator = new FluidSimulator(e.data.width, e.data.height);
    
    self.onmessage = function(e) {
      if (e.data.type === 'update') {
        simulator.update(e.data.dt);
        self.postMessage({
          type: 'update',
          density: simulator.getDensityArray()
        });
      }
    };
  }
};

创意应用实例

将流体效果应用于UI交互可以创造独特体验。以下是按钮点击产生墨水波纹的效果：

class RippleButton {
  constructor(button) {
    this.button = button;
    this.canvas = document.createElement('canvas');
    this.ctx = this.canvas.getContext('2d');
    
    // 设置canvas尺寸
    this.resize();
    window.addEventListener('resize', () => this.resize());
    
    // 添加到按钮
    this.button.style.position = 'relative';
    this.button.style.overflow = 'hidden';
    this.canvas.style.position = 'absolute';
    this.canvas.style.top = '0';
    this.canvas.style.left = '0';
    this.canvas.style.pointerEvents = 'none';
    this.button.prepend(this.canvas);
    
    // 流体模拟器
    this.simulator = new FluidSimulator(
      Math.floor(this.canvas.width / 4),
      Math.floor(this.canvas.height / 4)
    );
    
    // 点击事件
    this.button.addEventListener('click', (e) => {
      const rect = this.button.getBoundingClientRect();
      const x = (e.clientX - rect.left) / this.canvas.width;
      const y = (e.clientY - rect.top) / this.canvas.height;
      
      // 在点击位置添加墨水
      this.simulator.addInk(
        x * this.simulator.width,
        y * this.simulator.height,
        10, // 半径
        [0.2, 0.5, 0.8, 1.0] // RGBA颜色
      );
    });
    
    // 动画循环
    this.animate();
  }
  
  resize() {
    this.canvas.width = this.button.offsetWidth;
    this.canvas.height = this.button.offsetHeight;
  }
  
  animate() {
    this.simulator.update(1/60);
    this.render();
    requestAnimationFrame(() => this.animate());
  }
  
  render() {
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
    
    // 获取密度场并渲染
    const density = this.simulator.getDensity();
    const cellWidth = this.canvas.width / this.simulator.width;
    const cellHeight = this.canvas.height / this.simulator.height;
    
    for (let y = 0; y < this.simulator.height; y++) {
      for (let x = 0; x < this.simulator.width; x++) {
        const index = y * this.simulator.width + x;
        const d = density[index];
        
        if (d > 0.01) {
          this.ctx.fillStyle = `rgba(50, 150, 255, ${d})`;
          this.ctx.beginPath();
          this.ctx.arc(
            x * cellWidth + cellWidth/2,
            y * cellHeight + cellHeight/2,
            Math.min(cellWidth, cellHeight) * 0.8 * d,
            0, Math.PI * 2
          );
          this.ctx.fill();
        }
      }
    }
  }
}

数学模型的深入探讨

更精确的流体模拟需要解算完整的Navier-Stokes方程。以下是二维情况下的简化形式：

1. 连续性方程（质量守恒）： ∇·u = 0

2. 动量方程： ∂u/∂t + (u·∇)u = -∇p + ν∇²u + f

在代码中实现这些方程需要离散化处理。以下是压力投影步骤的示例实现：

class FluidSolver {
  // ...其他方法
  
  project() {
    const { width, height, velocityX, velocityY } = this;
    const divergence = new Array(width * height).fill(0);
    const pressure = new Array(width * height).fill(0);
    
    // 计算散度场
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const index = y * width + x;
        divergence[index] = -0.5 * (
          velocityX[index + 1] - velocityX[index - 1] +
          velocityY[index + width] - velocityY[index - width]
        );
      }
    }
    
    // 迭代求解压力场 (Jacobi方法)
    for (let iter = 0; iter < 20; iter++) {
      for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
          const index = y * width + x;
          pressure[index] = (
            pressure[index - 1] +
            pressure[index + 1] +
            pressure[index - width] +
            pressure[index + width] -
            divergence[index]
          ) / 4;
        }
      }
    }
    
    // 用压力场修正速度场
    for (let y = 1; y < height - 1; y++) {
      for (let x = 1; x < width - 1; x++) {
        const index = y * width + x;
        velocityX[index] -= 0.5 * (pressure[index + 1] - pressure[index - 1]);
        velocityY[index] -= 0.5 * (pressure[index + width] - pressure[index - width]);
      }
    }
  }
}

现代Web API的应用

新的Web API如WebGPU可以大幅提升流体模拟性能。以下是WebGPU计算着色器的基本结构：

// 流体模拟计算着色器
@group(0) @binding(0) var<storage, read_write> density: array<f32>;
@group(0) @binding(1) var<storage, read_write> velocityX: array<f32>;
@group(0) @binding(2) var<storage, read_write> velocityY: array<f32>;
@group(0) @binding(3) var<uniform> params: {width: u32, height: u32, dt: f32};

@compute @workgroup_size(8, 8)
fn main(@builtin(global_invocation_id) id: vec3<u32>) {
  let index = id.y * params.width + id.x;
  
  // 边界检查
  if (id.x >= params.width || id.y >= params.height) {
    return;
  }
  
  // 扩散计算
  var sum = 0.0;
  var count = 0;
  
  // 检查相邻单元格
  for (var dy = -1; dy <= 1; dy++) {
    for (var dx = -1; dx <= 1; dx++) {
      let nx = i32(id.x) + dx;
      let ny = i32(id.y) + dy;
      
      if (nx >= 0 && nx < i32(params.width) && 
          ny >= 0 && ny < i32(params.height)) {
        let neighborIndex = u32(ny) * params.width + u32(nx);
        sum += density[neighborIndex];
        count += 1;
      }
    }
  }
  
  // 更新密度
  density[index] = mix(density[index], sum / f32(count), 0.1);
  
  // 平流计算 (简化的半拉格朗日方法)
  let velX = velocityX[index];
  let velY = velocityY[index];
  let srcX = f32(id.x) - velX * params.dt;
  let srcY = f32(id.y) - velY * params.dt;
  
  // 此处省略插值代码...
}

交互式流体艺术创作

将流体模拟与用户输入结合可以创建互动艺术装置。以下是基于鼠标移动生成流体运动的完整示例：

class InteractiveFluid {
  constructor(canvas) {
    this.canvas = canvas;
    this.ctx = canvas.getContext('2d');
    this.width = canvas.width;
    this.height = canvas.height;
    
    // 创建离屏canvas用于效果处理
    this.offscreen = document.createElement('canvas');
    this.offscreen.width = this.width;
    this.offscreen.height = this.height;
    this.offscreenCtx = this.offscreen.getContext('2d');
    
    // 流体参数
    this.simulator = new FluidSimulator(
      Math.floor(this.width / 4),
      Math.floor(this.height / 4)
    );
    
    // 鼠标跟踪
    this.lastMouse = { x: 0, y: 0 };
    canvas.addEventListener('mousemove', (e) => {
      const rect = canvas.getBoundingClientRect();
      this.lastMouse = {
        x: (e.clientX - rect.left) / this.width,
        y: (e.clientY - rect.top) / this.height
      };
    });
    
    // 触摸支持
    canvas.addEventListener('touchmove', (e) => {
      e.preventDefault();
      const rect = canvas.getBounding