Path Animation

<!--
  示例：deck.gl 路径动画
  要点：TripsLayer 按时间戳逐段显示轨迹，底层 PathLayer 画出完整线路
  依赖：deck.gl 9.0 · jsDelivr CDN
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>路径动画</title>
<style>
  html,body{height:100%;margin:0;background:#0d1117}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{position:relative;z-index:5;flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:16px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar button{font:inherit;font-size:12px;padding:3px 10px;border-radius:5px;cursor:pointer;
              border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  #cv{flex:1 1 auto;min-height:0;width:100%}
</style>
</head>
<body>
<div class="bar">
  <span>轨迹 <b>10</b> 条</span>
  <span>时间 <b id="t">0</b> / 880</span>
  <button id="play">暂停</button>
  <span>拖拽旋转 · 滚轮缩放</span>
</div>
<canvas id="cv"></canvas>
<script src="https://cdn.jsdelivr.net/npm/deck.gl@9.0.35/dist.min.js"></script>
<script>
(function () {
  'use strict';

  if (typeof deck === 'undefined') {
    document.body.innerHTML =
      '<div style="padding:24px;color:#ff8c74">deck.gl 加载失败，请检查能否访问 cdn.jsdelivr.net</div>';
    return;
  }

  var palette = [
    [86, 186, 255], [120, 220, 210], [255, 190, 90],
    [150, 160, 255], [255, 120, 140], [110, 235, 170],
    [240, 220, 120], [130, 200, 255], [200, 150, 255], [255, 160, 120]
  ];

  var routes = [];
  var stepSeconds = 5.5;
  var steps = 160;

  for (var r = 0; r < 10; r++) {
    var cx = 116.34 + Math.random() * 0.18;
    var cy = 39.84 + Math.random() * 0.14;
    var radius = 0.018 + Math.random() * 0.032;
    var ang = Math.random() * Math.PI * 2;
    var driftX = (Math.random() - 0.5) * 0.00035;
    var driftY = (Math.random() - 0.5) * 0.00035;
    var path = [];
    var ts = [];

    for (var s = 0; s < steps; s++) {
      path.push([cx + Math.cos(ang) * radius, cy + Math.sin(ang) * radius * 0.8]);
      ts.push(s * stepSeconds);
      ang += (0.085 + Math.random() * 0.02) * (r % 2 === 0 ? 1 : -1);
      cx += driftX;
      cy += driftY;
    }

    routes.push({
      path: path,
      timestamps: ts,
      color: palette[r % palette.length]
    });
  }

  var maxTime = steps * stepSeconds;

  var baseLayer = new deck.PathLayer({
    id: 'base-routes',
    data: routes,
    getPath: function (d) { return d.path; },
    getWidth: 1,
    widthUnits: 'pixels',
    widthMinPixels: 1,
    getColor: [70, 110, 160, 70],
    jointRounded: true,
    capRounded: true
  });

  function buildTrips(time) {
    return new deck.TripsLayer({
      id: 'trips',
      data: routes,
      getPath: function (d) { return d.path; },
      getTimestamps: function (d) { return d.timestamps; },
      getColor: function (d) { return d.color; },
      currentTime: time,
      trailLength: 90,
      fadeTrail: true,
      widthUnits: 'pixels',
      widthMinPixels: 3,
      jointRounded: true,
      capRounded: true
    });
  }

  var deckgl = new deck.Deck({
    canvas: 'cv',
    width: '100%',
    height: '100%',
    initialViewState: {
      longitude: 116.43,
      latitude: 39.90,
      zoom: 11.0,
      pitch: 40,
      bearing: -18,
      maxPitch: 65
    },
    controller: true,
    layers: [baseLayer, buildTrips(0)]
  });

  var playing = true;
  var pausedAt = 0;
  var tLabel = document.getElementById('t');
  var startStamp = performance.now();

  function loop(now) {
    if (playing) {
      var elapsed = (now - startStamp) / 1000;
      var time = (elapsed * 42 + pausedAt) % maxTime;
      tLabel.textContent = Math.round(time);
      deckgl.setProps({ layers: [baseLayer, buildTrips(time)] });
    }
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);

  document.getElementById('play').addEventListener('click', function (e) {
    if (playing) {
      /* 记录当前进度，恢复时接着走 */
      pausedAt = (pausedAt + (performance.now() - startStamp) / 1000 * 42) % maxTime;
      playing = false;
      e.currentTarget.textContent = '继续';
    } else {
      startStamp = performance.now();
      playing = true;
      e.currentTarget.textContent = '暂停';
    }
  });

  window.__deck = deckgl;
})();
</script>
</body>
</html>